5. JSON to TS

JSON形式のテキストデータからTypeScriptのインターフェイスのコードに変換してくれる拡張機能です。APIから取得するJSON形式のデータなどを扱う際に、容易にインターフェースのコードを作成できます。

6. NPM-Scripts

package.jsonに定義したnpm-scriptsをサイドパネルからダブルクリックで実行できます。コマンドプロンプトやターミナルなどの別のソフトウェアを起動することなく実行できるため、非常に便利な拡張機能です。

調べたところ、こちらの機能は2018年4月のアップデートで標準機能として搭載されていました。高機能になりとても使いやすくなっていますが、デフォルトでは機能が有効になっておらずサイドパネルに表示されません。利用するためには設定ファイルに"npm.enableScriptExplorer": trueと追加する必要があります。

npm-scriptsについて詳しく知りたい方は「Node.jsユーザーなら押さえておきたいnpm-scriptsのタスク実行方法まとめ」をあわせてご覧ください。

7. Code Outline

関数名や定数名などの情報をアウトライン表示してくれる拡張機能です。サイドパネルに表示されるアウトラインを選択すると、該当するコードに瞬時に移動できます。様々な言語に対応しており、HTML、JavaScript、TypeScriptだけでなく、JSONやYAML、Dockerなどのアウトラインも表示できます。(言語によっては追加で拡張機能のインストールが必要になります)

※こちらの機能は2018年5月のアップデートで、標準機能として搭載されました。サイドパネルの[エクスプローラー]の見出しを右クリックし、表示されるメニューから[概要]を選択することで利用できます。

おまけ:テキスト校正くん

手前味噌ですが、フロントエンドエンジニアにも役立つツールなので紹介させてください。「テキスト校正くん」はテキストやマークダウンで、日本語のおかしい箇所をチェックできる拡張機能です。たとえば、次のようなウェブ関連の間違いやすいワードも鋭く指摘します。

  • Javascript → JavaScript
  • Github → GitHub
  • Mac OS X → macOS
  • iPhone Xs → iPhone XS

「JavaScript」を、「Java」とか「Java script」とか間違った表記をしているのを見たことはありませんか? 本人は気づかなくても、他のエンジニアからの信頼度や文章の信憑性がガクッと下がります。

VS Codeに「テキスト校正くん」をいれるだけで、日本語のおかしな使い方、専門用語の間違った表記を防げます。無料で簡単に導入できるので、ぜひインストールくださいませ。

おわりに

本記事で紹介した拡張機能以外でも、Chromeと連携してJavaScriptをデバッグする拡張機能など便利なものがたくさん公開されています。拡張機能はサイドパネルの拡張機能のタブから簡単に検索・インストールができますので、自分なりの使いやすいエディターにカスタマイズしてみてください。

また、今回紹介したエクステンションのような機能はJetBrains社のWebStorm(ウェブストーム)にも標準で搭載されています

WebStormは有料のソフトウェアですが、記事「JavaScriptのプログラミングはこれだけ効率化できる! 使用歴5年目のエンジニアが送るWebStormの厳選神業集」と「使いこなせばウェブ制作が爆速になるWebStorm」で紹介したように、ウェブ制作に役立つ機能が豊富に搭載されています

拡張機能で自分好みにカスタマイズするならVS Codeを、導入時から機能が揃った状態でコーディングするならWebStormを、といった感じで選んでみてはいかがでしょうか。本記事ではフロントエンドエンジニア向けの拡張機能を紹介しましたが、続編記事「VS Codeを極める! MarkdownやGitにもオススメの拡張機能9選」では開発者全般の方に役立つ拡張機能を紹介してます。ぜひチェックしてください。