作者简介：
Jaked
8年前端工作经验，
主要分享：职业发展方面、前端技术、面试技巧等。
公众号:超哥前端小栈
掘金：https://juejin.im/user/5a5d4522518825732b19d364/posts
今天为大家分享一款我用了很久的编辑器：sublime text 3。它的轻便和高度可定制化，是我觉得最棒的地方。本文会涉及到 sublime text 3 的方方面面，方便自己的同时，也希望能帮到你。
安装与初始化
首先，可以在 官网 下载最新版的安装文件。选择对应的平台，我用的是 mac 版，最新的安装包也才 15.2 M，真的很轻量了。
安装完成后的第一件事，就是按照自己的习惯进行定制啦~
打开 Preferences->Setting，会分屏显示目前的配置。左侧为 Setting-Default 的系统默认配置，不需要动它。一般我们会在右侧的 Setting-User 中添加定制化的配置，我的配置表如下：
{ // 默认使用Unix换行符，统一风格 "default_line_ending": "unix", // 编写代码时，右侧的代码地图的可视区域部分是否加上边框 "draw_minimap_border": true, "font_face": "monaco", // 显示的字体大小 "font_size": 14, // 突出显示当前光标所在的行 "highlight_line": true, "line_padding_bottom": 1, // 设置每一行到顶部，以像素为单位的间距，效果相当于行距 "line_padding_top": 1, "tab_size": 4, // 使用空格填充 tab 键 "translate_tabs_to_spaces": true, // 保存文件时会删除每行结束后多余的空格 "trim_trailing_white_space_on_save": true, // 关闭自动更新检查 "update_check": false, // 自动换行 "word_wrap": "true"}
快捷键
快捷键的熟练使用，可以提高你的编码效率。sublime 的快捷键有很多，下面列举的这些常用的快捷键，希望能给还不太熟悉的童鞋一些帮助。
image
插件
想要优雅地使用 sublime，插件则是不可缺少的存在。强大的插件功能，造就了它无与伦比的扩展性。
在安装插件之前，首先需要安装 Package Control 组件（它本身也是个插件哦~）。
点击 sublime 的菜单栏 view->show console，打开控制台，然后运行以下代码：
import urllib.request,os; pf = 'Package Control.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( 'http://sublime.wbond.net/' + pf.replace(' ','%20')).read())
等待几秒钟后，如果能在下图中看到 Package Control，就表示安装成功了。
image
安装插件也十分简单，点开上图的 Package Control，直接搜索你想安装的包即可。
image
接下来，会列举一些非常实用的插件，并简单介绍其各自的使用场景。
Material-Theme
个人比较喜欢的主题，本文的截图用的正是这个主题。
用法：下载成功后，只需要修改 Preferences->Setting 的 Setting-User，引入主题。具体配置如下：
{ // 引入下载的主题包 "color_scheme": "Packages/Material Theme/schemes/Material-Theme.tmTheme", // 设置主题 "theme": "Material-Theme.sublime-theme", // 用来将已修改的代码的标签高亮 "highlight_modified_tabs": true, "ignored_packages": [ "Vintage" ], ...}
babel
用于 react 的语法高亮。
安装后，打开 .js, .jsx 后缀的文件，打开菜单 view， Syntax -> Open all with current extension as... -> Babel -> JavaScript (Babel)，选择 babel 为默认 javascript 打开 syntax。
SCSS
支持 sass 语法提示。
相比于 SASS，SCSS 更适合 .scss 的语法支持。因为 SASS 在某些情况下会被其他的插件影响而导致语法提示失效，这时可以引入另一个插件 Syntax Highlighting for Sass，来解决这个问题。
但如果直接用 SCSS，则不会出现这个问题。
html5
支持hmtl5规范的插件包。
使用方法：新建 html 文档 > 输入 html5 > 敲击 tab 键 > 自动补全 html5 规范文档。
git 和 git blame
安装 git 可以在底部状态栏显示当前文件的 git 状态。
而 git blame 则用于查看 git 记录。很赞的一点是，它可以查看每一行代码在 git 上的记录，包括 提交人、提交时间以及标识。
docblockr
快速帮你为代码建立文档。它会解析函数，变量，和参数，根据它们自动生成文档，你只需要去填充对应的说明即可。
用法：'/**' 快捷键能快速生成函数注释。
EditorConfig
控制代码的缩进等的代码规范插件。
安装好之后，在工程中创建文件.editorConfig，例如：
# editorconfig.orgroot = true[*]indent_style = spaceindent_size = 4end_of_line = lfcharset = utf-8trim_trailing_whitespace = trueinsert_final_newline = true[*.md]trim_trailing_whitespace = false
Bracket Highlighter
可匹配 []、()、{}、""、''、<tag></tag>，高亮标记，便于查看起始和结束标记。
SideBarEnhancements
增强 sublime 的右键功能，包括拷贝、粘贴、删除、重命名等。
AutoFileName
可以自动补全文件名，如图片选取。比如：输入 "/" 即可看到相对于本项目文件夹的其他文件。
ConvertToUTF8
将文件转码成 UTF-8。用于编辑并保存目前编码不被 Sublime Text 支持的文件，特别是中日韩用户使用的 GB2312，GBK，BIG5，EUC-KR，EUC-JP ，ANSI等。安装插件后自动转换为 UTF-8 格式。
GBK Support
可识别 UTF-8 格式的中文，不识别 GBK 和 ANSI，因此打开很多含中文的文档都会出现乱码。可以通过安装插件 GBK Support，来识别 GBK 和 ANSI。
用法：打开一个 GBK 的文件，直接用 GBK encoding 模式另存为即可。
FileDiffs
强大的比较代码不同工具。用于比较当前文件与选中的代码、剪切板中代码、另一文件、未保存文件之间的差别。可配置为显示差别在外部比较工具，精确到行。
用法：右键标签页，出现 FileDiffs Menu 或者 Diff with Tab… 选择对应文件比较即可。
下载插件被“墙”？
sublime text 3 很好用，但也会有些小问题。比如，国内用户在使用 sublime 下载插件时，可能会出现 There are no packages available for installation 的问题。
这个问题出现的原因很简单，就是获取 Sublime Text 3 的网络地址被“墙”了。
对于有梯子的童鞋，很容易解决。但对于更多的翻不了墙的童鞋，为了给予方便，我找了一种解决方案。说白了也简单，就是使用别人能够访问的地址就行了呗，比如 github。
https://raw.githubusercontent.com/SuCicada/channel_v3.json/master/channel_v3.json
该如何使用呢？
在 "Preferences -> Package Settings -> Package Control -> Settings User" 中新添加一个项 "channels"。
"channels":[ "https://raw.githubusercontent.com/SuCicada/channel_v3.json/master/channel_v3.json" ],
然后，快去下载插件试试吧~
作者简介：
Jaked
8年前端工作经验，
主要分享：职业发展方面、前端技术、面试技巧等。
公众号:超哥前端小栈
掘金：https://juejin.im/user/5a5d4522518825732b19d364/posts
本文已经获得Jaked老师授权转发，其他人若有兴趣转载，请直接联系作者授权。
网友评论