【2024年版】Web制作におすすめのVSCode拡張機能16選

数あるVSCode拡張機能の中でも、Web制作コーダーに絶対に使って欲しい拡張機能を厳選して紹介します。
（Web制作に限らず、フロントエンドのマークアップを行う方に役立つ内容になっています）

VSCode（Visual Studio Code）は常に進化しており、昔は人気だった拡張機能が現在は非推奨になっているケースも多いため、おすすめ拡張機能の紹介記事を見る際は注意が必要です。
この記事では、2024年の最新版の情報を元に、必要性の高い拡張機能を紹介しています。

それぞれのプラグインの紹介部分では、主観的な“重要度”を星5つで評価しているので、ご自身のVSCodeに導入するかどうかの判断材料にしてみてください。（もちろん、全て導入してしまっても問題ありません）

基本：VSCode全体を使いやすくする拡張機能

VSCodeの基本的な設定を変更するための拡張機能です。

Japanese Language Pack for Visual Studio Code

概要：VScodeの日本語化
重要度：

VSCode内で使用されている言語は、初期状態だと英語になっています。
これを日本語に変更するために必要な拡張機能が、「Japanese Language Pack for Visual Studio Code」です。

英語の方がわかりやすいという方を除けば、真っ先にインストールしておくべき拡張機能です。
（インストール後にVSCodeの再起動が必要です）

vscode-icons

概要：ファイル・フォルダ名の前にアイコン表示
重要度：

ファイル名やフォルダ名の前にアイコンを表示し、視覚的にわかりやすくします。
規模の大きいプロジェクトでは大量のファイルを扱い、フォルダ構造も複雑になりやすいため、アイコンがあることで目的のファイルを探しやすくなるでしょう。

初期状態でもファイル単位ではアイコン表示されますが、vscode-iconsを導入することで、フォルダ単位でもアイコン表示され、見た目がさらにわかりやすくなります。

効率化：コーディング速度を上げる入力補助の拡張機能

コードの入力を補助することで、キーボード入力の手間を削減し、コーディング効率を高めてくれる拡張機能です。

Auto Rename Tag

概要：タグを変更したときに対応するもう片方のタグも自動的に変更
重要度：

HTMLで使用するタグの多くは、<p>〜</p>のように、開始タグと終了タグで囲います。
Auto Rename Tagを導入すると、開始タグか終了タグのどちらかを変更した際に、対応するもう片方のタグも連動して変更されるようになります。

ペアのタグを探して変更する手間が省けるので時短になるのと同時に、タグの不一致によるエラーを未然に防ぐことが出来ます。

HTML CSS Support

概要：class名の入力候補を補完
重要度：

HTMLファイル内でclass名を入力する際に、CSS側で定義されているclass名の候補を表示してくれる機能です。
HTMLのコーディングでは同じclass名を使い回すことも多いので、こういった補完機能があると作業効率が圧倒的に良くなります。

インストール直後はHTML CSS Supportが効かない

以前までは、HTML CSS Supportをインストールしただけで、HTMLファイルが読み込んでいるCSSのclass名候補が表示されていました。

しかし、最新バージョンでは、入力補完を適用するCSSファイルのパスを指定する必要があります。
詳しい設定方法については以下の記事をご覧ください。

視認性UP：コードを見やすくする拡張機能

色づけ等によってコードをより見やすくしてくれる拡張機能です。
コード自体には変更は加えず、あくまでも画面の視認性を上げるものになります。

indent-rainbow

概要：インデントを色分けして見やすくする
重要度：

インデントに色を付けることで、コードの構造を視覚的にわかりやすくしてくれます。

初期設定での表示は下画像のようになります。

もう少し落ち着いた配色にしたい方は、拡張機能の設定で「Indent Rainbow: Indicator Style」を「light」に変更すると、下画像のようにインデントのボーダー部分のみ色が付きます。

TODO Highlight

概要：TODOのコメントを色付けで強調
重要度：

コーディングの際、一時的に実装を保留にしている箇所や、後に修正が必要になる箇所にコメントを残すことがありますが、通常のコメントの文字色は目立たないので、見落としてしまうリスクがあります。

TODO Highlightを導入することで、コメント内のTODO:もしくはFIXME:の文字をハイライトしてくれます。

このように強調表示されることで、まだ作業が必要な箇所を一目で確認することが可能です。
デフォルトでhtml, css (scss), js, php形式のファイルに対応しています。

使い方も簡単で、拡張機能をインストールし、コメント内にTODO:またはFIXME:と記述するだけです。
（末尾のコロン:を忘れずに）

Svg Preview

概要：SVG画像のプレビューを表示
重要度：

通常、VSCodeで画像ファイルを開くとプレビューが表示されますが、SVG形式の画像の場合はベクターデータであるコードが表示され、画像のプレビューは確認できません。

Svg Previewを導入することで、SVGファイルを開いた時にもプレビューが表示されるようになります。
また、SVGファイル内のコードを変更した際に、プレビューがリアルタイムで更新されます。

初期状態では、SVGファイルを開いた際に自動でプレビューが表示されるようになっています。
確認したい時にだけプレビューを表示させるには、拡張機能の設定で「Svg Preview: Auto Open」をオフにします。

プレビューの自動表示をオフにした場合、SVGファイルを開いた際の右上の稲妻マークをクリックするとプレビューが表示されます。

エラー防止：構文チェックや修正を行う拡張機能

コードの検査を行い、エラー箇所を指摘したり、規約に基づいてコードを修正してくれる拡張機能です。
コードの品質や信頼性を保つ上で欠かせません。

Prettier – Code formatter

概要：ファイル保存時にコードを自動的に整形
重要度：

Prettierは、ソースコードを自動的に見やすく整形してくれるコードフォーマッターの１つです。

例えば、こんなにぐちゃぐちゃに書いたコードでも、

Prettierを使えば、一瞬でコードを見やすく整えてくれます。

このような、コードを見やすくするための整形は、一々手作業で行うのは非効率な上、人為的ミスも起きやすいので、ツールで自動化してしまうことをおすすめします。また、コードのフォーマットにルールが設けられることで、プロジェクト全体でコードの書き方が統一され、可読性の向上やチーム制作の規格化にも効果的です。

Prettierを使用するための方法は色々ありますが、VSCodeの拡張機能「Prettier – Code formatter」を使うことで、VSCodeで簡単にPrettierの機能を使うことが出来ます。

Prettier – Code formatterはインストール後の初期状態だと、コードの整形を手動で指示する必要があります。
ファイル保存時に自動でコードを整形させるための設定方法は、以下の記事で詳しく解説しています。

HTMLHint

概要：HTML構文のチェックとエラー表示
重要度：

HTMLの構文をチェックし、書き方がおかしい箇所を指摘してくれる拡張機能です。

開始タグと終了タグが一致しない等、問題のある箇所を黄色の波線で強調表示します。
また、問題のある箇所と内容を画面下側にリスト表示してくれるので、どこをどう修正すれば良いかが一目でわかります。

前述したPrettierを導入している場合、Prettierのエラーログにも問題点が表示されますが、長いエラーログを読み解かなくてはいけません。HTMLHintは修正箇所をピンポイントで指摘してくれるので、Prettierはあくまで自動整形用として捉え、HTMLHintも合わせて導入することをおすすめします。

CSSTree validator

概要：W3Cに基づいたCSSの構文チェック
重要度：

W3Cのコーディング規約に基づいてCSSのチェックを行い、書き方に問題のある箇所を指摘します。

下画像は、font-sizeの値の書き方が間違っている（この場合、単位が抜けている）ことを検知し、問題のある箇所を黄色の波線で強調表示している例です。

CSSはPHPなどのプログラミング言語と違い、書き方がおかしい箇所があったとしてもエラーが出ません。
そのため、コードの問題点を瞬時に見つけやすくするためにも、こういった拡張機能を導入しておくと良いです。

Code Spell Checker

概要：コード内のスペルミスをチェック
重要度：

コーディングでは膨大な量の英単語を扱うので、文字の打ち間違えはどうしても発生してしまうものです。
そんな時、Code Spell Checkerを導入していれば、ミスをいち早く発見できます。

Code Spell Checkerは、英単語のスペルミスを検知し、間違えている可能性のある単語を青の波線で強調表示します。

エラーの原因探しに非常に時間を使ったが、原因はただのスペルミスだったという経験はないでしょうか？
貴重な時間を無駄にしないためにも、この拡張機能を導入しておくことを推奨します。

ちなみに、青の波線部分は絶対に修正が必要というわけではありません。
人名などの固有名詞もスペルミスとして誤検知される場合があるので、あくまでもミスに気づきやすくするための補助として捉えると良いです。

Trailing Spaces

概要：無駄なスペース・タブの検出
重要度：

コード内の必要ないスペースやタブをハイライト表示してくれます。

このような無駄なスペース・タブは思わぬ不具合や表示崩れを招く可能性があるので、拡張機能を導入して発見しやすくし、削除するようにした方が良いです。
（前述したPrettierを導入している場合は、このような不要なスペースも自動で排除してくれます）

環境構築：作業環境を簡単に構築できる拡張機能

本来は面倒であるサーバーの起動やコンパイル環境の構築を、VSCode上で簡単に実行してくれる拡張機能です。

Live Server

概要：ローカルサーバーの簡単起動＆ファイル変更時にブラウザを自動リロード
重要度：

HTMLで作成した静的サイトの場合、ファイルを直接ブラウザで開いて表示確認する方法もありますが、可能な限りローカルサーバー上で表示確認することを強く推奨します。

Live Serverはローカルサーバーをとても簡単に起動できる拡張機能で、以下のメリットがあります。

• ファイルを変更して保存すると、自動でページを再読み込み（ホットリロード）してくれる
• 実際にサーバー上に公開した場合と近い状況で表示確認できる
• ローカルサーバーの内容を、手元のスマホなどの別デバイスでも確認できる

特にホットリロードは作業効率を格段に高めてくれるので、欠かせない機能です。

Live Serverの使い方

拡張機能をインストールすると、VSCode下部のツールバーに「Go Live」というボタンが追加されています。
確認したいページのhtmlファイルを開いた状態で、「Go Live」ボタンをクリックします。

すると、ローカルサーバーが立ち上がり、自動的にブラウザ上にページが表示されます。
その後は、ファイルを更新する度にページが自動で再読み込みされます。

「Go Live」は「Port: ○○○○」に切り替わっており、もう一度ここをクリックするとサーバーが終了します。

ローカルサーバーに表示している内容は、手元のスマホなどの別デバイスで確認することも可能です。
詳しいやり方は以下の記事で解説しているので、是非参考にしてください。

Live Sass Compiler

概要：sass, scssファイルのコンパイル
重要度：

Sassファイルのコンパイルを行うには、npmやgulpを使用するなど様々な方法がありますが、
Live Sass Compilerを使えば、難しい設定や環境構築をすることなく、Sassのコンパイルが可能になります。

※ 現在はDart Sassに対応しています

少し前まで「Live Sass Compiler」はDart Sassに対応していなかったため、現在でも非推奨と解説している記事が多く見受けられます。

しかし、2024年現在はDart Sassに完全対応しているので、問題なく使用することが可能です。
（正確には、開発が停止したLive Sass Compilerを別の開発者が引き継ぎ、Dart Sassに対応した同名の拡張機能をリリースしています）

検索すると同名の拡張機能が出てきますが、Glenn Marks氏が開発者になっている方を選択してください。

個人的には他の選択肢としてよく挙げられる「DartJS Sass Compiler and Sass Watcher」等よりも使いやすいので、「Live Sass Compiler」の方をおすすめします。

WordPress案件におすすめの拡張機能

WordPressのテーマファイルを編集する際に便利な拡張機能です。

PHP Intelephense

概要：PHPコードの入力補完や構文チェック
重要度：

PHP関数などの入力候補を表示したり、書き方に問題のある箇所を指摘したりなど、PHPを書く際に便利な機能が豊富です。
PHPでコードを書くなら入れておきたい拡張機能です。

デフォルトではWordPress関数に対応していませんが、拡張機能の設定を変更することで、WordPress関数の入力補助機能を使うことが可能です。

その設定方法を以下で解説します。

WordPress関数の入力補助機能を追加する方法

まずは、①左サイドメニューの拡張機能タブを開く → ②インストール済み拡張機能の中から「PHP Intelephense」を探し、右側の歯車マークをクリック → ③「拡張機能の設定」を選択します。

設定画面が開くので、下にスクロールしていき、「Intelephense: Stubs」という項目を探します。

「Intelephense: Stubs」の最下部にある[項目の追加]をクリックし、選択欄から「wordpress」を選んで[OK]を押してください。

以上で設定は完了です。
WordPress関数は名前が長いものが多く、一々手作業で入力するのは非常に手間なので、こういったショートカット機能があると大幅に時短になります。

ACF-Snippet

概要：Advanced Custom Fields用のコードスニペット
重要度：

カスタムフィールドを実装するためにプラグインのAdvanced Custom Fieldsを使用する機会は多いと思います。
ACF-Snippetを導入することで、Advanced Custom Fieldsで使用する出力コードを素早く入力することが可能です。

基本の使い方としては、phpファイル内でfieldと入力するとACF-Snippetのスニペットが表示されるので、そのままEnterを押すだけです。

2024年現在はインストール不要の拡張機能

以下の拡張機能は他の解説記事などでおすすめされていることが多いですが、現在はVSCodeに同様の機能がはじめから備わっているため、追加でインストールする必要性は薄いです。

• Bracket Pair Colorizer 2
• Path Autocomplete
• zenkaku

既にインストール済みのものがあったら、VSCode標準機能への乗り換えを検討してみてください。

Bracket Pair Colorizer 2

「Bracket Pair Colorizer 2」は、ペアになっている括弧を色分けして見やすくする拡張機能ですが、最新版のVSCodeで同様の機能が使えるため、インストールは不要です。

デフォルトでは括弧の色分け機能が無効になっているので、有効化するには以下の設定変更を行います。

VSCode標準の括弧色分け機能を有効化する方法

VSCode画面左下の歯車マークをクリック → [設定]を選択します。

設定画面が開いたら、検索欄にbracketと入力し、「Editor › Bracket Pair Colorization: Enabled」の項目にチェックを入れて有効化します。

以上で設定は完了です。

Path Autocomplete

「Path Autocomplete」はファイルパスなどを入力する際に、フォルダやファイル名の候補を補完する拡張機能ですが、現在はVSCodeに同様の機能が標準で備わっています。（VSCode側での設定は必要ありません）

パス補完用の拡張機能を追加すると、VSCode標準の機能と重複して入力候補が2重に表示されてしまうので、特別な理由がなければインストールは不要です。

zenkaku

「zenkaku」は不具合の原因になりやすい全角スペースを検出してハイライトする拡張機能ですが、こちらも現在はVSCodeに同様の機能が標準搭載されているので、インストールする必要性は薄いです。

最新版のVSCodeでは、全角スペース文字を以下の画像のように黄色くハイライトしてくれます。
（VSCode側での設定は必要ありません）

まとめ

Web制作におすすめのVSCode拡張機能を紹介しました。

拡張機能を使いこなすことで、コーディング作業をより効率的に行うことが出来るようなり、記述ミスが減ってコードの品質も高まります。

この機会にVSCodeを使いやすくカスタマイズしてみてください。