Sublime Text 2+Zen Coding

自己长期使用editplus做代码编辑，使用过DW，还是习惯前者的使用环境。好友推荐，试试新的编码工具——Sublime Text 2。在代码制作过程中，最主要的是1）快速复制的模式化工作  2）零碎代码整理对齐  3）减少敲击键盘的次数。通过自己试用，Sublime Text 2+Zen Coding的组合能满足我这些需求，在配合其余插件。下文有详细叙述，本文主要从设计师的角度选择内容，可能有些浅显。

建议使用官方版本，绿色版本容易出现一些莫名其妙的问题。

官网地址：http://www.sublimetext.com/

软件特性：

• 自动完成：

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

• 多列编辑：

  按住ctrl点击鼠标，会出现多个闪烁的光标，这时可同时修改多处或者按住鼠标中键拖拽，

  

• 代码注释功能：

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

• 行操作：

  ctrl+alt+↑、ctrl+alt+↓向上或者向下交换两行，ctrl+enter，光标后插入空行，ctrl+d选择相似，可以参考后面的快捷键列表。

• 右键功能：

  

  前3个，大家都知道，第4个，show unsaved changes，显示未保存的修改，红色减号表示删去的内容，绿色加号表示新增的内容

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

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

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

安装Sublime Text 2插件的方法：

1.直接安装

安装Sublime text 2插件很方便，可以直接下载安装包解压缩到Packages目录（菜单->preferences->packages）。

2.使用Package Control组件安装

也可以安装package control组件，然后直接在线安装：

1. 按Ctrl+`调出console（注：安装有QQ输入法的这个快捷键会有冲突的，输入法属性设置-输入法管理-取消热键切换至QQ拼音）

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;open(os.path.join(ipp,pf),'wb').write(urllib2.urlopen('http://sublime.wbond.net/'+pf.replace(' ','%20')).read())

3. 重启Sublime Text 2。

4. 如果在Perferences->package settings中看到package control这一项，则安装成功。

如果这种方法不能安装成功，可以到这里下载文件手动安装。

用Package Control安装插件的方法：

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

2. 输入install 调出 Install Package 选项并回车，然后在列表中选中要安装的插件。

（在绿色x64版本中，调用不出插件列表。英文版就没问题，不清楚什么原因）

GBK Encoding Support

对应gb2312来说，Sublime Text 2 本生不支持的，我们可以通过插件GBK to UTF8或GBK进行转码工作。

主要插件Zen Coding：

Zen Coding

不懂可以围观：《Zen Coding: 一种快速编写HTML/CSS代码的方法》

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

或者按下ctrl+alt+enter，激发zencoding控制台，可看到整个动态的过程。

Zen Coding代码写法：

1）使用Ctrl ＋ Alt ＋ Enter 呼出ZenCoding

2） div#content>ul>li*3>a[href="javascript:void(0);"]{Links$} 这样短短的一句话生成：

<did id="content">

<ul>

<li><a href="javascript:void(0);">Links1</a></li>

<li><a href="javascript:void(0);">Links2</a></li>

<li><a href="javascript:void(0);">Links3</a></li>

</ul>

</did>

PS:Zen Coding for Sublime Text 2插件的开发者已经停止了在Github上共享了，现在只有通过Package Control来安装。

Sublime Text 中使用Zen Coding的一些技巧

1、缩写扩展

之前知道，通过Control ＋ Alt ＋ Enter可以在一个新行中输入ZC的缩写，来生成代码。同时，如果我们在编辑中直接书写了ZC缩写，比如 div#content>p 当光标放置在p之后时，可以通过Tab键来扩展，ZC会从光标处开始向左侧搜索到第一个空白处，之间的代码作为ZC缩写，这样不必每次打开新行输入，提高了效率，缺点就是不能够实时预览。

2、嵌套代码

如上图所示，可以实现在已经写好的代码外面嵌套其他的代码，实现方式是将光标放置到想要嵌套的标签上，然后使用Control ＋ Alt ＋ Enter 呼出ZC的命令行，就可以了。

其实Zen Coding还提供了很多方便代码编写的操作，例如标签匹配、返回上一个/下一个编辑点、更新img标签、合并行等，但是因为在Sublime Text中没有提供完整的支持，所以这些特性还无法使用。

其余插件：

jQuery Package for sublime Text

如果你离不开jQuery的话，这个必备～～

Sublime Prefixr

Prefixr，CSS3 私有前缀自动补全插件，显然也很有用哇

JS Format

一个JS代码格式化插件。

Placeholders

故名思意，占位用，包括一些占位文字和HTML代码片段，实用。

Sublime Alignment

用于代码格式的自动对齐。传说最新版Sublime 已经集成。

Tag
一些有代码洁癖的程序猿很适合这个插件，HTML代码格式化能使html代码更加漂亮整洁。

使用的方法也很简单，选中一段Html代码后，按Ctrl+Alt+f即可

JsMinifier

该插件基于Google Closure compiler，自动压缩js文件。

Sublime CodeIntel

代码自动提示

Bracket Highlighter

类似于代码匹配，可以匹配括号，引号等符号内的范围。

GBK to UTF8

将文件编码从GBK转黄成UTF8，快捷键Ctrl+Shift+C

主要快捷键

Ctrl+L 选择整行（按住-继续选择下行）

Ctrl+KK 从光标处删除至行尾

Ctrl+Shift+K 删除整行

Ctrl+Shift+D 复制光标所在整行，插入在该行之前

Ctrl+J 合并行（已选择需要合并的多行时）

Ctrl+KU 改为大写

Ctrl+KL 改为小写

Ctrl+D 选词 （按住-继续选择下个相同的字符串）

Ctrl+M 光标移动至括号内开始或结束的位置

Ctrl+Shift+M 选择括号内的内容（按住-继续选择父括号）

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

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

Ctrl+Z 撤销

Ctrl+Y 恢复撤销

Ctrl+M 光标跳至对应的括号

Alt+. 闭合当前标签

Ctrl+Shift+A 选择光标位置父标签对儿

Ctrl+Shift+[ 折叠代码

Ctrl+Shift+] 展开代码

Ctrl+KT 折叠属性

Ctrl+K0 展开所有

Ctrl+U 软撤销

Ctrl+T 词互换

Tab 缩进 自动完成

Shift+Tab 去除缩进

Ctrl+Shift+↑ 与上行互换

Ctrl+Shift+↓ 与下行互换

Ctrl+K Backspace 从光标处删除至行首

Ctrl+Enter 光标后插入行

Ctrl+Shift+Enter 光标前插入行

Ctrl+F2 设置书签

F2 下一个书签

Shift+F2 上一个书签