原文地址：http://css-tricks.com/sublime-text-front-end-developers/我的博客：http://blog.cabbit.me/sublime-text-front-end-developers/Privategoodswereincludedinthetranslation...^_^SublimeText是前端开发中最常用的文本编辑器之一。对于前端工程师来说，熟悉手中的编辑器和熟悉筷子一样重要。网上关于SublimeText的介绍文章已经太多了。本文只关注可以提高前端工程师工作效率的技巧和插件。语法高亮接近2015年，这几年前端开发的发展变化很快：浏览器充斥着新添加的CSS特性（以及这些特性的N种实现），而JavaScript不仅仅用于一个单独的给页面添加一些特效或者提交一个Ajax请求就这么简单。我们有Jade、Sass、TypeScript等十几种语言，可以生成HTML、CSS、JavaScript。默认安装的SublimeText是完全无法提供这些新语言的。、语法高亮显示和新功能所需的智能感知。本节介绍一些包来辅助SublimeText实现更好的语法高亮。JavaScriptNextJavaScriptNext提供了比默认的JavaScriptPackage更好的语法高亮，并且它完全支持ECMAScript6。如果你了解ECMAScript6，你可能还会觉得默认安装的SublimeText不支持模块、简洁方法、箭头函数、类、生成器和访问者带来的不便。CSS3嗯，没错，就是CSS3，默认安装的SublimeText中对CSS3的支持让人抓狂，帧动画？别开玩笑，您只会看到像代码一样的白色纯文本。其实不只是CSS3，我建议用CSS3Package来完全替代原来的CSSPackage来完成语法高亮。SCSSSass开发者，我建议你们使用SCSSPackage，是的我也认为拥有.sass和.scss很疯狂，但我认为大多数Sass开发者实际上写的是.scss，毕竟.scss更“像”我们熟悉的原生CSS。当然，Stylus和LESS也是写CSS的好工具。事实上，我更喜欢LESS。其他PackageCoffeeScript开发人员离不开Better-Coffeescript。这个Package比PackageControl中的官方CoffeeScriptPackage好太多了，后者已经很久没有维护和更新了。那么，TypeScript也是一个不错的选择，当然我认为VisualStudio可能是更好的TypeScript工具。HamlPackage在默认工具中增加了对嵌套语言的支持，包括JavaScript、CSS、Sass等，语法高亮也比以前更方便。Slim和Jade也提供了自己的语法高亮支持。我不是很懂这两种语言。如果有更好的插件，欢迎分享。PluginsSublimeText有无数有趣好用的插件，社区的支持也是我一直使用SublimeText的原因。如果我们找十几个工程师坐下来讨论SublimeText的插件，哦算了算了，还是说说宇宙太平吧...CTag等前端工程师常用的插件就不进去了细节，但这里有一些有趣的。我一直在等待ColorHighlighter插件。当我第一次用SublimeText写CSS时，我在想“谁知道这一堆颜色代码是什么颜色”...ColorHighlighter插件会检测CSS文件中的颜色代码，无论是Hex代码还是RGB代码可以很好的展示。ColorHighlighter可以设置为使用背景色或边框来提示颜色。我一般在Settings:language-http"{"ha_style":"filled","icons":false}这样设置后的效果是这样的：更神奇的是这个插件还支持Sass,LESS和Stylus最近，这也使他成为我的必备插件之一。Emmet嗯，我个人不喜欢Emmet这个名字，但是当他被称为ZenCoding时更容易被记住。经常使用Emmet只有一个缺点，那就是您可能会忘记双重标记的好习惯。使用Emmet编写HTML非常快。只要把标签和需要的类名写清楚，他就会帮你搞定嵌套结构和结束标签。Jade、Slim或Haml支持也不错。经常对代码进行lint是SublimeLinter的一个好习惯，不一定是为了检测语法错误，也是为了减少潜在的冲突，不兼容等问题。也很好。SublimeLinter可以很方便的帮我们在编译时进行lint代码。虽然我们在建站时可以使用grunt等建站工具强制进行lint检测，但编辑时实时监控总是方便很多。主题/配色我认为合适的主题和配色是重要的工具，可以潜在地提高工程师的效率。虽然黑白记事本也可以写出稳定高效的代码，但是为了我们的心情和眼睛，还是选择一些好的配色比较好。前端工程师对设计和美学更加敏感。虽然他们不是设计师，但我们知道“什么是美”。SublimeText中改变视觉效果的设置有两种，分别是代码高亮的“配色”和编辑器本身的“主题”（包括Tabbar、sidebar、Commandwindow等）。对了，最新版的SublimeText3可以指定侧边栏的文件图标了~我记得知乎有个问题，为什么大多数程序员都喜欢用黑色界面，嗯……你是用亮色还是深色主题（其实这两种我都在不同的编辑器里用过），下面是强烈推荐的：SolarizedDarkSolarized其实设计了一套配色标准，而不仅仅是几个编辑器的配色文件。我们可以在官网找到大量流行IDE的Solarized配色方案，更多的可以在GitHub等开源网站找到！几乎所有的编辑器、终端工具等都可以找到Solarized风格的配色，很多顶级工程师的工具和博客也都使用这套配色方案。Cobalt2Cabalt2主题由本文原作者WesBos推荐。这个主题已经修改和发展了5年多。它的特点是采用高对比度方案，将用户的注意力吸引到需要注意的地方。SetiUI是黑色的，非常黑，用这个来形容SetiUI一点都不为过。这个主题的蓝色非常抢眼。推荐这个主题只是因为这篇文章太长，需要一些亮色~GotoAnything如果你之前用过Coda,Textmate,或者Dreamweaver你可能在侧边栏有一个文件导航和它的依赖。SublimeText带来了GotoAnything功能，只需按一个简单的?（Windows上为Ctrl）+P即可转到任何你想去的位置，这是你能想到的打开文件的最快方式。Intellisense的提示框提供了模糊匹配，我们不需要记住具体的文件名，也不需要记住它在哪个文件夹。GotoAnything不仅支持文件名，其实他也支持going到某一行，你可以使用“jquery.js:205:15”转到jquery.js文件的第205行第15列。使用“@”可以转到文件中的函数、方法等成员，更方便。题图来源：http://marcelkalveram.com/2013/11/10-shortcuts-to-become-a-true-sublime-text-ninja/原文链接：http://www.cnblogs.com/wizcabbit/p/sublime-text-front-end-developers.html
