【2026年版】Web制作がはかどるVS Code拡張機能の厳選まとめ

Web制作
PCモニターとキーボードとタブレット

VS Codeの拡張機能は便利ですが、気になったものを片っ端から入れていくと、起動が重くなったり、設定が混乱したりしがちです。Web制作の仕事を25年ほど続けてきて行き着いたのは、「全部盛りより厳選」という考え方でした。

この記事では、2026年の現在も私が実務で実際に使っているVS Code拡張機能を、Web制作（HTML・CSS・JavaScript）向けに絞って紹介します。

紹介する拡張は、それぞれ公式マーケットプレイスで「今もメンテナンスが続いているか」「VS Code本体に同じ機能が入って拡張が不要になっていないか」を確認したうえで選びました。

拡張機能を選ぶときの3つの考え方

具体的な拡張の前に、私が入れるかどうかを判断するときの基準を3つだけ共有します。これを持っておくと、新しい拡張を見つけたときにも迷いません。

1. 役割がかぶるものは1つに絞る

同じことができる拡張を2つ入れても、片方の出番がないだけでなく、補完候補が二重に出たり動作が競合したりします。「この役割はこれ」と決めて1つに絞るのがおすすめです。

2. VS Code本体の標準機能で足りないか先に確認する

VS Codeは毎年のように機能が増えていて、かつては拡張で補っていたことが本体だけでできるようになった例がいくつもあります。入れる前に「これ、標準でできないかな？」と一度考えるクセをつけると、拡張の数を抑えられます。

3. メンテナンスが続いているかを見る

マーケットプレイスのページで、更新が止まっていないか、極端に古くないかを確認します。長く更新されていない拡張は、VS Code本体の変化に追いつけず不具合の原因になることがあります。

まず入れたい定番（コードを書く・整える）

Prettier – Code formatter（コード整形の定番）

保存したときにHTML・CSS・JavaScriptなどのコードを自動で整えてくれるフォーマッターです。インデントや改行のルールを自動で揃えてくれるので、見た目のばらつきに悩まなくなります。複数人で作業するときはもちろん、一人で書くときも整形が一定になるのは気持ちのいいものです。

publisherは「Prettier」で、現在も活発に更新されています。Web制作なら最初に入れて間違いない一本です。

ESLint（JavaScriptの間違いを早めに見つける）

JavaScript／TypeScriptを書く人向けに、コードの問題点やバグになりそうな箇所を指摘してくれる拡張です。Microsoftが提供しており、メンテナンスも継続しています。

よく「PrettierとESLintはどちらを使えばいい？」と聞かれますが、役割が違うので併用が基本です。見た目の整形はPrettier、コードの品質チェックはESLint、と覚えておくとすっきりします。両方使うときは、整形ルールはPrettierに任せる設定にしておくと衝突しません。

確認・プレビューを速くする

Live Preview（保存して即プレビュー／Microsoft公式）

編集中のHTMLを、VS Codeのタブの中やブラウザですぐにプレビューできる拡張です。保存するたびに自動で反映されるので、「コードを書く→ブラウザで確認」の往復がぐっと短くなります。Microsoft公式の拡張で、開発も続いています（執筆時点ではプレリリース版として配信されています）。

同じ用途では、昔から定番だった「Live Server」（Ritwick Dey氏）を使ってきた方も多いと思います。こちらも今なお広く使われていますが、更新の動きは落ち着いている印象です。これから新しく入れるなら、本体との統合が進んでいる公式のLive Previewを私はおすすめします。なお、ReactやVueなど独自の開発サーバーを持つフレームワークでは、そちらのプレビュー機能を使うのが基本です。

Path Intellisense（ファイルパスの入力補完）

画像やCSSファイルのパスを書くときに、フォルダ構成を見ながら候補を出してくれる拡張です。../ をたどる場面が多いWeb制作では、タイプミスによるリンク切れを減らせます。地味ですが、毎日効いてくるタイプの便利さです。

使う人には効く（条件つきでおすすめ）

Tailwind CSS IntelliSense（Tailwindを使うなら必須）

Tailwind CSSを使う場合に、クラス名の補完や、クラスにマウスを乗せたときの内容プレビューをしてくれる拡張です。提供元はTailwind Labsで、メンテナンスも継続しています。Tailwindを使わない人には不要ですが、使う人にとっては入れない理由がないくらい便利です。自分の制作スタイルに合わせて判断してください。

Auto Rename Tag（ただし本体機能と相談）

開始タグを書き換えると、対になる終了タグも自動で合わせて変えてくれる拡張です。便利なのですが、ここは少し注意が必要です。VS Code本体にも、同じことができる「タグの同時編集」機能（設定 editor.linkedEditing）が標準で用意されています。HTMLを書くだけなら本体機能で足りることが多く、拡張自体もこの設定が有効なときはHTMLでの動作を本体に譲るようになっています。

JSXなど、本体機能の対象外まで幅広くカバーしたい場合は拡張を入れる価値があります。「まず本体機能を試して、物足りなければ拡張」という順番がおすすめです。

GitLens（履歴や変更を追う中級者向け）

各行が「いつ・誰によって・なぜ変更されたか」を表示してくれるなど、Gitの情報をVS Code上で見やすくする拡張です。一人の制作でも「この記述いつ入れたんだっけ？」を追いやすくなりますし、チーム作業ではさらに効きます。Gitに慣れてきた中級者の方は、入れておくと作業の見通しがよくなります。

実はもう要らないかも？本体機能で足りるもの

最後に、「昔は拡張で入れていたけれど、今はVS Code本体だけでできること」をまとめておきます。新しく入れる前に、まずこちらを確認してみてください。

  • Emmet（省略記法によるHTML/CSSの高速入力）：VS Codeに標準搭載されています。ul>li*5 のような記法から一気に展開できます。拡張を入れる必要はありません。
  • 角かっこ（ブラケット）の色分け：本体に標準搭載されました（設定 editor.bracketPairColorization.enabled）。かつて定番だった「Bracket Pair Colorizer」は、本体への統合にともない役目を終えています。
  • CSSの色プレビュー：CSSやSCSSでカラーコードの隣に色見本が表示される機能は標準でついています。
  • タグの同時編集：前述の editor.linkedEditing で、開始・終了タグの同時書き換えができます。

まとめ：迷ったら「毎日触るか」で決める

拡張機能は数を競うものではなく、自分の制作フローに本当に効くものだけを残すのがコツです。迷ったときは、「自分のWeb制作で毎日のように使うか？」を基準にすると判断しやすくなります。

まずはPrettierとLive Previewあたりから入れてみて、必要に応じて足していく。役割がかぶるものや本体で足りるものは思い切って外す。この引き算の姿勢が、軽くて快適なVS Code環境につながります。

出典

VS Code Web制作

関連する記事