「Visual Studio Code（略称：VS Code）」はMicrosoftが提供している無償で高機能なエディターです。標準でも十分な機能は備わっていますが、拡張機能をインストールすることで、より使いやすく自分にあったエディターにカスタマイズできます。
本記事では、「HTMLコーダー」「フロントエンドエンジニア」にそれぞれ役立つ拡張機能を紹介します。
HTMLコーダーに役立つ拡張機能
1. Live Server
ワンクリックでローカルのウェブサーバーを起動できる拡張機能です。オートリロードにも対応しており、ファイルの更新を検知して自動的にリロードしてくれるため、リアルタイムに変更が確認できます。Gulpやwebpackなどを使ってローカルサーバーを立てる方も多いですが、設定する手間がなく手軽に利用できます。
2. Easy Sass
ファイル保存時に自動でSASSをCSSにコンパイルしてくれる拡張機能です。こちらもGulpやwebpackを利用してコンパイルを行う方も多いですが、一人で開発する場合やちょっとした開発を行う際に簡単に利用できるためとても便利です。
3. Prettier – Code formatter
JavaScriptやTypeScript、CSSなどのコードを整形可能なコードフォーマッターです。ファイル全体のフォーマットを整えるだけでなく、選択した部分のコードのみフォーマットを整えることも可能です。また設定を変えることで、ファイル保存時に自動的にフォーマットを適用したり、ESLintの設定を使って整形することもできます。
Prettierについて詳しく知りたい方は「フロントエンド開発に役立つ話題のコード整形ツール「Prettier」とは」をあわせてご覧ください。
フロントエンドエンジニアに役立つ拡張機能
4. Regex Previewer
正規表現を作成する際に、正規表現のテストをリアルタイムで実施できる拡張機能です。拡張機能をインストールすると、コード中の正規表現の箇所に「Test Regex…」というリンクが表示され、リンクを押すと正規表現の確認画面が開きます。テスト実施時の注意点としては、次のデモ画像のように複数のパターンに対してテストを行う場合は、正規表現のオプションで「グローバルサーチフラグ（g）」と「マルチラインフラグ（m）」を指定する必要があります。
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などのアウトラインも表示できます。（言語によっては追加で拡張機能のインストールが必要になります）
おわりに
本記事で紹介した拡張機能以外でも、Chromeと連携してJavaScriptをデバッグする拡張機能など便利なものがたくさん公開されています。拡張機能はサイドパネルの拡張機能のタブから簡単に検索・インストールができますので、自分なりの使いやすいエディターにカスタマイズしてみてください。
また、今回紹介した拡張機能の大半はJetBrains社のWebStorm（ウェブストーム）」に標準で搭載されています。拡張機能ではなく、公式に提供されている標準機能であるため、クオリティが高く使い勝手がとても良いです。
WebStormは有料のソフトウェアですが、記事「JavaScriptのプログラミングはこれだけ効率化できる！ 使用歴5年目のエンジニアが送るWebStormの厳選神業集」と「使いこなせばウェブ制作が爆速になるWebStorm」で紹介したように、ウェブ制作に役立つ機能が豊富に搭載されていて値段以上の価値があります。
拡張機能で自分好みにカスタマイズするならVS Codeを、導入時から最高の効率でコーディングするならWebStormを、といった感じで選んでみてはいかがでしょうか。
