[ST 插件]前端开发 Sublime 插件整理

1. sublimerge 非常神奇的代码对比工具，支持和自己的snapShot对比，和clipboard快照对比
2. WebInspector
3. PlainTasks a todo-list plugin
4. [css Format]这款插件和jsFormat类似，可以格式化css代码（包括压缩css）。个人觉得cssComb没有什么作用只是调整了属性而已。
5. table Editor markdown中写table的神器，网上各种教程(比如：https://vimeo.com/83939527)，写table速度大大提升了。但在sublime中请注意，tab可能会存在冲突的情况，请覆盖到Key Bindings - User
6. Color Highlighter
   该插件可以显示在CSS文件中说使用的颜色的色值。包括HTML中嵌套的css样式也可以显示。
7. sublimeServer 用Sublime做一个HTTP服务，可以用浏览器访问当前Sublime打开的文件夹里的内容，对于测静态页面比较方便 。
8. DocBlockr 轻松写jsdoc
9. AutoFileName 在你在输入文件名是提供自动提示，减少人为的输入错误。
10. Requester：用 sublime 发送请求

---

持续更新

---

摘引部分

转载自如何优雅地使用Sublime

文／晚晴幽草（简书作者）原文链接：http://www.jianshu.com/p/3cb5c6f2421c著作权归作者所有，转载请联系作者获得授权，并标注“简书作者”。

• MarkDown EditingSublimeText不仅仅是能够查看和编辑 Markdown 文件，但它会视它们为格式很糟糕的纯文本。这个插件通过适当的颜色高亮和其它功能来更好地完成这些任务。关于如何在SublimeText下高效些东西可参见文章：sublime text 2(3)下的Markdown写作 抑或是前段时间写下的追寻高效工作的一路折腾㈡

• SideBarFolders打开的文件夹都太多了? 来用这个来管理文件夹，世界原来也可以这么美好。
  

  SideBarFolders

• Sublime Terminal这个插件可以让你在Sublime中直接使用终端打开你的项目文件夹，并支持使用快捷键。

• ColorPicker通常，如果你想使用一个颜色选择器则可能打开 Photoshop 或 GIMP。而在 Sublime Text 中，你可以使用内置的颜色选择器。安装完成后，只要按下Ctrl / Cmd + Shift + C 快捷键。

• SublimeREPL这可能是对程序员很有用的插件。SublimeREPL 允许你在 Sublime Text 中运行各种语言（NodeJS ， Python，Ruby， Scala 和 Haskell 等等）。

• Ctags插件有童鞋抱怨Sublime Text不能支持函数的跳转（比如像Eclipse那样，按住Control点击该方法或者对象，即可跳转到定义的地方； Alt+←即可回到原处）。其实Sublime Text也可以借助插件实现之（当然，有些情况下:Can not find defination）毕竟这个也是借助正则来匹配完成的。因此这个也就要求代码很规范。这个插件相对来讲会有些麻烦，具体的可以参见:Sublime Text ctags 的配置.

• SublimeLinter插件SublimeLinter 是前端编码利器——Sublime Text 的一款插件，用于高亮提示用户编写的代码中存在的不规范和错误的写法，支持 JavaScript、CSS、HTML、Java、PHP、Python、Ruby 等十多种开发语言。这篇文章介绍如何在 Windows 中配置 SublimeLinter 进行 JS & CSS 校验。比如写例如像lua这样的弱语言脚本代码，有这个可以规避掉很多不该有的低级错误吧？当然这也需要你SublimeLinter安装完毕之后再安装一个SublimeLinter-lua
  即可。具体的使用可以参见：借助 SublimeLinter 编写高质量的 JavaScript & CSS 代码

• SideBarEnhancements插件SideBarEnhancements是一款很实用的右键菜单增强插件；在安装该插件前，在Sublime Text左侧FOLDERS栏中点击右键，只有寥寥几个简单的功能；安装了就相当于给其丰了大胸一般。更强大的是，该插件还能让我们自定义快捷键呼出某个浏览器以预览页面！这样就不用到项目目录下寻找和拖动到特定浏览器中预览了。安装此插件后，点击菜单栏的preferences->package setting->side bar->Key Building-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等加上)，当然你也可以自己定义喜欢的快捷键，最后注意代码中的浏览器路径要以自己电脑里的文件路径为准。

• HTML-CSS-JS Prettify一款集成了格式化（美化）html、css、js三种文件类型的插件，即便html,js写在PHP文件之内。插件依赖于nodejs，因此需要事先安装nodejs，然后才可以正常运行。插件安装完成后，快捷键ctrl+shift+H完成当前文件的美化操作。插件对html、css文件的美化不是非常满意，但还可以，后面将说明如何修改css美化脚本。本人用起来超级爽的，鉴于篇幅，就不赘述，可以参见这篇介绍。
• CSScomb CSS属性排序:有时候看看自己写的CSS文件，会不会觉得属性很乱查找不易维护难？CSScomb可以按照一定的CSS属性排序规则，将杂乱无章的CSS属性进行重新排序。选中要排序的CSS代码，按Ctrl+Shift+C，即可对CSS属性重新排序了，代码从此简洁有序易维护，如果不款选代码则插件将排序文件中所有的CSS属性。当然，可以自己自定义CSS属性排序规则，打开插件目录里的CSScomb.sublime-settings文件，更改里面的CSS属性顺序就行了。因为这个插件使用PHP写的，要使他工作需要在环境变量中添加PHP的路径，具体请看github上的说明。
• SublimeTmpl 快速生成文件模板一直都很奇怪为什么sublime text 3没有新建文件模板的功能，像html头部的DTD声明每次都要复制粘贴。用SublimeTmpl这款插件终于可以解脱了，SublimeTmpl能新建html、css、javascript、php、python、ruby六种类型的文件模板，所有的文件模板都在插件目录的templates文件夹里，可以自定义编辑文件模板。SublimeTmpl默认的快捷键:
  ctrl+alt+h htmlctrl+alt+j javascriptctrl+alt+c cssctrl+alt+p phpctrl+alt+r rubyctrl+alt+shift+p python

如果想要新建其他类型的文件模板的话，先自定义文件模板方在templates文件夹里，再分别打开Default (Windows).sublime-keymap、Default.sublime-commands、Main.sublime-menu、SublimeTmpl.sublime-settings这四个文件照着里面的格式自定义想要新建的类型，这里就详细介绍了，请各位自己折腾哈~

SFTP：快速编辑远程服务器文件在Win下用Xftp和WinScp，被这种需要切换点击or F5刷新的手动操作蛋疼到无语；故此一遇见这SFTP，顿觉这世界都美好了许多。当然Sublime下面也有些其他同步插件，比如FtpSnyc，但是配置起来的错误提示一点都不人性化，就毫不留情的舍弃了。Sublime下有SFTP，只要Ctrl+S即可同步本地到服务器，妥妥的爽歪歪有么有？如何配置，请参见在 Sublime Text中使用 SFTP 插件快速编辑远程服务器文件;如欲使用FtpSync可参见Sublime使用及FtpSync远程同步；大道至简，因简而悦；开心垒码，值得折腾。
WakaTime -- 记录你的Code时间;WakaTime可以做到精确地统计到你花在某个项目上的时间;WakaTime针对不同的IDE，拥有不同的插件，在Sublime上安装着插件，就能统计到我使用Sublime进行的所有项目的行为。可以高效管理和知晓自己code时间；并且，统计完善, 适合发朋友圈装逼（如果你喜欢的话）~
Waka的基本设计和rescuetime类似。每个人注册完将获取一个key，装一个客户端，把key输进去（登陆是同一个道理），然后它就把本地的所有行为带个key扔给服务器来统计，一段时间之后给你个报表。不过Waka做的真的很精准，精确到每一个文件用了多少秒，每一种语言用了多少时间。

安装和使用都很简单，请参见这里。另外一篇比较详细的文章时间都去哪了?用RescueTime和WakaTime来记录你的时间,对RescueTime和WakaTime有一个更为详细的叙述，可以一读。
剩下些许其他的可以按需安装的插件，比如：
ConvertToUTF8 支持 GBK, BIG5, EUC-KR, EUC-JP, Shift_JIS 等编码的插件
Bracket Highlighter 用于匹配括号，引号和html标签。对于很长的代码很有用。安装好之后，不需要设置插件会自动生效
DocBlockr 可以自动生成PHPDoc风格的注释。它支持的语言有Javascript, PHP, ActionScript, CoffeeScript, Java, Objective C, C, C++
Emmet(Zen Coding)生成HTML代码段的插件，强大到无与伦比:可以超快速编写HTML/CSS/JS，当然这个插件还支持多种编译环境，如常见的：Eclipse/Aptana、Coda、Notepad++、Adobe Dreamweaver、TextMate等，web开发必备！！！。
jsFormat 格式化js代码，懂者自懂；强迫症Coder必备！默认快捷键Ctrl+Alt+F。
phpFormat 格式化php代码，懂者自懂；强迫症Coder必备！
CSS Compact Expand CSS属性展开收缩:写CSS的盆友，喜欢将其写多行还是一行(个人喜欢将其格式化为多行)？如果阅读别人的代码不符合自己的习惯，可以用CSS Compact Expand这个插件将CSS格式化一下，按 Ctrl+Alt+[ 收缩CSS代码为一行显示，按 Ctrl+Alt+] 展开CSS代码为多行显示；强迫症Coder必备！。
Autoprefixer插件：这是一款CSS3私有前缀自动补全插件；该插件使用CanIUse资料库（当然，SublimeText自然也有<font color="purple">CanIUse</font>这个插件咯），能精准判断哪些属性需要什么前缀，与CssComb插件一样，该插件也需要系统已安装Node.js环境；使用方法：在输入CSS3属性后（冒号前）按Tab键即可。
YUI Compressor：压缩JS和CSS文件，按F7键后，若压缩当前文件（demo.js），则压缩后的文件（demo.min.js）保存在该文件的同级目录，需要安装java的JDK。使用方法：YUI Compressor
ClickableURLs：可点击的URL使用小插件ClickableURLs可以让文件中的URL能够点击。
终极王道：自己编写专用的Sublime Text插件。虽然说各个方面比如移动端，Web前段，服务器端，非Coder的Writer所需要的方便已经被集成在了不同的插件中。但譬如，需要快捷打开PC端的某个模拟器，便捷的进行某些校验，只要你想的到的基本都可以将其在插件内，以快捷键处理之。至于如何编写SublimeText插件，请参看这里编写自己的Sublime Text2 插件