JavaScript 開発者向けの 10 個の必須 Sublime Text プラグイン_JavaScript スキル

Sublime Text は、ほぼすべての開発者にとってツールボックスに必須のアプリケーションです。 Sublime Text は、クロスプラットフォームで高度にカスタマイズ可能な高レベルのテキスト エディターであり、フル機能の IDE (リソースを大量に消費することで有名) と、Vim や Emacs などのコマンドライン エディター (学習曲線が急峻である) の両方に適合します。

Sublime Text が非常に人気がある理由の 1 つは、拡張可能なプラグイン アーキテクチャです。これにより、開発者は、コード補完やリモート API ドキュメントの埋め込みなどの新機能を使用して、Sublime のコア機能を簡単に拡張できます。 Sublime Text プラグインはそのままでは提供されません。通常は、Package Control と呼ばれるサードパーティのパッケージ マネージャーを通じてインストールする必要があります。 Sublime Text に Package Control をインストールするには、Web サイトのインストール ガイドに従ってください。

この記事では、JavaScript 開発者に必須の 10 個の Sublime プラグインを紹介します。それぞれがワークフローを改善し、効率を高めるのに役立ちます。さあ、始めましょう！

1.バベル

最初のものは間違いなく 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 リンターです。初心者でも、何年もプログラミングをしている人でも、JSHint は必須です。詳細については、JSHint 関連ページを参照してください。

JSHint Sublime Text プラグインが機能するには、npm 経由で JSHint をグローバルにインストールする必要があります。

npm install -g jshint

これを行う方法がわからない場合は、ノード パッケージ マネージャーの使用を開始するためのチュートリアルを参照してください。

JSHint npm モジュールと JSHint Sublime Text プラグインがインストールされたら、JavaScript ファイルを開いて Ctrl + J (Linux/Windows では Alt + J) を押すことで、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 のスタイルが気に入らなかったらどうしよう?」

4. DocBlockr

5.サイドバーの機能強化

6.AngularJS

• 核心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键会产生：

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

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

{{#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()可以扩展到：

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

真是太棒了！

結論

這10款在JavaScript開發中必備的Sublime插件，講到這裡就結束了。我只用過它們中的一兩個，因此歡迎大家談談你們在用過之後的體驗感受。當然，如果遺漏了你最喜歡的插件的話，也請在評論中讓我知道，我會考慮將它添加到列表中。

最後一點，請記住，Sublime Text不是免費軟體。但它有無限的試用版（儘管會有各種煩人的畫面出現），而單一用戶的授權費用是$ 70。如果你一天中的大部分時間都要使用文字編輯器，那麼這將會是一筆物有所值的投資！