基本的で便利な拡張機能
以降、VSCodeの利用目的にかかわらず有用と思われる拡張機能をいくつか紹介していきます（日本語化は基本的かつ有用なのですが、連載第1回で既出なので省きます）。ここで紹介するものに限らず、ほとんどの拡張機能は設定を細かく調整できます。拡張機能の詳細ページでの確認、VSCodeの管理アイコン
から入る設定変更の機能で、どのような設定が可能なのかの確認をお勧めします。
いろんなアイコンを使える―vscode-icons
VSCodeのエクスプローラーに表示されるフォルダとファイルには、既定で種類に応じたアイコンが付与されます。既定のアイコンでも十分に実用的ですが、フォルダにもいろいろなアイコンを付けたい！アイコンの見た目を少し華やかにして作業のモチベーションをアップしたい！ ときにはVSCode Icons Teamのvscode-iconsをインストールしましょう。インストールにより、アイコンの見た目がグッとカッコよくなります（図5）。
アイコンの変更はテーマの変更によって行われています。このvscode-iconsや後述するMaterial Icon Themeなど複数のアイコンをインストールした場合、どのアイコンを使用するかということを簡単に切り替えることができます。拡張機能vscode-iconsの詳細を表示させて［ファイル アイコンのテーマを設定］をクリックすると、その拡張機能のアイコンに切り替えられます。また、［表示］－［コマンドパレット］（［Command］＋［Shift］＋［P］／［Ctrl］＋［Shift］＋［P］）から「File Icon Theme」を入力しても、既定のアイコンや拡張機能のアイコンの中から切り替えることができます。拡張機能のアンインストールなどをせずに、既定のアイコンに戻せるので便利です。
いろんなアイコンを使える―Material Icon Theme
アイコンには、Philipp KiefのMaterial Icon Themeもあります。サポートされるアイコンの数がとにかく多いのが特徴です。テーマの変更についてはvscode-iconsと同じです。
ファイルを簡単に複製する―Duplicate action
VSCode上でファイルを複製するには、エクスプローラー上でコピー＋貼り付けの2段階のアクションが必要ですが、これを1個のアクションで済ませてしまおうというのがmrmlncによるDuplicate actionです。この拡張機能により、ファイルの複製は複製という1アクションで行えるようになります。
通常のコピーなどと同様に、複製したいファイルやディレクトリ上で右クリックし、メニューから［Duplicate file or directory］を選択します。ウインドウ上部に複製後のファイル名（フォルダ名）を入力する欄が表示されるので、適当に編集して［Enter］を押すと複製が実行されます（図7）。
通常の手順では、同じフォルダに複製すると「copy」と付いた新しいファイル名（フォルダ名）となり、この名前を変更するというもう1アクションが必要になることもありますが、この手順も含めて一度に済ませることができるので便利です。
改行文字を表示する―code-eol
VSCodeの仕様では、改行文字を表示することはできません。このため、改行文字の違いにすぐに気が付かなかったり、行末に余計な空白がぶら下がっていても気付きにくいことがあります。このようなときにsohamkamaniによるcode-eolをインストールすると、改行の種類に応じて異なった改行文字を表示してくれるので便利です。
改行文字の種類は、Unix形式（\n）、Windows形式（\n）、macOS形式（\n）を識別し、それぞれ異なった文字で表示してくれます（ただしmacOS形式については、VSCodeによる読み込み時にWindows形式に変換されるので、表示上の区別はないようです）。
なお、作者の異なる同名の拡張機能があるので、インストールの際には注意してください。
行末の空白を除去する―Trailing Spaces
ほとんどのプログラミング言語では行末の空白文字は意味を持ちません。とは言え、入力ミス、消し忘れなどで行末に空白が入ってしまうことがあります。行末に空白が残っていても、プログラムのコンパイルや実行には差し支えはありませんが、共同開発でバージョン管理などを行っている場合には要注意です。見た目に違いはなくても、行末の空白文字のせいで異なるファイル、異なる行として認識されてしまうからです。なので、ソースコードを提出する際には、余計な空白文字の削除が望まれます。
このようなときに便利なのが、hardul MahadikのTrailing Spacesです。この拡張機能は、行末の余計な空白文字を強調表示したり、除去したりする機能を持っています。空白文字がかなり暗めのボックスと枠で表示されるので、見た目にも気持ち悪いため削除したくなるでしょう。
既定では、空白文字を半角スペース、タブ文字としていますが、正規表現によるカスタマイズも可能です。
スペルチェックする―Code Spell Checker
スペルミス（typo）はできるだけ避けたいものですが、このようなときに役立つのがStreet Side SoftwareのCode Spell Checkerです。一般的なスペルチェッカーは、テキストなどに含まれる英単語のスペルをチェックするものですが、Code Spell Checkerの特記すべきところは、入力済みのテキストのスペルチェック（怪しいところには波線が引かれる）に加えて、リアルタイムでのスペルチェックも行ってくれるということです。これに加えて、変数名などの識別子のように複数の英単語によって構成される（キャメルケースなど）場合も、英単語を検出してミスがあるようなら指摘してくれます。プログラミング言語も、メジャーなものなら基本的に対応しています。
メッセージ類にtypoがあれば恥ずかしいですし、ソースコードも公開するのが普通の世の中ですから、ここはしっかりとチェックしてtypoのない変数名やコメントにしたいものです。
なおCode Spell Checkerには、各国語の辞書が別途用意してあるので、利用したい言語に合わせた辞書の拡張機能を合わせてインストールすることで、スペルチェックの精度を上げることが可能です（標準は英語のみ）。
インデントを見やすくする―indent-rainbow
VSCodeの既定では、インデント位置を示すラインが薄いグレーで引かれるのみです。これを、インデントレベルに応じて異なった色で表示してくれるのがoderwatのindent-rainbowです。この拡張機能によって、いつの間にかインデントがズレていたとか、きちんとした対応になっていなかったとかいうことが防げるでしょう。
インデントの表示タイプには2つあって、VSCode既定のようなLight Style、それとClassic Style（既定）です。インデントレベルで異なった色になるので、Classic Styleの場合にはそれこそrainbow（虹）のようになります（図11）。インデントが深くなると両者ともに色の濃い帯のようになり、深いインデントへの警告のようにもなります。
今回登場のショートカットキー
| 機能 | macOS | Windows |
|---|---|---|
| 拡張機能一覧を開く、詳細へ移動する | ［Shift］＋［Command］＋［X］ | ［Shift］＋［Ctrl］＋［X］ |
| File Icon Themeの呼び出し ［Command］＋［Shift］＋［P]］［Ctrl］＋［Shift］＋［P］ | ［Command］＋［Shift］＋［P］ | ［Ctrl］＋［Shift］＋［P］ |
まとめ
今回は、VSCodeの特徴である豊富な拡張機能の利用について、拡張機能の情報の見方、拡張機能の探し方、インストールや管理などの方法、基本的で役に立ついくつかの拡張機能を紹介しました。
次回は、VSCodeをHTML／CSS／JavaScriptエディタとして強化する設定と拡張機能を紹介します。
