プログラミングに便利な拡張機能
ここでは、プログラミング作業において便利度がアップする拡張機能をいくつか紹介します。拡張機能の探し方やインストール方法については、連載第3回を参照してください。また、settings.jsonを直接編集する場合のファイルの置き場所については、第2回を参照してください。
コードを手軽に実行 ──Code Runner
C++やRustなどでは、ソースファイルの作成から実行までにコンパイル作業が必要で、それをいちいちターミナルでコマンドを入力して行うのも面倒なものです。Jun HanによるCode Runner（formulahendry.code-runner）をインストールすると、コマンドを入力することなくコンパイル、実行までを行ってくれて効率的に作業できるようになります（Code-Runnerというよく似た名前の拡張機能もあるので注意しましょう）。C、C++、Java、JavaScript、PHP、Python、Perlをはじめとして非常に多くのプログラミング言語に対応しています。
なお、コンパイルや実行のための環境は、利用したいプログラミング言語に合わせて構築されており、パスも通っていてコマンドが実行できるようになっている必要があります。これは、Code Runnerは開いているファイルの種類に応じて、コマンドをターミナル等で実行する機能しか持っていないからです。
図6は、簡単なCプログラム（Hello, world!!）をCode Runnerで実行してみた例です。コンパイルと実行は、コンテキストメニューから［Run Code］を選択するか、［Control］＋［Option］＋［N］／［Ctrl］＋［Alt］＋［N］を入力します。
図6のように、ファイルが編集途中で、保存もされていない場合には、一時ファイルを作成して、それを実行します。保存されたファイルであれば、それが直接コンパイル、実行されます。コマンドが自身で終了しないようなものであるときには、［Control］＋［Option］＋［M］／［Ctrl］＋［Alt］＋［M］で中断できます。
Code Runnerは、既定ではパネルの［出力］タブにコンパイル・実行経過を書き出すので、scanf関数やgets関数などで標準入力から入力を受け取ることができません。settings.jsonファイルにcode-runner.runInTerminal項目を追加して値をtrueに設定すると、入出力にターミナルを使うようにできます。また、同じくsettings.jsonファイルにcode-runner.executorMap項目を追加すると、言語ごとに実行するコマンドをカスタマイズできます。設定の内容については、拡張機能「Code Runner」の［詳細］タブで「Configuration」の欄を参照してください。
フロントエンド開発のためのコードフォーマッタ ──Prettier - Code formatter
VSCodeは、ビルトインでコードのフォーマット機能を備えますが、esbenpによるPrettier - Code formatter（esbenp.prettier-vscode、以降は単にPrettierとします）をインストールすると、既定のフォーマット機能に替えて以下の機能を利用できるようになります。
- よりきめ細かなルールに基づくフォーマット
- フォーマット内容のカスタマイズ
- ファイル保存時に自動フォーマット
- 設定ファイルの作成と共有
PrettierはVSCode専用ではなく、VimやEmacs、Atomといったテキストエディターでも利用できる汎用性が高いものですが、ここではVSCodeでの利用に絞って紹介します。Prettierのサポートする対象の言語はHTML、CSS（LESS、SCSS）、JavaScript、TypeScript、JSX、Angular、Vue、Flow、Ember/Handlebars、JSON、GraphQL、Markdown、YAMLとなっており、主にフロントエンド開発のための言語・フレームワークを対象としたものになっています。
拡張機能Prettierをインストールしたら、まずは既定のフォーマッタをPrettierに変更します。Editor：Default Formatterをesbenp.prettier-vscode（表示はPrettierとなっている）に変更します。ファイル保存時に自動でフォーマットしてほしいなら、Editor：Format On Saveにチェックを入れます。
フォーマットの実行は既定と変わりありません。コンテキストメニューから［ドキュメントのフォーマット］あるいは範囲指定して［選択範囲のフォーマット］を選択したり、［Commamd］＋［K］［Commamd］＋［F］／［Ctrl］＋［K］［Ctrl］＋［F］キーで実行できたりします。図7は、Prettierの既定の設定でフォーマットを実行してみた例です。
フォーマットルールは、VSCodeの設定から拡張機能のPrettierを選択して表示される約30の項目から変更できます。以下に、主なものをいくつか抜粋します（カッコ内は既定値）。
- Prettier: Enable：Prettier自体を有効にするか（true）
- Prettier: Bracket Spacing：ブラケットの内側にスペースを置くか（true）
- Prettier: Semi：行末にセミコロンを置くか（true）
- Prettier: Tab Width：タブ幅（2）
- Prettier: Print Width：行幅（80）。この幅に収まるように整形される
- Prettier: Single Quote：引用符をシングルクォートにするか（false）
開発者間でフォーマットルールを共有したいときには、設定ファイルを作成して、それを各自に配布します。ファイルの形式はJSON（.json）、JavaScript（.js）、TOML（.toml）、YAML（.yml）などが選べますので、それぞれの拡張子を付加した.prettierrcファイルを作成して、フォーマット対象のファイルのある場所に置きます。ファイルの書き方などの情報は、拡張機能「Prettier - Code formatter」の［詳細］タブか、以下のWebサイトに詳細な例があるので、参照してみてください。
コメントの色分け表示 ──Better Comments
VSCodeは、コメントを認識してカラー表示してくれますが、コメントの内容にまでは踏み込んでくれません。コメントには、通常のメモ的な内容の他にTODOといった作業コメント、JavaDocのようなドキュメンテーションコメントも含まれるので、これらを認識して色分け表示できれば、例えばTODOを見逃しにくくなるなど便利でしょう。Aaron BondによるBetter Comments（aaron-bond.better-comments）をインストールすると、コメントの種類による色分け表示を可能にしてくれます。基本的には、コメントの先頭にある文字を判別し、そこから種類を判別して表示色を決定します。対応するプログラミング言語は多岐にわたり、AdaやPascalといったものまでサポートされています。
図8は、Javaのコメントを色分け表示した例です。
Better Commentsでは、settings.jsonファイルで以下のような設定が可能です。
- better-comments.multilineComments：複数行コメントへ対応する場合true（既定）
- better-comments.highlightPlainText：コメントでないプレーンテキストへ対応する場合true（既定はfalse）
- better-comments.tags：コメント先頭の記号（「!」や「?」など）や色などをカスタマイズ
better-comments.tagsの既定の内容については、拡張機能「Better Comments」の［詳細］タブで「Configuration」の欄を参照してください。
プログラミング言語ごとの拡張機能
ビルトインでサポートされていないプログラミング言語では、言語ごとに用意された拡張機能をインストールすることで、コード補完やシンタックスハイライト表示、リファクタリングなどのコーディング支援機能が利用可能になるので、ぜひインストールしましょう。主な言語と、その拡張機能の一部を表2に挙げておきます。もちろん、拡張機能の検索機能で言語名を入力すれば探すことができます。
| 言語 | 拡張機能 |
|---|---|
| C/C++ | C/C++、C/C++ Extension Pack |
| C# | C#、C# Dev Kit |
| Go | Go、Go Nightly |
| Java | Extension Pack for Java、Debugger for Java |
| JavaScript | JavaScript and TypeScript Nightly |
| PHP | PHP Intelephense |
| Python | Python、Python Indent |
| React | ES7+React、Redux、React-Native snippets |
| Ruby | Ruby、Rails |
| Rust | rust-analyzer |
| Vue | Vetur |
［NOTE］言語サーバ
プログラミング言語のサポートは、言語サーバ機能の上に成り立っています。言語サーバプロトコル（LPS）として標準化されており、対応するエディタやCLIツール、拡張機能間で組み合わせて使うことができます。VSCodeは、バージョン1.7でほとんどの言語の拡張機能でLPS対応を果たしています。
