sublime学习笔记

学习课程地址：快乐的sublime编辑器_sublime编辑器使用

另可参考笔记地址：

http://c.haoduoshipin.com/happysublime/

http://blog.csdn.net/u014465934/article/details/72810763

PS：博主的一些文章地址：http://happypeter.github.io/

github：https://github.com/happypeter/sublime-config

1 sublime的几个优势

1.操做简单上手快

2.支持多点编辑：ctrl + 光标

3.基于Package Control强大的包管理功能

4.闪电同样的查找速度。打开一个大项目，鼠标右击进行全局查找。即便纯文本界面的 vim 都没法达到这样的速度。

5.深度可定制。全部的配置内容也都像 vim 同样以纯文本的形式保存在一个相似于 .vim 的目录之中。透明和分享带来的好处无限。

6.快速打开文件：ctrl + p

7.命令行面板：ctrl + shift + p

8.可启用vim模式

9.已经造成事实标准，不少其余的编辑器中均可以使用相似的快捷键。例如 github 的 atom ，atom 是开源和免费的。

10.sublime社区活跃

打开命令面板，可查找快键键，输入keybin，打开第一项能找到全部的快捷键合集，以下所示

2 sublime安装

安装可到官网上安装，也可到以下地址安装（包含激活码）：https://pan.baidu.com/s/1nv6Lzsd

3 一些经常使用的快捷键

Ctrl+ n：打开新页面

Ctrl+ tab：页面跳转

Ctrl+ j：合并两行

Ctrl+ l：选择当前行

shift + 鼠标右键：块选择

Ctrl + `（1左边）：快速唤起console面板

Ctrl + Shift + p：调出packagecontrol面板

Ctrl + Shift + 上/下 键：能够总体移动一行代码

Ctrl + Shift +V ：进行自适应缩进的黏贴

Tab键：自动补全代码

Ctrl + K + B 隐藏/显示左面Side Bar

C + enter 快速下启一行 

Ctrl + enter 快速下启一行

Ctrl + shift + enter 快速上起一行

Ctrl + [ 向前两个字节 Ctrl + ]向后两个字节

Ctrl + 左/右 一会儿是跳一个单词

左侧显示目录树：View ->Side Bar ->Show Side Bar[直接加载你的目录文件也能够]

自定义快捷键，进入以下界面：

那么应该如何知道命令的正确名称？

打开工做台，输入sublime.log_commands(True)回车执行，再打开面板执行相应的操做，从返回的结果中可看到精确的命令名和相关的参数。

4 sublime自定制

打开命令行窗口，输入settings，有两项：Default 和 User。Default 中的内容是不准改的，可在user中输入一些配置，该文件保存的位置为Packages->User->Preferences.sublime-settings，可经过Preferences->Browse Packages->User查看。

存放到 User 文件夹下的内容会覆盖 Settings Default 中的内容。

自定制的设置直接放到 User/Preferences.sublime-settings 这个文件中，那么就是对全部打开的项目都生效了。可是，这些设置有时候对于不一样的项目是会有区别的，sublime 是有相应的解决方法的，就是能够经过设置 Projects 来实现。若是以为英文看得不顺也能够参考 这里。基本思路就是给每一个项目添加 xxx.sublime-project 文件，里面的配置会把 User/ 中的设置给覆盖了。不过这样仍是稍微有些麻烦，除非特别必要，本身手动临时改改 User/ 中的这个 settings 文件就好。

5 用Package Control来安装扩展包

进入https://packagecontrol.io/installation，复制installation页面里面的Python代码，在工做台中运行。

打开命令面板，输入install出现以下界面：

选中第一个，出现全部包的列表

6 主题

安装主题，先安装Material，再安装Seti，主题安装好后，以下图所示，选择本身安装的主题后生效

还可在命令窗口中输入remove packages，选中要删除的包便可进行删除操做。

7 emmet

安装sublime以后，默认安装的包里面就自带不少自动补齐的功能，可是默认的这些自动补齐功能在作Web前端开发的时候还不是很够用。因此emmet显得很是重要。例如在html中输入！<tab>:

emmet用于代码提示、自动补全等

例如 输入p20，Tab键以后自动补全代码为：padding: 20px;

输入m0-auto，Tab键以后自动补全代码为：margin: 0 auto;

掌握一些Emmet语法对于提升代码输入速度颇有帮助。可在http://docs.emmet.io/actions/上查看更多命令。

子代：>

div>ul>li 生成
    <div>
        <ul>
            <li></li>
        </ul>
    </div>

兄弟：+

div+div 生成
    <div></div>
    <div></div>

父代：^

div+div>p>span+em^bq 生成
    <div></div>
        <div>
            <p><span></span><em></em></p>
            <blockquote></blockquote>
        </div>

重复：*

ul>li*3 生成
    <ul>
        <li></li>
        <li></li>
        <li></li>
        <li></li>
        <li></li>
    </ul>

成组：（）

（div>dl>(dt+dd)*3）+footer>p 生成
    <div>
            <dl>
                <dt></dt>
                <dd></dd>
                <dt></dt>
                <dd></dd>
                <dt></dt>
                <dd></dd>
            </dl>
    </div>
    <footer>
        <p></p>
    </footer>

ID:# CLASS：.

div#header + div.page  生成
    <div id="header"></div>
    <div class="page"></div>

属性：[ ]

td[title="hello world" colspan=3] 生成
<td title="hello world" colspan="3"></td>

8 自定义代码片断

snippet意为小片断，sublime可以让用户建立本身的sublime。这个不是凭空想出来的，而是要定位本身平常工做中的重复性劳动。

点击Tools->Developer->New Snippet...能够建立一个新的snippet

<snippet> <content><![CDATA[ Hello, ${1:this} is a ${2:snippet}. ]]></content> <!-- Optional: Set a tabTrigger to define how to trigger the snippet --> <!-- <tabTrigger>hello</tabTrigger> --> <!-- Optional: Set a scope to limit where the snippet will trigger --> <!-- <scope>source.python</scope> --> </snippet>

• <content><![CDATA[ ]]></content> 定义了补全的内容。第三行就是要插入的代码片，${1}表明的是第一个光标位置，代码片会默认选中this，当按下tab以后，会选中${2}中的snippet
• <tabTrigger> ： 定义了触发补全的字符串。好比在以上例子上, 在编辑窗口输入hello而后按下tab就会在编辑器输出Type your snippet here这段代码片断
• <description> ：对snippet描述
• <scope>：snippet生效的语言环境，若是不取消注释的话，则在全部后缀的文件下均可以生效。

以视频为例，新建snippet以下：

<snippet> <content><![CDATA[ --- layout:default title:${1:标题} --- ${2} ]]></content> <!-- Optional: Set a tabTrigger to define how to trigger the snippet --> <tabTrigger>top</tabTrigger> <!-- Optional: Set a scope to limit where the snippet will trigger --> <scope>text.html.markdown</scope> </snippet>

保存时以.sublime-snippet为文件扩展名，默认保存位置为User下

点击Tools->Snippets...，可看到已保存的自定义snippet，选中便可显示出代码片断，或者使用关键字触发，输入top<tab>

做用范围<scope>

经过快捷键：Ctrl + Shift + Alt + p可查看当前文件的scope，例

出来的内容有多是空格隔开的多个字符串，取第一个字符串就好了。基本上各类代码文件的 scope 都是 source 打头，例如 source.js source.ruby source.python 。其余的都是以 text 打头，例如 text.html.basic text.html.markdown text.plain 等。 那么如何给一个 snippet 定义多于一个文件类型的 scope 呢？能够这样

<scope>text.html.markdown, text.plain</scope>

9 批处理任务 build system

10 HTML文件预览快捷键设置

首先须要安装SideBarEnhancements插件

接下来配置预览快捷键，打开Preferences->Key Bindings->User，键入以下内容

[ // chrome { "keys": ["f1"], "command": "side_bar_files_open_with", "args": { "paths": [], "application": "C:/Users/Administrator/AppData/Local/Google/Chrome/Application/chrome.exe", "extensions":".*" } }, // ie { "keys": ["f2"], "command": "side_bar_files_open_with", "args": { "paths": [], "application": "C:/Program Files (x86)/Internet Explorer/iexplore.exe", "extensions":".*" } } ]

其中“keys”是指定的快捷键，可自定义，application是浏览器在电脑上的目录地址，保存便可经过快捷键进行预览html