sublime text3配置方法、插件推荐及使用技巧

Sublime Text作为一个尽为人知的代码编辑器，其优点不用赘述。界面整洁美观、文本功能强大，且运行速度极快，非常适合编写代码，写文章做笔记。

下面简要说下sublime text3 的一些基本配置及插件

一、package control安装包配置

1、通过快捷键 ctrl+` 或者 View > Show Console 菜单打开控制台

2、粘贴对应版本的代码后回车安装

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())

安装后弹出如下提示

3、重启sublime text3

重启后在preferences下出现PackageControl选项

4、选择Install Package 即可调出安装插件的搜索面板，可选择需要安装的插件enter后系统自动安装，安装完成后重启sublime后生效。

另外，如果通过外部下载的包（如github上），打开Preferences-BrowsePackage将下载下来的包解压后的文件夹放在该目录下重启sublime即可。

二、安装soda主题

Soda主题是sublime上一款很著名的清爽型主题，在install package中搜索

安装后打开Preferences -> Settings-User，默认：

{
"ignored_packages":
[
"Vintage"
]
}

添加"theme": "Soda Light3.sublime-theme",

{
"theme": "Soda Light 3.sublime-theme",
"ignored_packages":
[
"Vintage"
]
}

保存后主题立马更改为soda light

另外还可以在此处配置一些其他内容，网上有人推荐如下配置(部分配置需安装对应插件才能生效)：

{
　　"theme": "Soda Light 3.sublime-theme",
　　"color_scheme": "Packages/Color Scheme - Default/Mac Classic.tmTheme",
　　"font_size": 11,
　　"ignored_packages":
　　[
　　"Vintage"
　　],
　　"show_encoding": true,
　　"soda_classic_tabs": true,
　　"soda_folder_icons": true,
　　"highlight_line": true, 　　   // 高亮显示当前行
　　"fade_fold_buttons": false,   // 代码折叠按钮一直显示
　　"show_encoding": true, 　　 // 显示当前文件的编码
　　"bold_folder_labels": true,   // 加粗文件夹名称
　　"highlight_modified_tabs": true,　　　　　　// 着重标示修改过的文件
　　"trim_trailing_white_space_on_save": true, // 保存时去掉行尾无用空格
　　"show_full_path": true, 　　　　　　　　　　// 显示全路径,默认
　　// "show_line_endings": true,
　　// "draw_white_space": "all", 　　　　　　　// 显示所有空格，"none"|"selection"|"all"
　　// "sublime_enhanced_keybindings": true, // 转到上一次编辑的地方
　　// "word_wrap": true, 　　　　　　　　　　 // 文字根据屏幕大小自动换行，防止水平滚动 true | false | "auto"
　　// "save_on_focus_lost": true, 　　　　　　 // 焦点丢失后自动保存
}

三 配置高亮色彩

1. 在Sublime Text中用package control安装BracketHighlighter；

2. 安装完成后，打开Preferences-> package settings -> Bracket Highlighter -> Bracket Settings – User，然后添加如下代码：

{
"bracket_styles": {
"default": {
"icon": "dot",
// "color": "entity.name.class",
"color": "brackethighlighter.default",
"style": "highlight"
},

"unmatched": {
"icon": "question",
"color": "brackethighlighter.unmatched",
"style": "highlight"
},
"curly": {
"icon": "curly_bracket",
"color": "brackethighlighter.curly",
"style": "highlight"
},
"round": {
"icon": "round_bracket",
"color": "brackethighlighter.round",
"style": "highlight"
},
"square": {
"icon": "square_bracket",
"color": "brackethighlighter.square",
"style": "highlight"
},
"angle": {
"icon": "angle_bracket",
"color": "brackethighlighter.angle",
"style": "highlight"
},
"tag": {
"icon": "tag",
"color": "brackethighlighter.tag",
"style": "highlight"
},
"single_quote": {
"icon": "single_quote",
"color": "brackethighlighter.quote",
"style": "highlight"
},
"double_quote": {
"icon": "double_quote",
"color": "brackethighlighter.quote",
"style": "highlight"
},
"regex": {
"icon": "regex",
"color": "brackethighlighter.quote",
"style": "outline"
}
}

}

3. 找到Sublime text3安装目录下的Packages中的Color Scheme – Default.sublime-package

默认路径：C:\Program Files\Sublime Text 3\Packages\Color Scheme – Default.sublime-package

添加后缀名Color Scheme – Default.sublime-package.zip，双击此zip文件（注意不要解压），在压缩包软件内找到Monokai.tmTheme（颜色主题），选择编辑器进行修改



4.　　Monokai.tmTheme中添加如下代码：，和里面的dic标签t并列排即可。

<dict>
<key>name</key>
<string>Bracket Default</string>
<key>scope</key>
<string>brackethighlighter.default</string>
<key>settings</key>
<dict>
<key>foreground</key>
<string>#FFFFFF</string>
<key>background</key>
<string>#A6E22E</string>
</dict>
</dict>

<dict>
<key>name</key>
<string>Bracket Unmatched</string>
<key>scope</key>
<string>brackethighlighter.unmatched</string>
<key>settings</key>
<dict>
<key>foreground</key>
<string>#FFFFFF</string>
<key>background</key>
<string>#FF0000</string>
</dict>
</dict>

<dict>
<key>name</key>
<string>Bracket Curly</string>
<key>scope</key>
<string>brackethighlighter.curly</string>
<key>settings</key>
<dict>
<key>foreground</key>
<string>#FF00FF</string>
</dict>
</dict>

<dict>
<key>name</key>
<string>Bracket Round</string>
<key>scope</key>
<string>brackethighlighter.round</string>
<key>settings</key>
<dict>
<key>foreground</key>
<string>#E7FF04</string>
</dict>
</dict>

<dict>
<key>name</key>
<string>Bracket Square</string>
<key>scope</key>
<string>brackethighlighter.square</string>
<key>settings</key>
<dict>
<key>foreground</key>
<string>#FE4800</string>
</dict>
</dict>

<dict>
<key>name</key>
<string>Bracket Angle</string>
<key>scope</key>
<string>brackethighlighter.angle</string>
<key>settings</key>
<dict>
<key>foreground</key>
<string>#02F78E</string>
</dict>
</dict>

<dict>
<key>name</key>
<string>Bracket Tag</string>
<key>scope</key>
<string>brackethighlighter.tag</string>
<key>settings</key>
<dict>
<key>foreground</key>
<string>#FFFFFF</string>
<key>background</key>
<string>#0080FF</string>
</dict>
</dict>

<dict>
<key>name</key>
<string>Bracket Quote</string>
<key>scope</key>
<string>brackethighlighter.quote</string>
<key>settings</key>
<dict>
<key>foreground</key>
<string>#56FF00</string>
</dict>
</dict>

5. 然后再降修改完成的文件放到压缩包Color Scheme – Default.sublime-package.zip里边，最后改名Color Scheme – Default.sublime-package放回C:\Program Files\Sublime Text 3\Packages中；

效果图 ：

四、sublime插件推荐

1.Soda Theme

Sublime Text 3中较为常用的一款自定义编辑器主题，用过的人都说好。Soda Theme包含代码着色、标签、图标，拥有light和dark两种颜色主题便于用户在不同时间段使用。

Github：https://github.com/buymeasoda/soda-theme/



1.   2.Sublime APICloud Plugins

Sublime APICloud Plugins是APICloud为开发者提供的一套开源的Sublime Text扩展插件，包括：应用管理、应用框架、页面模板、代码提示、代码管理、Widget打包、真机同步、日志输出、管理自定义AppLoader等功能，其他的功能插件也在不断增加，这些插件已被Package Control成功收录，开发者可以直接在Sublime Text3中下载安装；所有插件都已开源，开发者也可以在此基础上按需求扩展自己的插件。

插件下载：http://www.apicloud.com/devtools



3.ColorPicker

编辑CSS样式的时候， ColorPicker调色盘不仅可以查看颜色值，更可以轻松调好颜色。ColorPicker同时还是一个双向选择颜色的功能，既可以在调色板中选好颜色将其使用至文档中，也可以迅速定位文档中的某一种颜色值到调色板中。

插件下载：https://github.com/weslly/ColorPicker



4.Emmet

Emmet （前身是 Zen Coding）是一个前端开发不可缺少的插件，它让编写 HTML和CSS代码变得简单，节省大量时间。Emmet可使开发者用缩写形式书写代码，再用“扩展”功能自动将代码扩展至完整样式。

早在2009年，Zen Coding作为具有革命性的HTML和CSS代码编辑插件一经问世，直到现在帮助了无数的开发者，减少他们的时间，使得编写代码变得简便有趣。现在，Emmet已经超越了Zen Coding到达了更高层次，普适性的功能将给更多的开发者带来便利。

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



5.SublimeCodeIntel

SublimeCodeIntel 作为一个代码提示和补全插件，支持 JavaScript、Mason、XBL、XUL、RHTML、SCSS、Python、HTML、Ruby、Python3、XML、Sass、XSLT、Django、HTML5、Perl、CSS、Twig、Less、Smarty、Node.js、Tcl、TemplateToolkit 和 PHP 等所有语言，是 Sublime Text 自带代码提示功能基础上一个更好的扩展，自带代码提示功能只可提示系统代码，而SublimeCodeIntel则可以提示用户自定义代码。SublimeCodeIntel支持跳转到变量、函数定义的功能，另外还有自动补全的功能，十分方便。

插件下载：https://github.com/SublimeCodeIntel/SublimeCodeIntel



1.   6.FileDiffs

FileDiffs插件可以让开发者比较两个不同文件的差异，比较的对象包括当前文件、另一文件、剪切板中的代码甚至未保存文件等。

插件下载：https://github.com/colinta/SublimeFileDiffs



1.   7.SublimeLinter

SublimeLinter是少数几个能在sublime text 3工作的代码检查插件，SublimeLinter支持JavaScript、CSS、HTML、Java、PHP、Python、Ruby等十多种开发语言，但前提是需要配置相应语言的环境，要检查JavaScript代码需要安装node.js，检查PHP代码需要安装PHP并配置环境等。SublimeLinter可以及时提示编写代码中存在的不规范和错误的写法，并培养我们良好的编码习惯和风格。

插件下载：https://github.com/SublimeLinter/SublimeLinter/tree/sublime-text-3



1.   8.Alignment

Aligment插件让开发者自动对齐代码，包括PHP、CSS、JavaScript语言。使得代码看起来更整齐美观，更具可读性。

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



Sublime Text 3中的插件种类繁复，功能强大，以上是开发者最常用的8大插件，希望给各位开发者节省插件选择的时间，提供编写代码的效率。

五、sublime快捷键

Sublime Text 3非常实用，但是想要用好，一些快捷键不可或缺，所以转了这个快捷键汇总。

用惯了vim，有些快捷键也懒得用了，尤其是在win下面，还有图形界面，所以个人觉得最有用的还是搜索类，对于阅读和修改代码来说，非常实用。

选择类

Ctrl+D 选中光标所占的文本，继续操作则会选中下一个相同的文本。
Alt+F3 选中文本按下快捷键，即可一次性选择全部的相同文本进行同时编辑。举个栗子：快速选中并更改所有相同的变量名、函数名等。
Ctrl+L 选中整行，继续操作则继续选择下一行，效果和 Shift+↓ 效果一样。
Ctrl+Shift+L 先选中多行，再按下快捷键，会在每行行尾插入光标，即可同时编辑这些行。
Ctrl+Shift+M 选择括号内的内容（继续选择父括号）。举个栗子：快速选中删除函数中的代码，重写函数体代码或重写括号内里的内容。
Ctrl+M 光标移动至括号内结束或开始的位置。
Ctrl+Enter 在下一行插入新行。举个栗子：即使光标不在行尾，也能快速向下插入一行。
Ctrl+Shift+Enter 在上一行插入新行。举个栗子：即使光标不在行首，也能快速向上插入一行。
Ctrl+Shift+[ 选中代码，按下快捷键，折叠代码。
Ctrl+Shift+] 选中代码，按下快捷键，展开代码。
Ctrl+K+0 展开所有折叠代码。
Ctrl+← 向左单位性地移动光标，快速移动光标。
Ctrl+→ 向右单位性地移动光标，快速移动光标。
shift+↑ 向上选中多行。
shift+↓ 向下选中多行。
Shift+← 向左选中文本。
Shift+→ 向右选中文本。
Ctrl+Shift+← 向左单位性地选中文本。
Ctrl+Shift+→ 向右单位性地选中文本。
Ctrl+Shift+↑ 将光标所在行和上一行代码互换（将光标所在行插入到上一行之前）。
Ctrl+Shift+↓ 将光标所在行和下一行代码互换（将光标所在行插入到下一行之后）。
Ctrl+Alt+↑ 向上添加多行光标，可同时编辑多行。
Ctrl+Alt+↓ 向下添加多行光标，可同时编辑多行。

编辑类

Ctrl+J 合并选中的多行代码为一行。举个栗子：将多行格式的CSS属性合并为一行。
Ctrl+Shift+D  复制光标所在整行，插入到下一行。
Tab 向右缩进。
Shift+Tab 向左缩进。
Ctrl+K+K 从光标处开始删除代码至行尾。
Ctrl+Shift+K 删除整行。
Ctrl+/ 注释单行。
Ctrl+Shift+/ 注释多行。
Ctrl+K+U 转换大写。
Ctrl+K+L 转换小写。
Ctrl+Z 撤销。
Ctrl+Y 恢复撤销。
Ctrl+U 软撤销，感觉和 Gtrl+Z 一样。
Ctrl+F2 设置书签
Ctrl+T 左右字母互换。
F6 单词检测拼写

搜索类

Ctrl+F 打开底部搜索框，查找关键字。
Ctrl+shift+F 在文件夹内查找，与普通编辑器不同的地方是sublime允许添加多个文件夹进行查找，略高端，未研究。
Ctrl+P 打开搜索框。举个栗子：1、输入当前项目中的文件名，快速搜索文件，2、输入@和关键字，查找文件中函数名，3、输入：和数字，跳转到文件中该行代码，4、输入#和关键字，查找变量名。
Ctrl+G 打开搜索框，自动带：，输入数字跳转到该行代码。举个栗子：在页面代码比较长的文件中快速定位。
Ctrl+R 打开搜索框，自动带@，输入关键字，查找文件中的函数名。举个栗子：在函数较多的页面快速查找某个函数。
Ctrl+： 打开搜索框，自动带#，输入关键字，查找文件中的变量名、属性名等。
Ctrl+Shift+P 打开命令框。场景栗子：打开命名框，输入关键字，调用sublime text或插件的功能，例如使用package安装插件。
Esc 退出光标多行选择，退出搜索框，命令框等。

显示类

Ctrl+Tab 按文件浏览过的顺序，切换当前窗口的标签页。
Ctrl+PageDown 向左切换当前窗口的标签页。
Ctrl+PageUp 向右切换当前窗口的标签页。
Alt+Shift+1 窗口分屏，恢复默认1屏（非小键盘的数字）
Alt+Shift+2 左右分屏-2列
Alt+Shift+3 左右分屏-3列
Alt+Shift+4 左右分屏-4列
Alt+Shift+5 等分4屏
Alt+Shift+8 垂直分屏-2屏
Alt+Shift+9 垂直分屏-3屏
Ctrl+K+B 开启/关闭侧边栏。
F11 全屏模式
Shift+F11 免打扰模式