Sublime Text 2 快捷键 插件配置

一、前言之前

从设计到前端，有过一段时间是懵懵懂懂的状态，缺乏对整个职业更加深入的了解。后来混迹于各个前端大牛的博客，在各个QQ群里聆听各路大神的经验之谈，坚定了前端之路的信心。一直收藏各类精华的帖子和网址，分门别类；关注很多知名网站和各路大神的博客，时刻感觉到要了解的东西太多，要学习的东西太多。越是深入，越是觉得自己欠缺的东西很多，却总是静不下心，手头上的东西也看不进去，这状态不行，得改变，静心看书，将高程和语言精粹多看几遍，多练习，试着写笔记，不求进步神速，只求一步一个脚印，养成良好习惯，一点一点积累，向大牛靠拢。

二、前言

说到前端开发，有个合适的工具很重要，工欲善其事必先利其器。editplus、notepad++都是不错的工具，体积轻巧，启动迅速，但是插件功能太少；dw太大。sublime text将是一个不错的选择，将各类的插件配置完毕后，你会发现原来编辑器也可以如此的性感妖娆，不少前端er纷纷抛弃用了数年的“伙伴”，投入了她的怀抱。ST2不是免费的，但可以永久免费使用，只是在保存的时候，偶尔会弹出要你购买注册的对话框。官网地址：http://www.sublimetext.com/2

三、界面功能

这是安装了插件后的界面，黑色大气美观，代码高亮功能非常性感，写js的时候，感觉最为深刻。

三、设置

界面上各种功能区域就不一一详细介绍了，下面介绍重点的DIY和快捷键

第一个是用户设置，第二个用户快捷方式设置，不要在default中设置，免得更新后丢失。

{
    "detect_slow_plugins": false,
    "font_size": 13,
    "highlight_line": true,
    "ignored_packages": "Vintage",
    "line_padding_bottom": 1,
    "line_padding_top": 1,
    "margin": 4,
    "tab_size": 2,
    "update_check": false,
    "word_wrap": true
}

将配置代码复制进去，具体的数值可以根据需要修改

打开第二个文件，里面设置各种自定义的快捷方式

各类强大的快捷方式：

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

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

Ctrl+Shift+K 删除整行

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

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

Ctrl+KU 改为大写

Ctrl+KL 改为小写

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

Ctrl+M 光标移动至括号内开始或结束的位置

Ctrl+Shift+M 选择括号内的内容（按住-继续选择父括号）

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

Ctrl+Shift+/ 注释已选择内容

Ctrl+Z 撤销

Ctrl+Y 恢复撤销

Ctrl+M 光标跳至对应的括号

Alt+. 闭合当前标签

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

Ctrl+Shift+[ 折叠代码

Ctrl+Shift+] 展开代码

Ctrl+KT 折叠属性

Ctrl+K0 展开所有

Ctrl+U 软撤销

Ctrl+T 词互换

Tab 缩进 自动完成

Shift+Tab 去除缩进

Ctrl+Shift+↑ 与上行互换

Ctrl+Shift+↓ 与下行互换

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

Ctrl+Enter 光标后插入行

Ctrl+Shift+Enter 光标前插入行

Ctrl+F2 设置书签

F2 下一个书签

Shift+F2 上一个书签

四、插件安装

这是st最为强大的地方--各类强大的插件。ST2是支持插件扩展的，首先，我们需要安装Package Contro，ctrl+`调出命令行工具，输入import urllib2,os;pf='Package Control.sublime-package';ipp=sublime.installed_packages_path();os.makedirs(ipp) if not os.path.exists(ipp) else None;open(os.path.join(ipp,pf),'wb').write(urllib2.urlopen('http://sublime.wbond.net/'+pf.replace(' ','%20')).read())

回车即可。

点击Preferences→Package Control（或是ctrl+shift+p），显示以下弹窗：

n Disable Package ：禁用插件

n enable Package ：启用插件

n Install Package ：安装插件

n List Package ：查看已安装插件列表

n Remove Package ：移除插件

n Upgrade Package ：升级插件

鼠标移动，直接点击List Package也可以

选择安装插件后，一般过几秒就会弹出安装插件对话框，输入插件名称，下面的列表会自动匹配

点击即可，它会自动安装。有的时候安装不上，是万恶的河蟹大婶。可以从github上将插件下载解压放在安装报目录下

五、插件介绍

插件功能非常多，挑选几个很常用的介绍

ps：如果按照过程中提示pyV8报错之类的，要预先安装，如果按照不上，参考第四点

1、Tag插件：可以为web开发者提供html和css标签，很方便快捷，对于web前端设计者非常实用。

2、Alignment：主要用于代码对齐，据说最新版已经自动集成了这个插件

3、BracketHighlighter：代码高亮，非常实用

4、converToUTF8： 转utf8

5、ZenCoding（emmet 、emmet css snippets）：前端必备，快速开发HTML/CSS

一个空白的html页面，在其中输入html:xt然后按下Tab键盘，页面自动生成html标头

输入  .left#header_left>ul>li*4>a[target="_blank"]{测试$}然后按Tab键，然后生成html代码

这个功能非常酷，大大提高了速度，附上几篇教程1、教程2

6、jquery：语法提示插件提示，非常棒

7、jsformat：格式化js代码，这个插件很有用，我们有时在网上看到某些效果，想查看是怎么实现的，但是代码被压缩过，很难阅读，不用怕，用ST2打开，右键即可，也可以设置快捷键

压缩后，压缩前的对比

8、autoprefixr：CSS3私有前缀自动补全插件

9、sidebarEnhancements：侧边栏，这个功能很棒

sidebar的颜色修改 ：打开 安装目录\Packages\Theme - Default/Default.sublime-theme文件，所有操作都在该文件里面进行。
边栏背景色修改成了

 {
 "class": "sidebar_tree",
 "row_padding": [8, 3],
 "indent": 12,
 "indent_offset": 17,
 "indent_top_level": false,
 "layer0.tint": [30, 30, 30],
 "layer0.opacity": 1.0,
 "dark_content": false
 },

名文字颜色改成了

 {
 "class": "sidebar_label",
 "color": [150, 150, 150],
 "font.bold": false
 // , "shadow_color": [250, 250, 250], "shadow_offset": [0, 0]
 },

分割线颜色改成了

 {
 "class": "sidebar_container",
 "layer0.tint": [10, 10, 10],
 "layer0.opacity": 1.0,
 "layer0.draw_center": false,
 "layer0.inner_margin": [0, 0, 1, 0],
 "content_margin": [0, 0, 1, 0]
 },

10、HTML-CSS-JS Prettify：可以将CSS格式化成一行，也可以将一行格式化成多行。

插件下载地址：https://gist.github.com/2863474 下载解压缩之后，将compact_expand_css_command.py放到*\Sublime Text 2\Packages\User
然后，重启一下st2，选择Preferences>Key Bindings - User
加入以下代码：
{ "keys": ["ctrl+shift+]"], "command": "compact_expand_css", "args": { "action": "expand" } },
{ "keys": ["ctrl+shift+["], "command": "compact_expand_css", "args": { "action": "compact" } }
保存，搞定。打开一个css文件试试，非常酷的体验

六、后记

sublime text 还有其他的常用插件，功能强大。各种人性化的细节设计，全面的功能和扩展机制，使用后定会喜欢上它

HTML-CSS-JS Prettify：格式化

ChineseLocalization：汉化

javascript-snippets：js片段