一、前言之前
从设计到前端，有过一段时间是懵懵懂懂的状态，缺乏对整个职业更加深入的了解。后来混迹于各个前端大牛的博客，在各个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代码
6、jquery：语法提示插件提示，非常棒
7、jsformat：格式化js代码，这个插件很有用，我们有时在网上看到某些效果，想查看是怎么实现的，但是代码被压缩过，很难阅读，不用怕，用ST2打开，右键即可，也可以设置快捷键
压缩后，压缩前的对比
8、autoprefixr：CSS3私有前缀自动补全插件
9、sidebarEnhancements：侧边栏，这个功能很棒
sidebar的颜色修改 ：打开 安装目录PackagesTheme - Default/Default.sublime-theme文件，所有操作都在该文件里面进行。
边栏背景色修改成了
1 {
2 "class": "sidebar_tree",
3 "row_padding": [8, 3],
4 "indent": 12,
5 "indent_offset": 17,
6 "indent_top_level": false,
7 "layer0.tint": [30, 30, 30],
8 "layer0.opacity": 1.0,
9 "dark_content": false
10 },
名文字颜色改成了
1 {
2 "class": "sidebar_label",
3 "color": [150, 150, 150],
4 "font.bold": false
5 // , "shadow_color": [250, 250, 250], "shadow_offset": [0, 0]
6 },
分割线颜色改成了
1 {
2 "class": "sidebar_container",
3 "layer0.tint": [10, 10, 10],
4 "layer0.opacity": 1.0,
5 "layer0.draw_center": false,
6 "layer0.inner_margin": [0, 0, 1, 0],
7 "content_margin": [0, 0, 1, 0]
8 },
10、HTML-CSS-JS Prettify：可以将CSS格式化成一行，也可以将一行格式化成多行。
插件下载地址：https://gist.github.com/2863474 下载解压缩之后，将compact_expand_css_command.py放到*Sublime Text 2PackagesUser
然后，重启一下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片段