VS Codeの拡張機能はとても便利ですが、気になったものを片っ端から入れていくと、起動がじわじわ重くなったり、補完候補が二重に出て設定がこんがらがったりしがちです。「入れたはいいけど、これ何のために入れたんだっけ？」という拡張が、いつの間にか一覧にずらりと並んでいた経験はありませんか。
Web制作の仕事を長く続けてきて私が行き着いたのは、「全部盛りより厳選」という考え方でした。数を増やすほど便利になるわけではなく、むしろ本当に効く数本だけを残したほうが、動作も頭の中もずっと軽くなります。
この記事では、私が今も実務で毎日のように使っているVS Code拡張機能を、Web制作（HTML・CSS・JavaScript）向けに絞って紹介します。単に有名なものを並べるのではなく、どんな場面で効くのか、なぜそれを選んだのかという実務目線の理由もあわせてお伝えします。
紹介する拡張は、公式マーケットプレイスで「今もメンテナンスが続いているか」「VS Code本体に同じ機能が取り込まれて拡張が不要になっていないか」を一つずつ確認したうえで選びました。更新が止まった拡張や、役目を終えた拡張はあえて外しています。読み終えるころには、自分の制作フローに合った拡張だけをすっきり残せるはずです。
拡張機能を選ぶときの3つの考え方
具体的な拡張の前に、私が入れるかどうかを判断するときの基準を3つだけ共有します。この物差しを持っておくと、新しい拡張を見つけたときにも「入れるか、見送るか」で迷わなくなります。
1. 役割がかぶるものは1つに絞る
同じことができる拡張を2つ入れても、片方の出番がないだけでなく、補完候補が二重に表示されたり、動作が競合して原因不明の不具合につながったりします。「この役割はこれ」と1つに決め打ちするのが、トラブルを避ける一番の近道です。似た拡張を見つけたら、まず今使っているもので足りないかを考えてみてください。
2. VS Code本体の標準機能で足りないか先に確認する
VS Codeは毎月のように機能が増えていて、かつては拡張で補っていたことが本体だけでできるようになった例がいくつもあります。入れる前に「これ、標準でできないかな？」と一度考えるクセをつけるだけで、拡張の数はぐっと抑えられます。本体機能なら競合の心配もなく、動作も軽いのがうれしいところです。
3. メンテナンスが続いているかを見る
マーケットプレイスのページで、最終更新が止まっていないか、極端に古くないかを確認します。長く放置された拡張は、VS Code本体の変化に追いつけず、ある日突然動かなくなることがあります。ダウンロード数の多さだけでなく、更新が生きているかまで見ておくと安心です。
まず入れたい定番（コードを書く・整える）
ここからは実際の拡張を紹介します。最初は、Web制作をするならほぼ全員に効く、コードそのものを書いて整えるための2本です。
Prettier – Code formatter（コード整形の定番）
保存したときに、HTML・CSS・JavaScriptなどのコードを自動で整えてくれるフォーマッターです。インデントや改行、引用符のルールを機械的に揃えてくれるので、見た目のばらつきに悩まなくなります。複数人で作業するときはもちろん、一人で書くときも整形が常に一定になるのは、想像以上に気持ちのいいものです。
「どう書くか」を考える手間が減り、書く内容そのものに集中できるのが最大の利点です。設定は editor.formatOnSave を有効にして、既定のフォーマッターにPrettierを指定しておくだけで動き出します。
LINK：Prettier – Code formatter（公式マーケットプレイス）
publisherは「Prettier」で、現在も活発に更新されています。Web制作なら最初に入れて間違いない一本です。
ESLint（JavaScriptの間違いを早めに見つける）
JavaScriptやTypeScriptを書く人向けに、コードの問題点やバグになりそうな箇所を、書いているそばから指摘してくれる拡張です。Microsoftが提供していて、メンテナンスも継続しています。実行して初めて気づくようなミスを、エディタ上で赤い波線として先に教えてくれるので、後戻りが減ります。
よく「PrettierとESLintはどちらを使えばいい？」と聞かれますが、役割が違うので併用が基本です。見た目の整形はPrettier、コードの品質チェックはESLint、と覚えておくとすっきりします。両方を使うときは、整形ルールはPrettierに一本化する設定にしておくと、お互いの指示がぶつかりません。
LINK：ESLint（公式マーケットプレイス）
確認・プレビューを速くする
次は、書いたコードをブラウザで確かめる往復を短くしてくれる拡張です。この往復こそ制作中にいちばん回数の多い作業なので、ここが速くなると体感がぐっと変わります。
Live Preview（保存して即プレビュー／Microsoft公式）
編集中のHTMLを、VS Codeのタブの中やブラウザですぐにプレビューできる拡張です。保存するたびに自動で反映されるので、「コードを書く→ブラウザに切り替えて確認→戻る」という往復がぐっと短くなります。Microsoft公式の拡張で、開発も続いています（執筆時点ではプレリリース版として配信されています）。
同じ用途では、昔から定番だった「Live Server」（Ritwick Dey氏）を使ってきた方も多いと思います。こちらも今なお広く使われていますが、更新の動きは落ち着いている印象です。これから新しく入れるなら、本体との統合が進んでいる公式のLive Previewを私はおすすめします。なお、ReactやVueなど独自の開発サーバーを持つフレームワークでは、そちらのプレビュー機能を使うのが基本になります。
LINK：Live Preview（公式マーケットプレイス）
Path Intellisense（ファイルパスの入力補完）
画像やCSSファイルのパスを書くときに、フォルダ構成を見ながら候補を出してくれる拡張です。../ をいくつもたどる場面が多いWeb制作では、タイプミスによるリンク切れや画像切れをぐっと減らせます。派手さはありませんが、毎日じわじわ効いてくるタイプの便利さで、一度慣れると手放せません。
LINK：Path Intellisense（公式マーケットプレイス）
使う人には効く（条件つきでおすすめ）
ここからは、制作スタイルによって要否が分かれる拡張です。全員に必須ではないぶん、当てはまる人にはとことん効きます。自分の作り方に合うかで判断してください。
Tailwind CSS IntelliSense（Tailwindを使うなら必須）
Tailwind CSSを使う場合に、クラス名の補完や、クラスにマウスを乗せたときの内容プレビュー、色の見本表示までしてくれる拡張です。提供元はTailwind Labsで、メンテナンスも継続しています。膨大なユーティリティクラスを覚えきらなくても、候補から選ぶだけで書き進められるのが強みです。Tailwindを使わない人には不要ですが、使う人には入れない理由がないくらい便利な一本です。
LINK：Tailwind CSS IntelliSense（公式マーケットプレイス）
Auto Rename Tag（ただし本体機能と相談）
開始タグを書き換えると、対になる終了タグも自動で合わせて変えてくれる拡張です。便利なのですが、ここは少し注意が必要です。VS Code本体にも、同じことができる「タグの同時編集」機能（設定 editor.linkedEditing）が標準で用意されています。HTMLを書くだけなら本体機能で足りることが多く、拡張自体もこの設定が有効なときはHTMLでの動作を本体に譲るようになっています。
JSXなど、本体機能ではカバーしきれない範囲まで広く対応したい場合は、拡張を入れる価値があります。「まず本体機能を試して、物足りなければ拡張を足す」という順番がおすすめです。
LINK：Auto Rename Tag（公式マーケットプレイス）
GitLens（履歴や変更を追う中級者向け）
各行が「いつ・誰によって・なぜ変更されたか」を表示してくれるなど、Gitの情報をVS Code上で見やすく重ねてくれる拡張です。一人の制作でも「この記述、いつ入れたんだっけ？」を追いやすくなりますし、チーム作業ではさらに効きます。Gitに少し慣れてきた中級者の方は、入れておくと作業の見通しがよくなります。逆にGitをまだ使っていない段階では、情報量が多く感じるかもしれません。
LINK：GitLens（公式マーケットプレイス）
実はもう要らないかも？本体機能で足りるもの
最後に、「昔は拡張で入れていたけれど、今はVS Code本体だけでできること」をまとめておきます。心当たりのある拡張が入っていたら、思い切って外す候補です。新しく入れる前にも、まずこちらを確認してみてください。
- Emmet（省略記法によるHTML/CSSの高速入力）：VS Codeに標準搭載されています。
ul>li*5のような記法から一気にタグを展開できます。専用の拡張を入れる必要はありません。 - 角かっこ（ブラケット）の色分け：本体に標準搭載されました（設定
editor.bracketPairColorization.enabled）。かつて定番だった「Bracket Pair Colorizer」は、本体への統合にともない役目を終えています。 - CSSの色プレビュー：CSSやSCSSでカラーコードの隣に色見本が表示される機能は、標準でついています。
- タグの同時編集：前述の
editor.linkedEditingで、開始タグと終了タグの同時書き換えができます。
LINK：Bracket pair colorization（VS Code公式ブログ）
こうした標準機能は、settings.jsonの設定でさらに使い勝手が変わります。拡張と設定はセットで見直すと効果が高いので、あわせて整えておくのがおすすめです。
関連記事：VS Codeのsettings.json完全ガイド｜Web制作を快適にする設定
まとめ：迷ったら「毎日触るか」で決める
拡張機能は数を競うものではなく、自分の制作フローに本当に効くものだけを残すのがコツです。あれもこれもと欲張るより、少数精鋭のほうが、動作も設定管理もずっと楽になります。迷ったときは、「自分のWeb制作で、毎日のように使うか？」という一点を基準にすると判断がぐっとしやすくなります。
始め方としては、まずPrettierとLive Previewあたりを入れてみて、必要に応じて足していくのがおすすめです。JavaScriptを書くならESLint、Tailwindを使うなら専用のIntelliSense、というように、自分の作り方に合わせて一本ずつ追加していけば、無駄なく育てられます。
そして定期的に、役割がかぶっているものや、本体機能で足りるようになったものは思い切って外す。この引き算の姿勢こそが、軽くて快適なVS Code環境を保ついちばんの近道です。拡張の一覧を眺めて「これ、最近使ったかな？」と自問する時間を、ときどき作ってみてください。きっと制作のスピードも気分も軽くなります。
