电子杂志制作 WWW.YAZINE.COM

编辑器（Editor） vs 集成开发环境（Integrated Development Environment，下文简称IDE）

我经常看到一些程序员拿编辑器和IDE进行比较，诸如Vim比Eclipse强大或是Visual Studio太慢不如Notepad++好使之类的讨论比比皆是，个人认为这些讨论没有意义，因为编辑器和IDE根本是面向两种不同使用场景的工具：

编辑器面向无语义的纯文本，不涉及领域逻辑，因此速度快体积小，适合编写单独的配置文件和动态语言脚本（Shell、Python和Ruby等）。IDE面向有语义的代码，会涉及到大量领域逻辑，因此速度偏慢体积庞大，适合编写静态语言项目（Java、C++和C#等）。

我认为应当使用正确的工具去做有价值的事情，并把效率最大化，所以我会用Eclipse编写Java项目，用Vim编写Shell，用Sublime Text编写JavaScript/HTML/Python，用VisualStudio编写C#。

前言到此结束，下面进入正题。

二、界面

1、概况：

1、从上到下：标题栏Title、菜单栏Menu、标签栏Tab、编辑区EditingArea、控制台Console、状态栏Status Bar。

2、从做到右：侧边栏（可关闭、文件、文件夹视图）、编辑区（代码编辑）、MiniMap（缩略图）。

2、菜单栏：各种命令，各种设置。

文件File：编辑Edit：选择Selection：查找Find：视图View：转到Goto：工具Tools：项目Project：首选项Preferences：个性化定制。帮助Help：

3、标签栏：文件名的缩略图，文件编辑未保存，右上角有个小圆点，提示保存。如果未保存关了也不用害怕，自动保存。

4、状态栏：ASCII编码、Line 6-Column 53（当前行列号）、Tab Size：4（Tab格式等信息）、HTML（当前语言）。

5、控制台：使用Ctrl+`调出，它既是一个标准的Python REPL，也可以直接对Sublime Text进行配置。

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

常见的功能：

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

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

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

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

5、右键功能：

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

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

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

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

6、人性化设计：

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

三、设置

自定制，数据被保存在Preferences.sublime-settings，Default或User，user可以覆盖default。在配置文件，直接设置

配置文件在：preferences－setting user。

下面是一些可能有用但我很少用到的功能：

宏（Macro）：Sublime Text支持录制宏，但我在实际工作中并未发现宏有多大用处。

其它平台（Other Platforms）：本文只介绍了Windows平台上Sublime Text的使用，不过Linux和OS X上Sublime Text的使用方式和Windows差别不大，只是在快捷键上有所差异，请参考Windows/Linux快捷键和OS X快捷键。

项目（Projects）：Sublime Text支持简单的项目管理，但我一般只用到文件夹。

Vim模式（Vintage）：Sublime Text自带Vim模式。

构建（Build）：通过配置，Sublime Text可以进行源码构建。

调试（Debug）：通过安装插件，Sublime Text可以对代码进行调试。

四、快捷键

若稍有英文基础，则更建议打开Preferences->KeyBindings--Default，这里面是详细的快捷键配置。

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

因为快捷键众多，所以有下面这种组合快捷键，先按下ctrl+k，松开k，再按下j就可以展开全部代码了。

快捷键列表（Shortcuts Cheatsheet）

我把本文出现的Sublime Text按其类型整理在这里，以便查阅。

通用（General）

↑↓←→：上下左右移动光标，注意不是不是KJHL！

Alt：调出菜单

Ctrl+Shift+P：调出命令板（CommandPalette）

Ctrl+`：调出控制台

编辑（Editing）

Ctrl+Enter：在当前行下面新增一行然后跳至该行

Ctrl+Shift+Enter：在当前行上面增加一行并跳至该行

移动（）

Ctrl+←/→：进行逐词移动

Ctrl+Shift+←/→进行逐词选择

Ctrl+↑/↓移动当前显示区域

Ctrl+Shift+↑/↓移动当前行

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

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

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

Ctrl+Shift+K：删除整行

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

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

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

Ctrl+KU：改为大写

Ctrl+KL：改为小写

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

Ctrl+Shift：/：块注释(注释已选择内容)

Ctrl+Alt+/：块注释，并Focus到首行，写注释说明用的

Ctrl+Z：撤销

Ctrl+Y：恢复

Alt+.：闭合当前标签

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

整理（clear）

Tab：缩进：自动完成

Shift+Tab：去除缩进

Ctrl+Shift+[：折叠代码

Ctrl+Shift+]：展开代码

Ctrl+KT：折叠属性

Ctrl+K0：展开所有

选择（Selecting）

Ctrl+D：选择当前光标所在的词并高亮该词所有出现的位置，再次Ctrl+D选择该词出现的下一个位置，在多重选词的过程中，使用Ctrl+K进行跳过，使用Ctrl+U进行回退，使用Esc退出多重编辑

Ctrl+Shift+L：将当前选中区域打散

Ctrl+J：把当前选中区域合并为一行

Ctrl+M：在起始括号和结尾括号间切换

Ctrl+Shift+M：快速选择括号间的内容

Ctrl+Shift+J：快速选择同缩进的内容

Ctrl+Shift+Space：快速选择当前作用域（Scope）的内容

查找&替换（Finding&Replacing）

F3：跳至当前关键字下一个位置

Shift+F3：跳到当前关键字上一个位置

Alt+F3：选中当前关键字出现的所有位置

Ctrl+F/H：进行标准查找/替换，之后：

Alt+C：切换大小写敏感（Case-sensitive）模式

Alt+W：切换整字匹配（Wholematching）模式

Alt+R：切换正则匹配（Regexmatching）模式

Ctrl+Shift+H：替换当前关键字

Ctrl+Alt+Enter：替换所有关键字匹配

Ctrl+Shift+F：多文件搜索&替换

跳转（Jumping）

Ctrl+P：跳转到指定文件，输入文件名后可以：

@ 符号跳转：输入@symbol跳转到symbol符号所在的位置

# 关键字跳转：输入#keyword跳转到keyword所在的位置

: 行号跳转：输入:12跳转到文件的第12行。

Ctrl+R：跳转到指定符号

Ctrl+G：跳转到指定行号

窗口（Window）

Ctrl+Shift+N：创建一个新窗口

Ctrl+N：在当前窗口创建一个新标签

Ctrl+W：关闭当前标签，当窗口内没有标签时会关闭该窗口

Ctrl+Shift+T：恢复刚刚关闭的标签

屏幕（Screen）

F11：切换普通全屏

Shift+F11：切换无干扰全屏

Alt+Shift+2：进行左右分屏、Alt+Shift+5：进行上下左右分屏、Alt+Shift+8：进行上下分屏。分屏，使用Ctrl+数字键跳转到指定屏，使用Ctrl+Shift+数字键将当前屏移动到指定屏

书签（）

Ctrl+F2：设置书签

F2：下一个书签

Shift+F2：上一个书签

五、插件

1、安装方法：

安装有两个办法：

（1）直接把插件放到它的安装路径对应文件包packages里面去，不知道在哪的可以直接打开 preferences->Browse packages，放进去之后软件会自动检测。

（2）使用命令方式直接让软件自己下载安装。（使用packagecontrol组件）（前提：先安装下面那个packagecontrol插件)

按下Ctrl+Shift+P调出命令面板，输入install， 调出 Install Package 选项并回车，然后在列表中选中要安装的插件。

下载拷贝：然后把它放到package文件包中。没用过Github的朋友不知道在哪里下载。Download ZIP。然后把它解压，把文件夹放进package文件包，然后它就能检测到包啦！

代码安装：Ctrl+shift+p、输入install、选择package install 过几秒会弹出另一个框。然后在输入框中输入你想要的插件关键字安装吧！

大致就是这样，简单明了。下面介绍其他常用插件，安装方式同理！

2、常用插件：

package control（包裹组件）

下载：Package Control

通过快捷键 ctrl+` 或者 View > Show Console 菜单打开控制台，然后粘贴对应的版本代码进去，然后回车让它安装。

适用于 Sublime Text 3：

import  urllib.request,os;pf='PackageControl.sublime-package';ipp=sublime.installed_packages_path();urllib.request.install_opener(urllib.request.build_opener(urllib.request.ProxyHandler()));open(os.path.join(ipp,pf),'wb').write(urllib.request.urlopen('Package Control'+pf.replace('','%20')).read())

适用于 Sublime Text 2：

import  urllib2,os;pf='Package Control.sublime-package';ipp=sublime.installed_packages_path();os.makedirs(ipp)ifnotos.path.exists(ipp)elseNone;urllib2.install_opener(urllib2.build_opener(urllib2.ProxyHandler()));open(os.path.join(ipp,pf),'wb').write(urllib2.urlopen('Package Control'+pf.replace('','%20')).read());print('Please restart Sublime Text to finish installation')

当然了，有些时候这样你安装不进去的，就只能自个去下载安装包放到package文件里边去了（就是上边我说的那个文件夹)如果在Preferences → Package Settings 中看到 PackageControl 这一项，说明安装成功。

代码整理：

HTMLBeautify（）

格式化HTML。

HTML/CSS/JS Prettify（代码格式化）

能够格式化css html 和js。

注意：格式化的文件路径中不能有中文，不然会报找不到node的错误（windows下）。

YUI Compressor（压缩JS和CSS文件） 

下载：kairyou/SublimeYUICompressor · GitHub

PHPTidy（整理与排版PHP代码）

 下载：welovewordpress/SublimePhpTidy · GitHub

JsFormat（javascript格式化） 

下载：jdc0589/JsFormat · GitHub

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

HtmlTidy（清理与排版你的HTML代码）

下载：welovewordpress/SublimeHtmlTidy · GitHub

AutoPEP8（）

格式化Python代码。

Alignment安装案例

下载：https://github.com/wbond/sublime_alignment

Alignment（代码补齐）补齐就是补齐~就像这样

代码简写：

snippets（自定制代码补齐机制）

下载：https://docs.sublimetext.info/en/latest/extensibility/snippets.html?highlight=scope

自定制代码补齐机制，

Zen Coding （现已改名为Emmet）

下载：https://github.com/sergeche/emmet-sublime

通过简单的命令直接生成一大段代码！一个字又快又准，安装好插件后，使用Ctrl ＋ Alt ＋Enter 呼出ZenCoding。

我们可以用div#content>ul>li*3>a[href="javascript:void(0);"]{Links$} 这样短短的一句话，生成下面一段代码：

技巧：

前端必备，快速开发HTML/CSS

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

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

高亮显示：

BracketHighlighter

BracketHighlighter高亮显示匹配的括号、引号和标签，BracketHighlighter这个插件能在左侧高亮显示匹配的括号、引号和标签，能匹配的[] ,  () ,  {} ,  "" ,  '' , <tag></tag>等甚至是自定义的标签，当看到密密麻麻的代码分不清标签之间包容嵌套的关系时，这款插件就能很好地帮你理清楚代码结构，快速定位括号，引号和标签内的范围。

TrailingSpacer（高亮显示多余的空格和Tab）

下载：SublimeText/TrailingSpaces · GitHub

颜色：

ColorPicker （调色盘） 

下载：weslly/ColorPicker · GitHub

在编辑CSS样式的时候，ColorPicker可以让sublime text 内置一个调色盘，调好颜色，点击OK就会在光标处生成十六进制颜色代码。

CSS：

CSScomb（CSS属性排序） 

下载：csscomb/csscomb-for-sublime · GitHub

CSS3_Syntax（css语法高亮）

对css语法高亮的支持，view-syntax-css3选中css3就能使用css3高亮了。必须每条属性都加上分号，并且属性必须小写，不然不会高亮，有点鸡肋啊。

Prefixr（自动加-webkit前缀）

写 CSS可自动添加 -webkit 等私有词缀，Ctrl+Alt+X触发。

Autoprefixer（自动加前缀）

可以给css自动加前缀功能

Goto-CSS-Declaration（CSS文件跳转）

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

编码：

GBK Encoding Support（GBK中文编码）

这个插件还是非常有用的，因为sublime 本身 不支持gbk编码，在utf8如此流行的今天，我们整站还是gbk编码，o(︶︿︶)o唉，所以全靠这个插件了。

GBK to UTF8（编码转换）

将文件编码从GBK转换成UTF8，菜单 – File里面找。

文档管理：

SideBarEnhancements（侧边栏增强） 

下载：titoBouzout/SideBarEnhancements · GitHub

SyncedSideBar

支持当前文件在左侧面板中定位，不错。

Hex-to-HSL-Color Hex（颜色模式转HSL颜色模式）

下载：atadams/Hex-to-HSL-Color · GitHub

SublimeTmpl （自定义新建文件） 

下载：kairyou/SublimeTmpl · GitHub

默认已经添加了html、css、js等常见类型的面板，按ctrl+alt+h/ctrl+alt+c/ctrl+alt+j可新建这3钟类型的文件，快捷键在这里\Packages\SublimeTmpl\Default (Windows).sublime-keymap, 模板文件在这里\Packages\SublimeTmpl\templates，可修改。 比如下边简单的html文件

DocBlockr（代码建立文档）

DocBlockr 可以使你很方便地对代码建立文档。它会解析函数，变量，和参数，根据它们自动生成文档范式，你的工作就是去填充对应的说明。

GotoRecent（历史文档记录）

打开最近的文件，系统有这个功能，但只能看最近8个，有点不爽，按ctrl+e，选择即可。

语法识别：

jQuery（jQuery语法识别）

支持jquery的只能语法提示，很赞。

JavaScriptNext - ES6 Syntax（ES6语法识别）

提供ES6的语法支持。

WordPress（WordPress的函数）

集成一些WordPress的函数，对于像我这种经常要写WP模版和插件的人特别有用

Vintage（Vim模拟）

如果你习惯使用vim，那么可以安装这个插件，这个插件可以让sublime像vim一样。

LESS（LESS语法识别）

这是一个非常棒的插件，可以让sublime支持less的语法高亮和语法提示，对于搞less的同学灰常重要，不过多解释。

SCSS（SCSS语法识别）

支持scss的语法高亮，里面附带了好多CSS Snippet，无论现用或者改造成，都可节省不少时间。

Liquid（Liquid语法识别）

提供Liquid语法支持，如果你也写博客的话不妨试试。

Smarty（Smarty语法识别）

提供smarty语法的支持。Smarty插件默认的分隔符是{}，如果你使用的分隔符不同可以更改插件目录的Smarty.tmPreferences文件，找到其中的SMARTY_LDELIM和SMARTY_RDELIM，修改为你的分隔符即可。

文件传输：

SFTP（编辑 FTP 或 SFTP 服务器上的文件）

 下载：Sublime SFTP

Package Syncing

最后推荐一个同步插件，这个插件可以在不同的机器同步配置信息和插件，非常方便，但鉴于国内的墙太高，我都是直接把插件给手动备份了，然后直接拖进去，或者直接去github上下载对应的包。

其他：

Gits（集成 GitHub） 

下载：kemayo/sublime-text-git · GitHub

Clipboard-history（粘贴板历史记录） 

下载：kemayo/sublime-text-2-clipboard-history · GitHub

可以保存粘贴的历史，很赞的功能，再也不用担心历史丢失了。ctrl+alt+v可打开历史面板，上下选择即可，安装后会和默认的ctrl+shift+v（粘贴缩进）冲突，干掉这个快捷键。

SublimeLinter（代码错误提示） 

下载：SublimeLinter/SublimeLinter-for-ST2 at sublime-text-3 · GitHub

Tradsim（中文繁字体和简体字转换） 

下载：erinata/SublimeTradsim · GitHub

Terminal

可以sublime中，打开命令行，非常方便哦。

AllAutocomplete

自动完成插件，可在全部打开的文件中，自动完成。

HexViewer

提供十六进制文件查看功能。

MultiEditUtils

扩展多行编辑的功能。

IMESupport（输入框不更随着光标）

六、主题（Themes）

Sublime Text有大量第三方主题：theme - Labels

1、Flatland

Theme – Soda

完美的编码主题，用过的都说好，Setting user里面添加”theme”: “SodaDark.sublime-theme”

配色（Color）

colorsublime包含了大量SublimeText配色方案，并支持在线预览，配色方案的安装教程在这里，恕不赘述。我个人使用的是Nexus主题和Flatland Dark配色，配置如下：

"theme":"Nexus.sublime-theme",

"color_scheme": "Packages/Theme -Flatland/Flatland Dark.tmTheme",

效果如下：

七、最后购买：

Sublime Text2或者3都没关系，3也只是作为2的beta版本，所以还是推荐3吧，支持新版嘛。2和3在使用方法功能上也有差异~

你可以去官网下载对应版本，但可能需要输入序列号什么的。访问Sublime Text下载 2.x 版本。或从Sublime Text下载 3.x 版本。

注册码（仅供个人非商业应用）：

 
 

----- BEGINLICENSE ------

Alexander

Single UserLicense

EA7E-814345

51F47F094EAB1285 7827EFF0 8B1207DC

A76A6EA3E1A1CA7A DC1F2703 14,897,784

8EDC1C823F2A58B9 1C0C8B24 67686432

281245B36233DE5C ADC5C2F9 61FB8A04

171B63EF86BA423F 6AC884FD 3273A7AA

5F50A6DBCE7859AE D62D2B37 AEEDD8C2

078A8A2070EEA791 84F48C1E 8ABA7DEB

0B3907C0C9A3523B 0091A045 6F67AED8

------ ENDLICENSE ------

----- BEGINLICENSE -----

AndrewWeber

Single UserLicense

EA7E-855605

813A03DD5E4AD9E6 6C0EEB94 BC99798F

942194A602396E98 E62C9979 4BB979FE

91424C9DA45400BF F6747D88 2FB88078

90F5CC941CDC92DC 8457107A F151657B

1D22E383A997F016 42397640 33F41CFC

E1D0AE85A0BBD039 0E9C8D55 E1B89D5D

5CDB7036E56DE1C0 EFCC0840 650CD3A6

B98FC99C8FAC73EE D2B95564 DF450523

------ ENDLICENSE ------

 
 

八、汉化：

可以网上找些中文包放进去就行了。

Sublime Text 全程指南：Sublime Text 全程指南

延伸阅读（Further Reading）

书籍（Books）

Mastering Sublime Text：我读过的唯一一本关于Sublime Text的书籍，书中介绍的插件很实用，但对编辑技巧介绍不全。

Instant Sublime Text Starter：另外一本关于Sublime Text的书，我没有读过。

链接（Links）

官方文档：Sublime Text 3 Documentation

官方论坛：Sublime Forum • Index page

Stack Overflow的SublimeText频道：

https://stackoverflow.com/questions/tagged/sublimetext

Newest 'sublimetext2' Questions

Newest 'sublimetext3' Questions

非官方文档：Table of Contents 甚至比官方文档还要全面！

Package Control：Package Control 大量的Sublime Text插件和主题。