subslime text2 入门4.5

一、 前言

之前自己只使用过editplus这款工具，但是只是停留在一个个代码编写的功能上，只是先用于熟悉代码的；现在考虑到开发效率，于是在网上开始搜索效率更高的web前端开发工具，根据前辈们的推荐，我找到了Sublime Text这款工具，并开始根据网上的一些教程开始了入门使用，在这里先简单介绍下自己学习这款工具的情况；

申明：下面 的教程大部分转自网上相关的教程资料；

二、 功能

Sublime Text2 是一款具有代码高亮、语法提示、自动完成且反应快速的编辑器软件，不仅具有华丽的界面，还支持插件扩展机制，用她来写代码，绝对是一种享受。

界面

先看下ST2的界面：

l 从上到下：标题栏↓菜单栏↓tab控制栏↓编辑区↓状态栏；

l 从做到右：分别是边栏（可关闭）→编辑区→MiniMap

菜单栏

各种命令，各种设置。

Tab栏

很多编辑器都有的，如果文件编辑过未保存，右上角有个小圆点提示保存，如果未保存关了也不用害怕，ST2很贴心，会帮我们自动保存。

编辑区

这是我们主要的工作区域，ST2支持代码自动缩进，代码折叠功能。

介绍几个常见的功能：

l 自动完成：自动完成的快捷键是Tab，如果在html文件中，输入cl按下tab，即可自动补全为class=””；加上zencoding后，更是如虎添翼，后面再讲到

l 多列编辑：按住ctrl点击鼠标，会出现多个闪烁的光标，这时可同时修改多处

l 代码注释功能：ctrl+/、ctrl+shift+/分别未行注释和块注释，再按一下就能去掉注释，ST2能够自动识别是html、css还是js文件，给出不同类型的注释。

l 右键功能：

Open Containing Folder…，打开包含此文件的文件夹，这个很方便找到相关的文件

Copy File Path，复制文件路径，方便我们复制路径到浏览器中查看

Auto-Format Tags on Selection 格式化选中的文档，方便我们更清晰的查看代码结构，虽然ST2有自动缩进功能，但是当我们粘贴进一段没有格式化过的代码，就需要这个能了，这个功能要安装了Tag这个插件才会出现。

l 人性化设计：ST2虽然还是beta版中，但是有很多设计细节还是值得称赞的，比如点击一个标签或者括弧，会在起始处显示下划点线，方便看清代码结果，每一层嵌套代码间都有竖线，起到视觉辅助的作用

三、 设置

Sublime text2 在bulid后，对【设置】进行了合并，现在只有两个选项，分别是系统设置和快捷键设置。

一般我们修改设置的话，最好复制出来在user里修改，以免以后升级default被覆盖掉。

l Settings：在此文件里，可以修改很多东西，比如主题，字体，字号，是否显示行号、自动缩进、自动完成。很多都默认选中了，我另外修改了两个地方：

l Key Bindings：快捷键设置，ST2的快捷键很多，改的时候注意不要覆盖了。

l 主要快捷键列表：

Ctrl+/ 注释整行（如已选择内容，同“Ctrl+Shift+/”效果）

Ctrl+Shift+/ 注释已选择内容

Ctrl+Z 撤销

Ctrl+Y 恢复撤销

Ctrl+Shift+[ 折叠代码

Ctrl+Shift+] 展开代码

Tab 缩进 自动完成

ctrl+f11 无干扰模式

ctrl+alt+f   html代码格式化排列（要先安装Tag插件）+js代码格式化排列（要先安装JsFormat插件）

ctrl+shift+a js代码对齐排列（要先安装alignment插件）

四、 扩展

安装包控制(Package Control)

Sublime Text 2 也拥有良好的扩展功能，这就是安装包(Package),Sublime Text 2 也有其用来进行 Package 控制的插件：Sublime Package Control。通过 Sublime Package Control，安装、升级和卸载 Package 也变得轻松写意了。安装 Package Control 的方法：

         1.打开 Sublime Text 2，按下 Control + ` 调出 Console

          2,将以下代码粘贴进命令行中并回车:

         

import urllib2,os; pf='Package Control.sublime-package'; ipp = sublime.installed_packages_path(); os.makedirs( ipp ) if not os.path.exists(ipp) else None; urllib2.install_opener( urllib2.build_opener( urllib2.ProxyHandler( ))); open( os.path.join( ipp, pf), 'wb' ).write( urllib2.urlopen( 'http://sublime.wbond.net/' +pf.replace( ' ','%20' )).read()); print( 'Please restart Sublime Text to finish installation')

           3.重启 Sublime Text 2，如果在 Preferences -> Package Settings中见到Package Control这一项，就说明安装成功了。

下面通过 Package Control 来安装Sublime Alignment 插件来说明sublime text2中插件的安装过程：

1. 按下 Shift + Command + P 调出命令面板。

2. 输入 install 调出 Package Control: Install Package 选项，按下回车

        3.在列表中找到 Alignment，按下回车进行安装。

4. 重启 Sublime Text 2 使之生效。现在通过选中文本并按下  Ctrl + Shift + A 就可以进行对齐操作了。

通过这个方法就可以简便的安装更多的插件，虽然目前的安装源中插件并不是很多，但相信以后会更加丰富的。

PS:其他插件的安装只要参考上面的过程就可以了；值得注意的是，没安装成功一个插件后要重新启动sublime text2；然后再对其进行系统设置和快捷键的设置，从而熟悉插件的运用；

插件推荐：

1.lEmmet(之前叫Zencoding)：前端必备，快速开发HTML/CSS

快捷键：TAB键

PS:具体插件信息及安装连接：http://www.tuicool.com/articles/2ua2aa；点击打开链接

zen coding介绍：http://www.qianduan.net/zen-coding-a-new-way-to-write-html-code.html点击打开链接

输入 div.wrapper>div.header+div.main+div.footer 按下Tab，立刻变成

2.l JsFormat，格式化js代码，这个插件很有用，我们有时在网上看到某些效果，想查看是怎么实现的，但是代码被压缩过，很难阅读，不用怕，用ST2打开，按下ctrl+alt+f（这是我设置的快捷键），即可让代码还原，莫非是武林中失传已久的“还我靓靓拳”。

快捷键：ctrl+alt+f

3.l Tag 格式化标签，让乱七八糟的代码，瞬间整齐清晰。

4.l BracketHighlighter，括弧高亮显示

5.l Clipboard History，剪切板历史，可以保存多个复制信息，按下ctrl+alt+v，可以选择历史剪切板

6.l Goto-CSS-Declaration，跳转到css文件该class的声明处，方便修改查看，如图下所示，注意对应的css文件要同时打开才行。

五、 结语

总而言之，Sublime Text2是一款不错的代码编写工具，有好看的ui，人性化的细节设计，全面的功能和扩展机制，如果你还没用过，请试一下，不会让你失望的。如果说有什么缺点的话，ST2目前对ANSI、GBK的汉字显示不正常，（使用utf8编码就没问题，package control里有一个gbk插件），希望ST2以后能完美支持中文。

在试用 Sublime Text 2 的过程中，“快”和“顺”是给 人 最强烈的感受，就如同 Chrome 浏览器一样，Sublime 的各种操作都给人以很流畅的感受。唯一让人纠结的是价格，$59 的注册价确实不便宜，好在目前测试阶段还可以无限试用。