SublimeText3系列（1）-安装、设置、快捷键、常用插件

工欲善其事，必先利其器！
对于程序猿们来说，一个方便、快捷、跨平台的代码编辑器能够大大提高工作效率。
在前端开发中，SublimeText是使用较为广泛的编辑器。小伙伴们目前使用的版本主要为SublimeText2与SublimeText3。SublimeText2我们不提，文中针对的版本是SublimeText3，使用的是Windows版本。

1.SublimeText3的安装

可到SublimeText的官方网站下载安装包，有Mac OSX、Ubuntu、与Windows版本。各个系统版本安装都不困难，Windows版本的安装与其他软件安装差不多，自己选好安装目录，“下一步”就OK！
这里有个小技巧，在安装好SublimeText3后，先不捉急打开Sublime程序，先在安装目录下新建一个Data文件夹，这样之后安装的插件就会放在Data文件夹中，而不是放在默认的%APPDATA%/SublimeText3/Packages中。这样以后我们换机器、重装系统只需要把SublimeText3安装目录的文件直接Copy就可以，避免了重复安装配置。

2.常用设置

SublimeText3的默认设置也可以，不过自己配置下，可以让自己的眼睛舒服一点，下面是我的配置，大家可以参考。打开Preference->Setting-User可以进行用户自定义设置

{
  "ignored_packages":
  [
    "Vintage"
  ],
  // 设置字体
  /*"font_face": "Microsoft Yahei",*/
  "font_size": 16,
  // 使光标闪动更加柔和
  "caret_style": "phase",
  // 高亮当前行
  "highlight_line": true,
  // 高亮有修改的标签
  "highlight_modified_tabs": true,
  // 焦点丢失后自动保存
  "save_on_focus_lost": true,
  // 显示当前文件的编码
  "show_encoding": true,
  // 设置tab键的大小
  "tab_size": 2,
  // tab转换为空格
  "translate_tabs_to_spaces": true,
  // 保存的时候把无用的空格去掉
  "trim_trailing_white_space_on_save": true,
  // 自动换行
  "word_wrap": false,
  // 拼写检查
  "spell_check": false,
  // 要不要滚过头
  "scroll_past_end": true,
  // 加粗文件夹名称
  "bold_folder_labels": true,
  // 宽度指导线
  "rulers": [80],
  // 显示全路径
  "show_full_path": true,
  //禁用 Emmet 的 tab 键功能（请使用 ctrl+e）
  "disable_tab_abbreviations": true
}

3.SublimeText3常用快捷键

Ctrl+D 选词 （反复按快捷键，即可继续向下同时选中下一个相同的文本进行同时编辑）
Ctrl+G 跳转到相应的行
Ctrl+J 合并行（已选择需要合并的多行时）
Ctrl+L 选择整行（按住-继续选择下行）
Ctrl+M 光标移动至括号内开始或结束的位置
Ctrl+T 词互换
Ctrl+U 软撤销
Ctrl+P 查找当前项目中的文件和快速搜索；输入 @ 查找文件主标题/函数；或者输入 : 跳转到文件某行；
Ctrl+R 快速列出/跳转到某个函数
Ctrl+K Backspace 从光标处删除至行首
Ctrl+K+B 开启/关闭侧边栏
Ctrl+KK 从光标处删除至行尾
Ctrl+K+T 折叠属性
Ctrl+K+U 改为大写
Ctrl+K+L 改为小写
Ctrl+K+0 展开所有
Ctrl+Enter 插入行后（快速换行）
Ctrl+Tab 当前窗口中的标签页切换

Ctrl+Shift+A 选择光标位置父标签对儿
Ctrl+Shift+D 复制光标所在整行，插入在该行之前
ctrl+shift+F 在文件夹内查找，与普通编辑器不同的地方是sublime允许添加多个文件夹进行查找
Ctrl+Shift+K 删除整行
Ctrl+Shift+L 鼠标选中多行（按下快捷键），即可同时编辑这些行
Ctrl+Shift+M 选择括号内的内容（按住-继续选择父括号）
Ctrl+Shift+P 打开命令面板
Ctrl+Shift+/ 注释已选择内容
Ctrl+Shift+↑可以移动此行代码，与上行互换
Ctrl+Shift+↓可以移动此行代码，与下行互换
Ctrl+Shift+[ 折叠代码
Ctrl+Shift+] 展开代码
Ctrl+Shift+Enter 光标前插入行

Ctrl+PageDown 、Ctrl+PageUp 文件按开启的前后顺序切换

Ctrl+Z 撤销
Ctrl+Y 恢复撤销
Ctrl+F2 设置/取消书签
Ctrl+/ 注释整行（如已选择内容，同“Ctrl+Shift+/”效果）
Ctrl+鼠标左键 可以同时选择要编辑的多处文本

Shift+鼠标右键（或使用鼠标中键）可以用鼠标进行竖向多行选择
Shift+F2 上一个书签
Shift+Tab 去除缩进
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+Shift+分屏序号 将当前焦点页分配到分屏序号页

Alt+. 闭合当前标签
Alt+F3 选中文本按下快捷键，即可一次性选择全部的相同文本进行同时编辑

Tab 缩进 自动完成
F2 下一个书签
F6 检测语法错误
F9 行排序(按a-z)
F11 全屏模式

4.SublimeText3插件

各种插件都可以到Package Control上去搜索

4.1 管理插件的插件PackageControl

第一个要安装的插件就是Package Control，这是一个管理SublimeText3的插件，有了它，安装、更新、删除其他插件都变得简单。
安装方法PackageControl网站已经给出，大家可以戳这里
其实就是使用Ctrl+`快捷键打开SublimeText3的命令行窗口，然后复制下面的代码，回车即可。

import urllib.request,os,hashlib; h = '2915d1851351e5ee549c20394736b442' + '8bc59f460fa1548d1514676163dafc88'; pf = 'Package Control.sublime-package'; ipp = sublime.installed_packages_path(); urllib.request.install_opener( urllib.request.build_opener( urllib.request.ProxyHandler()) ); by = urllib.request.urlopen( 'http://packagecontrol.io/' + pf.replace(' ', '%20')).read(); dh = hashlib.sha256(by).hexdigest(); print('Error validating download (got %s instead of %s), please try manual install' % (dh, h)) if dh != h else open(os.path.join( ipp, pf), 'wb' ).write(by)

PackageControl可能会出问题，大家可以参考这里的解决办法。

4.2 侧边栏增强工具SideBarEnhancements

SublimeText3的侧边栏原始功能是比较少的，右键菜单只有新建，删除，重命名几个基本的功能，SideBarEnhancements增加了“放入回收站”，“浏览器打开”等实用功能。
可使用Ctrl+Shift+P打开命令面板，输入Install Package使用PackageControl进行安装。

SideBarEnhancements插件可以自定义快捷键打开浏览器预览页面，免去了自己去文件目录打开浏览器测试的麻烦，这个功能太好太强大~~~这里要感谢 jeffjade童靴的分享
可通过preferences->package setting->side bar->Key Bindings-User，键入以下代码：

[   
    { "keys": ["ctrl+shift+c"], "command": "copy_path" },
    //chrome
    { "keys": ["f2"], "command": "side_bar_files_open_with",
            "args": {
                "paths": [],
                "application": "C:\\Users\\jeffj\\AppData\\Local\\Google\\Chrome\\Application\\chrome.exe",
                "extensions":".*"
            }
     }
]

这里设置按Ctrl+Shift+C复制文件路径，按F2即可在Chrome浏览器预览效果(如果需要的话，也可以根据自己的需要为Firefox，Safari，IE，Opera等加上)，当然你也可以自己定义喜欢的快捷键，最后注意代码中的浏览器路径要以自己电脑里的文件路径为准。

4.3 ZenCoding语法支持Emmet

安装同上使用PackageControl进行安装。Emmet使用CSS的语法简化了HTML/CSS代码的编写，是猿类提高效率的好朋友。
Emmet的完整语法可以参考这里

4.4 括号高亮工具BracketLighter

安装同上使用PackageControl进行安装。
对括号、html标签进行高亮显示。

4.5 颜色显示工具Color Highlighter

安装同上使用PackageControl进行安装。
对颜色代码进行高亮显示。

4.6 颜色拾取Color Picker

安装同上使用PackageControl进行安装。
安装后，使用快捷键Ctrl+Shift+C可以调出取色板

有了上面的设置和插件，基本SublimeText已经可以玩的起来了，插件这东西少了不方便，多了机子卡，其实得不偿失。
后面文章会介绍一些其他的插件