VSCodeをWebサイト開発用ツールに ―HTML／CSS／JavaScriptエディタとして強化しよう！
開発用エディタのド定番「VSCode」を使いこなそう 第5回
便利な拡張機能
冒頭で紹介してきたように、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をプログラミングエディタとして強化する設定と拡張機能を紹介します。
この記事は参考になりましたか？
既に会員の方はを行ってください。
- 開発用エディタのド定番「VSCode」を使いこなそう連載記事一覧
- この記事の著者
-
WINGSプロジェクト 山内 直（WINGSプロジェクト ヤマウチ ナオ）
＜WINGSプロジェクトについて＞有限会社 WINGSプロジェクトが運営する、テクニカル執筆コミュニティ（代表 山田祥寛）。主にWeb開発分野の書籍／記事執筆、翻訳、講演等を幅広く手がける。 2026年時点での登録メンバは約50名で、現在も執筆メンバを募集中。興味のある方は、どしどし応募頂きたい。著書、記事多数。 RSS X: @WingsPro_info（公式）、@WingsPro_info/wings（メンバーリスト） Facebook ＜個人紹介＞WINGSプロジェクト所属のテクニカルライター。出版社を経てフリーランスとして独立。ライター、エディター、デベロッパー、講師業に従事。屋号は「たまデジ。」。
※プロフィールは、執筆時点、または直近の記事の寄稿時点での内容です
-
山田 祥寛（ヤマダ ヨシヒロ）
静岡県榛原町生まれ。一橋大学経済学部卒業後、NECにてシステム企画業務に携わるが、2003年4月に念願かなってフリーライターに転身。Microsoft MVP for Visual Studio and Development Technologies。執筆コミュニティ「WINGSプロジェクト」代表。主な著書に「独習シリーズ（Java・C#・Python・PHP・Ruby・JSP＆サーブレットなど）」「速習シリーズ（ASP.NET Core・Vue.js・React・TypeScript・ECMAScript、Laravelなど）」「改訂3版JavaScript本格入門」「これからはじめるLaravel実践入門」「はじめてのAndroidアプリ開発 Kotlin編 」他、著書多数。
※プロフィールは、執筆時点、または直近の記事の寄稿時点での内容です
この記事は参考になりましたか？
この記事をシェア
