对于前端开发来说，推荐使用JetBrains WebStorm编辑器（简直是神器）或者vim（超级神器），但是有时我们写个小demo时可以考虑使用Sublime Text，毕竟JetBrains WebStorm有时打开太慢了而且挺占内存的。我之前装的是Sublime Text2，今天装了Sublime Text3，把相关的知识整理了下，适合新手看。非新手可以直接看第四部分------ 四、插件推荐 （里面是我精心挑选的插件）看有你需要的插件不，或者您可以留言推荐其他好的插件。：-）
一、Sublime Text 3 注册码
（盗版有罪，大家有钱后记得答谢原作者）
1、Sublime Text 3 3126 注册码
2、 https://fatesinger.com/78705
二、包管理器安装方法
打开sublime text 3，按ctrl+~
或者菜单View > Show Console
打开命令窗口，粘贴这个网站中的代码并回车即可。
三、安装插件
1、快捷键 Ctrl+Shift+P（菜单 – Tools – Command Paletter），输入 install 选中Install Package并回车；
2、输入或选择你需要的插件回车就安装了（注意左下角的小文字变化，会提示安装成功）。
四、插件推荐
1、Browser Refresh 将写好的代码通过打开浏览器预览
有一点需要注意的是安装完该插件后，点击如下图红色方框所圈出的地方后
在里面输入
[
{ "keys": ["ctrl+shift+enter"], "command": "open_in_browser" }
]
以后就可以直接ctrl+shift+enter预览写好的代码了。
2016年12月16日补充：上述功能也可使用更强大的SideBarEnhancements（侧边栏增强工具）进行实现。
2、HTML-CSS-JSPrettify 格式化代码
具体介绍可看这里：使用SublimeText3的HTML-CSS-JSPrettify插件格式化代码
不过在这里补充一点就是格式化代码可使用快捷键ctrl+shift+H，不需要像文章中介绍的那么麻烦；
3、Better Completion
javascript ,jQuery , Bootstrap 等js库的自动补全。该插件的特点就是可以自定义配置需要自动补全的库。安装完以后它的配置文件可以配置自己需要补全的库；
官网说明：https://github.com/facelessuser/BracketHighlighter
这里提醒下，安装完后需打开用户自定义设置（见下图红色圆圈圈出的部分）并粘贴
如下代码:
{
// --------------------
// sublime-better-completions-Package (sbc package)
// --------------------
// API files is contains the *keyword* such as `html`, `jquery`, `myglossary` with lowercase as filename `sbc-api-${filename}.sublime-settings` place in `/packages/User/` (your own) or `/packages/${this-package}/sublime-completions/` (package build-in).
// After you enable, disable or added new your own completions, you might need restart your Sublime Text Editor.
//
// Your own setting file `sbc-setting.sublime-settings` need to place in `/packages/User/` and contains all your api setting property that you want to enable.
//
// --------------------
// APIs Setup
// --------------------
// `true` means enable it.
// `false` means disable it.
"completion_active_list": {
// build-in completions
"css-properties": false,
"gruntjs-plugins": false,
"html": false,
"lodash": false,
"javascript": true,
"jquery": true,
"jquery-sq": true, // Single Quote
"php": false,
"phpci": false,
"sql": false,
"twitter-bootstrap": false,
"twitter-bootstrap-less-variables": false,
"twitter-bootstrap3": false,
"twitter-bootstrap3-sass-variables": false,
"underscorejs": false,
"react": false,
// Your own completions?
// ~/Library/Application\ Support/Sublime\ Text\ 3/Packages/User/sbc-api-my-angularjs.sublime-settings
"my-angularjs": false,
// ~/Library/Application\ Support/Sublime\ Text\ 3/Packages/User/sbc-api-my-glossary.sublime-settings
"my-glossary": false,
// ~/Library/Application\ Support/Sublime\ Text\ 3/Packages/User/sbc-api-my-html.sublime-settings
"my-html": false,
// ~/Library/Application\ Support/Sublime\ Text\ 3/Packages/User/sbc-api-my-javascript.sublime-settings
"my-javascript": false
}
}
上面如果你觉得用的到，可以将对应的false改成true；
4、BracketHighlighter 高亮显示[], (), {}, "", '', #!xml <tag></tag>甚至是自定义的字符，方便查找；
官方地址：https://github.com/facelessuser/BracketHighlighter
官方文档：http://facelessuser.github.io/BracketHighlighter/
另外这个插件我安装几次都失败了，刚开始报 pygments' is not currently installed错误，后来又安装几次发现 pygments又安装成功了，但又 报Unable to download python-markdown错误；这个应该是网络不好，大家可以开代理进行安装下载；我后来重新安装几次又好了。
5、AutoFileName
快捷输入文件名，文件路径自动提示的。自动完成文件名的输入，如图片选取，输入”/”即可看到相对于本项目文件夹的其他文件
6、SublimeLinter 代码校验工具
具体可看这篇文章：代码校验工具 SublimeLinter 的安装与使用
里面介绍了javascript语法检查SublimeLinter-jshint及css语法检查 SublimeLinter-csslint；
7、Emmet 必备的神器插件
输入“!”或“html:5”，然后按Tab键便可自动生成模版；
输入h1{foo}和a[href=#]，就可以自动生成上述代码；
大家具体可看这篇文章：Emmet：HTML/CSS代码快速编写神器
8、sublimeCodeIntel 代码自动补全
直接安装即可(我的直接安装重启即可使用)，如正常安装后还是使用不了可以参考只针对sublimecodeintel安装好之后不能正常完成补全的问题
9、livereload 解放F5(刷新)的开发工具
具体可见这篇文章： LiveReload一款解放F5的开发工具
以前我在这篇文章中提到过browser-sync也能实现该功能（它其实不光只有实时刷新功能，还有BrowserSync会在多个浏览器中同步滚动条位置，表单行为和点击事件功能具体见BrowserSync，迅捷从免F5开始），但是感觉它太麻烦了，需要打开node，当然有其他更好的单独软件（ 【F5】 Web开发免刷新）可以实现实时刷新的功能（F5使用示范）；
10、livestyle sublime text3和chrome双向实时编辑预览CSS
具体可见sublime text3和chrome双向实时编辑预览CSS
当然使用chrome的Workspace也能够实现该功能，具体见：使用chrome的Workspace实现js、css文件调试即时保存
**本文版权归本人即简书笔名：该账户已被查封 所有，如需转载请注明出处。谢谢！ *
