WebコーダーがVSCodeに入れるべき拡張機能7つ【2026年版】

この記事では、Webコーダーが VSCode に入れるべき拡張機能7つを、拡張機能IDと設定例つきで紹介します。

結論から書くと、入れるべきなのは Prettier・Live Server・Path Intellisense・Auto Rename Tag・HTMLHint・CSS Peek・vscode-icons の7つです。この7つで、整形・プレビュー・パス補完・タグ編集・構文チェック・CSS参照・ファイル識別という、コーディング中に手が止まる場面をひととおり潰せます。

この記事は2021年に公開したあと、2026年9月に内容を見直しました。当時おすすめしていた Beautify と AutoFileName は、より広く使われている後継に差し替えています。カッコの色分けとカラーピッカーは VSCode 本体の標準機能になったので、拡張機能を入れずに使う方法を最後にまとめました。動作は VSCode 1.135.0 で確認しています。

WebコーダーがVSCodeに入れるべき拡張機能7つ

結論：下記の7つです。拡張機能ビューの検索ボックスに拡張機能IDをそのまま貼れば、同名の別物を引かずに目的のものが出てきます。

▼入れるべき拡張機能7つ

インストールは、メニューバーの 表示 > 拡張機能 を開き、検索ボックスに拡張機能IDを貼り付けて「インストール」を押すだけです。では、それぞれ解説していきます。

Prettier｜保存した瞬間にコードを整形する

結論：Prettier は、保存のたびにHTML・CSS・JavaScript を自動で整形してくれる拡張機能です。2026年9月時点で7,000万インストールを超えていて、コード整形の事実上の標準になっています。

対応しているのは HTML・CSS・SCSS・Less・JavaScript・TypeScript・JSX・JSON・Vue・Markdown・YAML など広範囲です。インデントや引用符の書き方を考えなくてよくなるので、コードの見た目に使っていた時間がそのまま消えます。

保存時に自動整形するには、settings.json に次の2つを書きます。

{
	// 保存時に自動整形する
	"editor.formatOnSave": true,
	// 既定のフォーマッターに Prettier を指定する
	"editor.defaultFormatter": "esbenp.prettier-vscode"
}

言語ごとに切り替えることもできます。たとえばHTMLだけ整形したくない場合は、次のように書きます。

{
	"[html]": {
		"editor.formatOnSave": false
	}
}

整形ルールをチームで揃えたいときは、プロジェクトの直下に .prettierrc を置きます。この1ファイルをリポジトリに入れておけば、参加者全員のエディタで同じ結果になります。

▼2021年版からの変更点

以前この枠で紹介していた「Beautify css/sass/scss/less」（発行元 HookyQR）は、開発が止まって非推奨の扱いになりました。GitHub のリポジトリには引き継ぎ手を募る issue が残ったままです。対応言語の広さ・設定ファイルの共有しやすさ・メンテナンスの継続性のどれを見ても Prettier が上位互換なので、差し替えました。

Live Server｜保存するとブラウザが自動で更新される

結論：Live Server は、ローカルサーバーを立ち上げて、コードを保存するたびにブラウザを自動でリロードしてくれる拡張機能です。7つの中で、2021年版からそのまま残っている定番のひとつです。

HTMLファイルを右クリックして「Open with Live Server」を選ぶと、既定のブラウザでページが開きます。あとは保存するだけで表示が切り替わるので、command + R を押す動作がまるごと不要になります。CSSの余白を1pxずつ詰めるような作業で、いちばん効きます。

ポート番号を固定したい、開くブラウザを変えたい、といった調整は settings.json でできます。

{
	// 使うポート番号（既定は 5500）
	"liveServer.settings.port": 5500,
	// 起動時に開くブラウザ
	"liveServer.settings.CustomBrowser": "chrome",
	// 起動のたびに出る通知を止める
	"liveServer.settings.donotShowInfoMsg": true
}

似た拡張機能に、Microsoft 公式の「Live Preview」（ms-vscode.live-server）があります。こちらは VSCode のタブの中にプレビューを表示します。

▼Live Server と Live Preview の使い分け

実機に近い見え方を確認するなら Live Server、エディタ内で完結させたいなら Live Preview を選んでください。両方入れて使い分けても競合しません。

Path Intellisense｜ファイルパスを補完する

結論：Path Intellisense は、src="" や import 文の中でファイルパスの候補を出してくれる拡張機能です。パスのタイプミスによる「画像が表示されない」を根本から減らせます。

引用符の中でスラッシュを打つと、そのフォルダの中身が候補として並びます。VSCode 本体もHTMLとCSSのパス補完を標準で持っていますが、Path Intellisense はJavaScript の import 文やパスのエイリアスまで対応する点が違います。

エイリアスを使っているプロジェクトでは、settings.json に対応表を書くと候補が出るようになります。

{
	"path-intellisense.mappings": {
		"@": "${workspaceFolder}/src",
		"~": "${workspaceFolder}"
	},
	// import 文で拡張子まで補完する
	"path-intellisense.extensionOnImport": true,
	// 候補を選んだあと次の候補を自動で出す
	"path-intellisense.autoTriggerNextSuggestion": true
}

TypeScript を使っている場合は、tsconfig.json の baseUrl と paths を読んでくれるので、上の設定を書かなくても効きます。

▼2021年版からの変更点

以前この枠で紹介していた「AutoFileName」（発行元 JerryHong）は、最終更新が2017年で止まっています。HTMLとCSSのパス補完だけなら VSCode の標準機能で足りるようになったため、標準機能を超える部分（import 文・エイリアス）を持つ Path Intellisense に差し替えました。

Auto Rename Tag｜開始タグを直すと終了タグも直る

結論：Auto Rename Tag は、開始タグを書き換えると、対応する終了タグを同時に書き換えてくれる拡張機能です。<div> を <section> に変えるような作業で、終了タグの直し忘れが無くなります。

HTMLだけでなく、XML・PHP・JavaScript（JSX）でも動きます。マークアップを何度も組み替えるコーディング作業では、地味ですが効果がいちばん分かりやすい拡張機能です。

ひとつ注意点があります。VSCode には editor.linkedEditing という同じ働きの標準機能があり、これを有効にしていると、Auto Rename Tag はHTMLとHandlebarsでは動作を譲ります。HTMLしか書かないなら、拡張機能を入れずに標準機能だけで足ります。

{
	// HTML の開始タグと終了タグを連動させる（標準機能）
	"editor.linkedEditing": true
}

JSX やPHPのテンプレートまで対象にしたい場合に、Auto Rename Tag を足す形になります。どちらを使うかは、書いているファイルの種類で決めてください。

HTMLHint｜HTMLの書き間違いを指摘する

結論：HTMLHint は、HTMLの構文の誤りをその場で指摘してくれる拡張機能です。既定で10個のルールが有効になっています。

▼既定で有効なルール

ルールを変えたいときは、プロジェクトの直下に .htmlhintrc を置きます。たとえばテンプレートの断片を書いていて DOCTYPE と title の指摘が邪魔な場合は、次のように無効化します。

{
	"doctype-first": false,
	"title-require": false,
	"tag-pair": true,
	"id-unique": true
}

発行元は HTMLHint 公式です。検索すると個人が公開した同名の拡張機能も出てくるので、拡張機能ID HTMLHint.vscode-htmlhint で確認してから入れてください。

CSS Peek｜HTMLのクラス名からCSSへ飛ぶ

結論：CSS Peek は、HTML内のクラス名やIDから、そのスタイルが書かれているCSSへ直接ジャンプできる拡張機能です。CSSファイルが増えたプロジェクトで、目的の記述を探す時間が消えます。

使い方は3つあります。

対応するのは CSS・SCSS・Less で、参照元は HTML のほか React・Vue・Svelte・Pug・EJS でも動きます。

小窓で開いてその場で直せるのが効く場面が多いです。「このクラス、どこで定義してたっけ」と検索し直す往復が無くなるので、CSSの記述量が増えるほど差が出ます。

vscode-icons｜ファイルツリーで種類を見分ける

結論：vscode-icons は、画面左のファイルツリーに拡張子ごとのアイコンを表示する拡張機能です。ファイル名を読まずに、形と色で目的のファイルを探せるようになります。

機能としては必須ではありませんが、ファイル数が数十を超えたあたりから効いてきます。html・css・js・json・画像がひと目で分かるので、ツリーを目で追う速度が変わります。

同じ目的の拡張機能には「Material Icon Theme」（PKief.material-icon-theme）もあります。vscode-icons はアイコンが写実的で色数が多く、Material Icon Theme はマテリアルデザインに沿った平面的な見た目です。機能差はほとんどないので、好みで選んで構いません。ここは技術的な優劣ではなく見た目の話です。

拡張機能を入れなくても使える標準機能

結論：2021年版で紹介していたカッコの色分けとカラーピッカーは、その後 VSCode 本体の標準機能になりました。拡張機能を入れずに使えます。

この2つは「不要になった」のではなく、本体に取り込まれて速くなったものです。設定名を知っておくと、効いていないときに自分で直せます。

カッコの色分けは既定で有効

対応するカッコを色で区別する機能は、2021年8月の VSCode 1.60 で本体に実装され、2022年4月の 1.67 から既定で有効になりました。設定は次のとおりです。

{
	// 対応するカッコを色分けする（既定で true）
	"editor.bracketPairColorization.enabled": true,
	// 対応するカッコを縦線でつなぐ
	"editor.guides.bracketPairs": "active"
}

Microsoft は本体に実装し直したことで、処理時間を1ミリ秒未満まで短縮したと説明しています。拡張機能版は描画のたびに拡張機能ホストとやり取りする必要があり、大きなファイルをスクロールすると色がちらつく問題がありました。

かつて紹介していた「Bracket Pair Colorizer」は、現在マーケットプレイスで非推奨（Deprecated）と表示されています。入れたままになっている場合は削除してください。標準機能と二重に描画されて、かえって遅くなります。

カラーピッカーはCSSの色コードにホバーすると開く

CSSやHTMLの中で色コードにカーソルを重ねると、標準のカラーピッカーが開きます。色の値の左に小さな四角（カラーデコレーター）が出て、そこをクリックするとパレットが開く仕組みです。

{
	// 色コードの横に色の四角を表示する
	"editor.colorDecorators": true,
	// CSS以外のファイルでも色を認識する
	"editor.defaultColorDecorators": "auto"
}

かつて紹介していた「Color Picker」（発行元 anseki）は今もインストールできますが、最終更新は2015年です。CSSの色指定という当初の用途なら、標準機能で足ります。

拡張機能を入れるときに気をつけること

結論：入れる前に、同じことが標準機能でできないかを先に確かめてください。便利な拡張機能ほど本体に取り込まれていきます。

2021年に紹介した7つのうち2つが、この5年で標準機能になりました。同じことは今後も起こります。おすすめ記事を見て一括で入れるより、困った場面が来てから1つずつ足すほうが、結果として軽い環境になります。

拡張機能が競合すると、保存のたびに整形結果が変わる、補完候補が二重に出る、といった原因の分かりにくい不具合になります。特にフォーマッターは複数入れると必ずぶつかるので、editor.defaultFormatter でどれを使うかを明示しておいてください。

VSCode をまだ日本語表示にしていない場合は、VSCodeを日本語化する方法から先に済ませておくと、この記事の「表示 > 拡張機能」といったメニュー名がそのまま一致します。

キー操作そのものを速くしたい場合は、VSCodeでVimを使う手順もどうぞ。Vim のキーバインドとモード切り替えを VSCode の中でそのまま使えるようになります。

コーディングの土台から固めたい場合は、Webコーディングにオススメの学習本にHTML/CSS/JavaScriptの学習順をまとめています。CSSの書き方そのものを速くしたいなら、CSSでオススメのフレームワークと実装例もあわせて読んでみてください。