Sublime Text几乎是任何开发者在其工具箱的必备应用程序。Sublime Text是一款跨平台的,高度可定制的,高级的文本编辑器,既适合全功能的IDE(出了名的资源匮乏),又可匹配命令行编辑器,例如Vim和Emacs(具有陡峭的学习曲线)。
Sublime Text如此受欢迎的其中一个原因就是它的可扩展插件架构。这使得开发人员可以轻松使用新功能,例如代码完成,或远程API文档嵌入,来扩展Sublime的核心功能。Sublime Text的插件并不是开箱即用的——通常需要通过一个叫Package Control的第三方软件包管理器来安装。要在Sublime Text中安装Package Control,请遵照其网站上的安装指南。
在这篇文章中,我将介绍10个JavaScript开发人员必备的Sublime插件,每一个都可以帮助你改进工作流程,让你更高效。下面,就让我们开始吧!
1.Babel
第一个当属Babel插件。该插件添加了合适的语法高亮到ES6 / 2015和React JSX代码。安装插件后,你要做的第一件事就是设置默认的语法为.es6,.jsx,以及甚至.js文件。但是,如果你工作于ES3 /5,并且不想使用Babel改变你的代码的话,那么要慎用最后一个。
如果你还没有发现Babel的乐趣,那么我强烈推荐它。它允许你编译ES6 / 2015和JSX代码到ES5。它可以很好地集成到所有流行的构建工具和CLI。虽然它不支持旧版浏览器,但如果你需要支持IE10及以下版本,那么可以按照警告页面上的提示去做。
可惜的是,Babel插件不允许在Sublime中快速编译ES6代码。所以如果你非要这么做,那么我建议你试试Compile Selected ES6。
2. JSHint
接下来是Sublime中的JSHint插件。JSHint是一个JavaScript Linter,可用于查看你的代码并确认它有正确的式样,正确的语法,摆脱常见错误。无论你是一个初学者,还是已经编写了好多年的程序,JSHint都是一个必备品。查看JSHint相关页面以了解更多的信息。
要让JSHint Sublime Text插件工作,你需要通过npm安装好全局性的JSHint:
npm install -g jshint
如果你不知道如何做到这一点,那么请查看我们关于从Node Package管理器开始的教程。
一旦安装好了JSHint npm模块和JSHint Sublime Text插件,你就可以通过打开你的JavaScript文件并按下 Ctrl + J (或 Alt + J on Linux/Windows),来调用JSHint。或者,你还可以通过上下文菜单访问JSHint。
如果你已经安装了这个插件,但想要在发生错误的地方有一个更明确的警告,那么请使用JSHint Gutter。或者,如果你想在安装NPM包或该插件之前试用JSHint的话,JSHint.com也有一个很棒的在线互动工具,你可以使用这个工具粘贴你的代码查看即时反馈。
3. JsFormat
JsFormat基于JS Beautifier,可以自动帮助你格式化JavaScript和JSON。如果你只单独使用它的JSON格式,也是可以的。但对我来说,它的最大优势出现在当我工作于其他开发人员的代码,或我自己在很久以前写的代码的时候。
这样的代码往往是难以阅读,但是遵循一种通用的代码格式样式是有帮助的。虽然格式化可能不适合每一个人,但确实可以通过引入一个共同的结构来帮助开发人员读懂代码。Linter虽然关注到这一点,但不一定全面做到,并且不会自动修复格式。代码格式化节省了大量的时间,避免了大量令人头痛的问题。
安装好了之后,要使用JSFormat,先进入JS文件,然后在Windows / Linux上按Ctrl + Alt + f ,或在Mac上按 Ctrl + ⌥ + f 。当然也可以使用上下文菜单。
你也许会想:“要是我不喜欢它们设计JavaScript样式的方式呢?”
别担心! JsFormat不但基于JS Beautifier设置,而且高度可配置。要调整适合于Sublime Text 3,请这样做:Preferences -> Package Settings -> JsFormat -> Settings – Default
然后根据自己的喜好编辑JSON设置。
4. DocBlockr
将注释添加到你的代码中有时是一件非常非常痛苦的事情。虽然很多人都不喜欢干这件事,但又绝对是有必要的。 DocBlockr可通过制造简单的注释来减轻一些痛苦。安装DocBlockr后,所有你需要做的是,用 /* 或 /** 开始一行代码,然后剩下的就都可以交给它了。如果你在函数上面以 /**开头,那么它会基于JSDoc格式为你生成注释。有些东西虽然你以前从来没有用过,但一旦用过之后,你会怀疑自己以前是怎么活下来的,DocBlockr就是其中的一个例子。
DocBlockr支持许多其他的语言,包括:CoffeeScript,TypeScript、PHP、ActionScript、Haxe、Java、Apex、Groovy、Objective C、C、C++以及Rust。
5.SideBar Enhancements