便利な拡張機能
冒頭で紹介してきたように、VSCodeが標準で備える機能だけでも、HTML／CSS／JavaScriptを効率よく入力することができます。ここでは、さらに便利度がアップする拡張機能をいくつか紹介します。
class属性やid属性を自動補完する（HTML CSS Support）
CSSセレクタに含まれるクラスやIDを、class属性やid属性の入力時に知ることができたら便利です。ecmelによるHTML CSS Supportをインストールすると、id属性とclass属性の入力局面でクラスとIDの補完機能を利用できます。先頭の数文字を入力するか、［Ctrl］＋［Space］を入力して、あとは一覧から選択するだけでよいので効率がアップしますし、入力ミスなども防止できます（図12）。
スタイルは、styleタグによる埋め込みでもlinkタグによる外部ファイルでも有効です。図のように、どこで定義されているものなのかも表示されるので、複数箇所でスタイルが定義されていても間違って引っ張ってくる可能性を下げられます。
class属性やid属性から定義を見る（CSS Peek）
HTMLタグにclass属性やid属性を付与していくとき、そのクラスやidにどのようなスタイルを定義しているのかがわかると便利です。そのようなときに使えるのが、Pranay PrakashによるCSS Peekです。CSS Peekをインストールすると、HTMLファイルに含まれるclass属性やid属性についてワークグループやフォルダ内から検索し、定義のあるCSSファイルを別のタブで開いたり（[F12]）、定義の内容をインライン表示して簡易的な編集機能を提供したり（図13、［Option］＋［F12］／［Alt］＋［F12］）、マウスポインタをホバーさせて定義をポップアップ表示させたり（［Ctrl］＋ホバー）することができます。
タグのペアを自動的に変更（Auto Rename Tag）
HTMLを編集していると、divタグをpタグに、spanタグをstrongタグになど、記述済みのタグを変更することがよくあります。このとき、ペアとなるタグの修正が漏れたりすることがありがちですが、これを自動修正することで漏れをなくすのがJun HanによるAuto Rename Tagです（同名の拡張機能があるので作者に注意してください）。
VSCodeでは、既定でタグのペアを強調表示しますが、Auto Rename Tagでも同様にタグのペアを追跡しており、開きタグ、閉じタグのいずれでも変更されたら、もう一方もリアルタイムに変更されます（図14）。
Auto Rename Tagの設定は、拡張機能のAuto Rename Tagから行えます。設定項目は一つだけで、処理対象となるファイルの種類の指定です。既定では「*」となっており、全てのファイルが処理対象となりますが、拡張子を列挙することで特定のファイルの種類にのみ処理対象を制限できます。なお、設定の変更はsettings.jsonファイルを直接書き換える方式です。
今回登場のショートカットキー
| 機能 | macOS | Windows |
|---|---|---|
| 選択範囲のフォーマット | [Command]＋[K] [Command]＋[F] | [Control]＋[K] [Control]＋[F] |
| 設定を開く | [Command]＋[,] | [Ctrl]＋[,] |
| open in browserでブラウザを開く | [Option]＋[B] | [Alt]＋[B] |
| open in browserでデフォルトブラウザを開く | [Shift]＋[Option]＋[B] | [Shift]＋[Alt]＋[B] |
| Open in Default Browserでブラウザを開く | [Command]＋[1] | [Control]＋[1] |
| Live Serverを起動する | [Command]＋[L] [Command]＋[O] | [Alt]＋[L] [Alt]＋[O] |
| Live Serverを停止する | [Command]＋[L] [Command]＋[C] | [Alt]＋[L] [Alt]＋[C] |
| HTML CSS Supportで候補を表示 | [Ctrl]＋[Space] | [Ctrl]＋[Space] |
| CSS Peekで定義をエディタで表示 | [F12] | [F12] |
| CSS Peekで定義をインライン表示 | [Option]＋[F12] | [Alt]＋[F12] |
まとめ
今回は、VSCodeをHTML／CSS／JavaScriptエディタとして強化する設定と拡張機能を紹介しました。
次回は、VSCodeをプログラミングエディタとして強化する設定と拡張機能を紹介します。
