全5303文字
PR

 「Visual Studio Code」(VSCode)はMicrosoftが開発している高機能コードエディターです。今回は、プログラムの記述をスムーズにしてくれるコーディング支援の拡張機能を紹介していきます。

 早速、入力単語の候補を出してくれるような「コード補完」の拡張機能から解説したいところですが、実は、VSCodeにはデフォルトで「IntelliSense」というコード補完の機能が備わっています。デフォルトのIntelliSenseでは、JavaScript、TypeScript、JSON、HTML、CSSなどの言語に対応していて、コードを途中まで入力すると候補を表示してくれます。図5では、「add」と途中まで打つだけで「addText」と「addition」という関数名の候補が表示されているのがわかります。

図5●JavaScriptのコードを途中まで入力すると関数名の候補が表示される
図5●JavaScriptのコードを途中まで入力すると関数名の候補が表示される
[画像のクリックで拡大表示]

 ほかのプログラミング言語でも単語の候補は表示されますが、プログラミング言語別の「言語拡張機能」をインストールすることで、より豊富なコード補完ができるようになります。各言語の「言語拡張機能」は「Python」「C/C++」「C#」「Extension Pack for Java」などで検索するとマーケットプレイスからインストールできます。

 ここからは、筆者が使って特に便利だと思う機能を取り上げていきます。

 表1に、コーディングを支援してくれる定番の拡張機能をまとめました。1~6番は、英単語のスペルやファイルパスの入力を補完したり、コードを見やすく色付けしたりする拡張機能で、インストールするだけですぐに便利になります。7番と8番は、簡単なデバッグがしやすくなる機能なので、使い方を解説します。9番は、コードの自動整形ツールで、活用するためには設定が必要です。インストール後の設定方法を説明します。では、順番に各拡張機能の特徴やメリットを紹介していきます。

表1●コーディングを支援する拡張機能
表1●コーディングを支援する拡張機能
[画像のクリックで拡大表示]

【1】 Code Spell Checker

 その名の通り、コードのスペルチェックを行ってくれます。英語のスペルが間違っているときに単語に波線が付き、マウスをホバーすると指摘が表示されます(図6)。ここでは「applee」というスペルミスが指摘されました。「クイックフィックス」をクリックすると修正案が表示され、その中から正しいスペルの単語を選べます。英語が得意でもうっかりミスすることはあるのでインストールしておくと便利です。

図6●スペルが間違っていると指摘される
図6●スペルが間違っていると指摘される
[画像のクリックで拡大表示]

【2】 Path Autocomplete

 ファイルパスを補完してくれる拡張機能です。モジュールやクラスをインポートするときにファイルパス名の候補が表示され、選択するだけで入力できます。プロジェクトが大きくなってファイルが増えてきたときに便利です。

【3】 Auto Rename Tag

 HTMLやXMLのペアタグを同時に編集できる拡張機能です。開始タグ<div>と終了タグ</div>のようなHTMLタグのペアが記述されている場合に、開始タグもしくは終了タグを編集するとそのペアとなるタグも同時に修正されます。どちらか片方を変更するだけで両方が編集されるので修正忘れがなくなり、記述速度が一気に上がります。