sublime 插件（侧重JavaScript）

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：

?

1	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

Sublime Text在侧边栏文件树中可用于处理文件的选项很是少。简单地说，SideBar Enhancements可修复这个问题。这款插件特别为文件和文件夹提供了一个“move to trash”的选项，一个“open with..”选项，以及一个剪贴板。它也可让你在web浏览器中打开文件，复制文件内容做为data:uri base64 （这在CSS中嵌入图像特别方便），并提供大量的搜索操做。此外，它能够很好地与SideBarGit集成，直接从侧栏提供Git命令。

随着JavaScript代码库规模的不断扩大，因而，找到一种浏览项目并处理项目文件的合理手段迫在眉睫。所以，这个插件就成为了必需品。

6. AngularJS

由Angular-UI团队开发，而且多是这些SublimeText插件中比较大（但也更有用）的软件包之一。它的主要功能包括：

• 核心AngularJS指令（ng-model，ng-repeat等）的代码完成
• 自定义指令的指令完成
• 指令、控制器和过滤器的快速面板搜索
• Angular相关的代码片断
• 核心Angular JS指令的GoToDocs

Angular是一个大型的库，AngularJS出乎意料地有用。你能够在项目的主页上阅读它的不少设置。

要利用这个插件语法高亮的优点，那么你须要到View -> Syntax -> HTML (Angular.js)中改变你的HTML文件的视图类型。

7.TypeScript

TypeScript是JavaScript编译为普通JavaScript的一个类型超集。这对于普通开发者而言，可能不知道它也没什么大的关系，可是今年三月出来的小公告——Angular 2将建造在TypeScript上，意味着，若是你工做于Angular的话，而且你打算之后使用Angular2的话，那么这个插件是必备的。

基于微软的支持，这款插件添加了代码完成，正确的语法高亮，代码格式化和扩展导航功能到TypeScript项目。它还配备了一个构建系统，容许你编译TypeScript文件为JavaScript。

要访问构建系统能够这么作 Tools -> Build System，而后选择TypeScript 。接着用 .ts 结尾打开一个文件，选择Tools -> Build，或者干脆按 Ctrl + B。你会被要求构建参数，以后插件将在同一目录中输出编译好的JavaScript文件。惟一须要注意的是，它须要Node。

从插件的角度说，它提供了“工做于TypeScript代码时增强版的Sublime Text体验”。千真万确，从上述臃肿的IDE中，它作了一个使人耳目一新的改变。

8.Handlebars

若是你正在使用Ember.js，或只是将Handlebars做为模板语言一种选择，那么你不能没有它。没有它的话，你还不如干脆关掉全部的语法高亮。

除了语法高亮（在个别模板文件和脚本标签的内联模板中都有这个功能），它还提供了用于触发各类表情的选项卡。例如，键入 x-temp并按 TAB键会产生：

?

1	<script type= "text/x-handlebars" data-template-name= "" ></script>

另外，键入 ifel 再按TAB键，你会获得：

?

1 2 3 4 5

{{ #if }}   {{ else }}   {{/ if }}>

很方便，是吧？

在这个项目的主页上还有一系列完整的代码片断。

9.Better CoffeeScript

Better CoffeeScript是原先CoffeeScript-Sublime-Plugin的一个分支——然而，不幸的是，CoffeeScript-Sublime-Plugin彷佛已被其建立者遗弃，只能工做于SublimeText 2。

此款插件不只为那些工做于CoffeeScript的人提供了很是须要的语法高亮功能，并且还有其余不少功能。它增长了一堆命令到Sublime（可经过命令面板或各类快捷键访问），好比运行语法检查，编译文件，以及显示编译好的JavaScript。它还配备了片断和工做于cake （Make对于CoffeeScript的简化版本）的构建系统。

你能够在此项目的主页上仔细阅读插件的许多设置和选项。

10. jQuery

我知道如今的jQuery在不少地方看似都将会失宠，但它仍然很是有用，若是你不打算创建一个彻底互动的网站，或者你只是想添加功能到现有的应用程序的话。

这个插件提供了额外的语法高亮和几乎全部jQuery方法的片断。经过输入方法名称并选择合适的匹配就能够访问这些片断——就是这么简单！我特别喜欢这个功能，由于它节省了我不少本来要用于记忆方法特征以及查询jQuery API文档的时间。

例如，键入 $.a 会出来一个让我选择 $.ajax()的选项，而 $.ajax()能够扩展到：

?

1 2 3 4 5 6 7 8 9 10 11 12 13 14 15

$.ajax({   url: '/path/to/file' ,   type: 'default GET (Other values: POST)' ,   dataType: 'default: Intelligent Guess (Other values: xml, json, script, or html)' ,   data: {param1: 'value1' }, }) .done( function () {   console.log( "success" ); }) .fail( function () {   console.log( "error" ); }) .always( function () {   console.log( "complete" ); });

 

转自：http://www.jb51.net/article/80120.htm