JS开发者常用的10个Sublime Text插件

提示：扫一扫查出行
【扫一扫了解最新限行尾号】
复制提示

Sublime Text 是每个开发者工具箱中都应该有的一个强大的应用。它是一个跨平台的、高定制化的、高级的文本编辑器，在功能强大的集成开发环境（众所周知地消耗资源）和类似于 Vim 或 Emacs 的命令行编辑器（学习成本非常高）之间取得了很好的平衡。

使得 Sublime 如此强大的原因之一就是其可扩展的插件架构。开发者可以很容易地扩展 Sublime 的核心功能，添加一些新特性，比如补全代码、嵌入远程接口文档。Sublime Text 不带有可以启用的插件 – 它们通常通过第三方包管理器安装，简称为包管理器。安装 Sublime Text 的包管理器，请按照官网的安装教程进行安装。

本文针对 JavaScript 开发者，简要介绍了十个 Sublime 插件，每一个都能够帮助你改善工作流，并且提高工作效率。那么，就让我们一起来看看吧！

1. Babel

我首先要介绍的就是 Babel 插件。这个插件可以在你的 ES6/2015 和 React JSX 代码上添加语法高亮。安装插件之后，第一件要做的事就是把它设置为 .es6、 .jsx、以及 .js 文件的默认语法。然而，如果你正在使用 ES3/5 工作，那你要注意最后一种文件，不要使用 Babel 编译你的代码。

如果你还没有享受过 Babel 的乐趣，我强烈建议你去尝试它。它允许你将 ES6/2015 和 JSX 代码编译成 ES5。并且它很好的整合了目前流行的构建工具和命令行工具。当然，它不支持传统浏览器，但是如果你想支持 IE10 或者更低版本可以在他们的附加文档页面查看相关说明。

不幸的是， Babel 插件不允许在 Sublime 内编译 ES6 代码。对于那些想实现此功能的人，我建议你查看 Compile Selected ES6。

2. JSHint

下一个就是 Sublime 的 JSHint 插件。JSHint 是一个 JavaScript 检测器，它会查看你的代码，并验证其是否具有正确的样式和语法，避免犯相关的常见错误。无论你是个新手还是老手，JSHint 都是必不可少的。查看 JSHint 的「关于页面」，可了解更多信息。

为了 JSHint 插件能够在 SublimeText 中正常工作，你需要通过 npm 全局安装 JSHint：

npm install -g jshint

如果你不确定应该如何做这一步，请浏览《getting started with the Node Package manager》这里的教程。

一旦 npm 的 JSHint 模块和 SublimeText 的 JSHint 的插件安装好了，你就能够简便地使用 JSHint 了，只要打开 JavaScript 文件，然后按下 Ctrl + J （在 Linux/Windows 上是Alt + J ）。或者，你可以通过菜单打开 JSHint 功能。

如果你已经安装了插件，但是想要在有错误的地方有更明显的提示，请浏览 JSHint Gutter。或者，你想在安装 NPM 包和插件之前试一试 JSHint，JSHint.com 有一个很棒的在线交互工具，你可以把代码粘贴到里面得到实时的反馈。

3. JsFormat

JsFormat 基于 JS Beautifier，可以帮助你自动格式化 JavaScript 和 JSON。如果你只想用它格式化 JSON 字符串，那它值得你拥有。但是对于我来说，最大的优势是，当我需要读其他开发人员的代码，甚至于是我很久以前写的代码。

这种代码通常可读性差，统一的格式化代码样式会非常有帮助。尽管格式化工具并不适合每个人，但它们在代码中使用统一的结构，这对开发者阅读代码是非常有用的。检查器会注意到这些，但是他们不需要做好每件事，不会自动格式化代码。代码格式化工具可以节约很多时间，解决很多令人头痛的问题。

安装好就要使用 JSFormat ，打开你的 JS 文件，然后在 Windows/Linux 上按下 Ctrl + Alt + f 或者在 Mac 上按下 Ctrl + ⌥ + f。或者，你也可以使用菜单栏。

你可能会想：“但是如果我不喜欢它格式化 JavaScript 的样式怎么办？”

好消息！JsFormat 是基于 JS Beautifier settings 高度配置化的。在 SublimeText 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

客观来说，SublimeText 在侧边文件树的位置只有很少的几个操作选项。简单来说，SideBarEnhancements 解决了这个问题。显然，这个插件提供了为文件和文件夹提供了 “移到垃圾箱” 选项、“用…打开” 选项以及剪贴板相关选项。它还可以让你用浏览器里打开文件，以 data:uri base64（可以方便地在CSS中嵌入图片）格式拷贝文件，提供一系列的搜索操作。它很好地整合了 SideBarGit 可以在侧边栏直接提供 Git 命令，这是一个额外的功能。

随着 JavaScript 代码库的不断增大，以一种明智的方式浏览你的项目和操纵项目中的文件是很有必要的。因此这个插件必不可少。

6. AngularJS

由 Angular-UI 团队开发，它可能是所有推荐插件列表上比较大的一个（但是也非常有用）。它的只要特征包括：

自动完成 AngularJS 指令（ng-model, ng-repeat等）
自动完成你的自定义指令
快速查看 directives, controllers 和 filters 的面板
相关的片段
核心的指令文档

Angular 是一个如此大的库，我发现它非常有用。它有很多设置选项，可以在项目首页浏览。

为了利用这个插件的语法高亮特性，你可以给你的 HTML 文件更改视图类型：View -> Syntax -> HTML (Angular.js)

7. TypeScript

TypeScript 是 JavaScript 的超集，可以编译成普通的 JavaScript。这可能对普通开发者来说并不重要，除了今年三月的一个小公告，Angular 2 将基于 typescript 构建。这意味着如果你使用 Angular 并打算以后继续使用 Angular2 ，这个插件必须安装。

这个插件由微软支持，添加了代码自动补全、适当的语法高亮、代码格式化和扩展 TypeScript 项目的导航能力。它还带有一个构建系统允许你将 TypeScript 编译成 JavaScript。

要进行编译，可以去 Tools -> Build System 选择 TypeScript。然后打开后缀名为 .ts 的文件，选择 Tools -> Build，或者按下 Ctrl + B。你可能会问构建的参数，之后插件会将编译后的 JavaScript 文件输出在相同的目录下。唯一要说明的就是需要安装 Node。

用插件自己的话说，它提供了“在 Sublime Text 下使用 TypeScript 编程的增强的体验”。这是确实是真的，它是的在前面提到的臃肿的 IDEs 上开发的人员眼前一亮。

8. Handlebars

如果你正在使用 Ember.js 或者仅仅是使用 Handlebars 作为你的模板语言的选择，那么你绝对不能缺少它。没有它，你可能会把所有的语法高亮去掉。

除了语法高亮（它作用于单独的模板文件以及脚本标签中的内联模板）之外，它还提供了使用 tab 键转换变量为表达式。例如，输入 x-temp 并按下 TAB 键就会生成：

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

或者，输入 ifel 然后按下 TAB 键，你就会得到：

{{#if }}

{{else}}

{{/if}}>

相当的方便，对吗？

在项目首页有一个完整地代码片段列表。

9. Better CoffeeScript

Better CoffeeScript 是原始插件 CoffeeScript-Sublime-Plugin （很不幸似乎它的开发者放弃了它，只在 SublimeText 2 上工作）的一个分支

这个插件提供了 CoffeeScript 开发人员急需的语法高亮功能，而且不止于此。它在 Sublime 里提供了一些命令（通过命令面板或者各种快捷键），比如进行语法检查、编译文件和显示编译后的文件。它还提供了大量的代码片段和可是使用 cake 的编译系统（CoffeeScript 中 Make 的简化版）。

你可以在项目首页仔细浏览插件的更多设置和选项。

10. jQuery

我知道目前在很多地方 jQuery 看似已经落伍了，但是如果你不是建立一个交互性很强的网站或者你只是想在已有应用上添加功能，它仍然是非常有用的。

这个插件提供了额外的语法高亮功能和几乎所有的 jquery 方法作为代码片段。输入方法名字就可以选择匹配的代码片段－就是这么简单！我十分喜欢这个功能，因为它让我免于记忆所有方法的签名和不断查看 jQuery 的 API 文档。

比如，输入 $.a 就可以让我选择 $.ajax()，然后自动扩展成以下代码：

$.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");

});