VS CodeでWeb制作をするときに入れている拡張機能をまとめます。全部入れる必要はないので、自分のワークフローに合うものだけ選んでください。
必須級
Prettier - Code formatter
コードフォーマッター。保存時に自動でHTML/CSS/JavaScript/TypeScriptなどを整形してくれる。チームでコードスタイルを揃えるなら必須。
設定で"editor.formatOnSave": trueにしておけば、保存するたびに自動整形。
ESLint
JavaScriptやTypeScriptの構文チェック。バグの原因になるコードや、非推奨の書き方を検出してくれる。
PrettierとESLintの併用が定番。eslint-config-prettierを入れて、フォーマット系のルールはPrettierに任せるのがおすすめ。
EditorConfig for VS Code
.editorconfigファイルに基づいて、インデント幅や改行コードなどを自動設定。異なるエディタを使うチームメンバーともスタイルを揃えられる。
AI支援
GitHub Copilot
AIによるコード補完・生成。タブキーで補完を受け入れるだけで、コードを書く速度が上がる。月$10〜。
HTMLの構造を書き始めると残りを予測して補完してくれたり、コメントを書くとそれに対応するコードを提案してくれたりする。Web制作でもかなり便利。
GitHub Copilot Chat
Copilotとチャットで対話できる拡張機能。「このCSSの意味を教えて」「このコードをリファクタリングして」などの質問ができる。
HTML / テンプレート
Auto Rename Tag
HTMLの開始タグを変更すると、対応する閉じタグも自動で変更される。地味だけど手放せない。
Astro
Astroファイル（.astro）のシンタックスハイライト、補完、フォーマット対応。Astroを使うなら必須。
Emmet
VS Codeに標準搭載。div.container>ul>li*5のような省略記法でHTMLを高速に記述できる。設定不要。
CSS
Tailwind CSS IntelliSense
Tailwind CSSのクラス名補完、プレビュー、リンティング。Tailwindを使うなら必須。クラス名にホバーするとCSSプロパティがプレビューされる。
CSS Peek
HTMLファイル内のクラス名から、対応するCSSの定義にジャンプできる。CSSファイルを行ったり来たりする手間が減る。
PostCSS Language Support
PostCSSのシンタックスハイライト。カスタムメディアクエリやネストを使う場合に。
JavaScript / TypeScript
ES7+ React/Redux/React-Native snippets
Reactのスニペット集。rafceと打つだけでアロー関数コンポーネントの雛形が生成される。React系の開発で効率アップ。
Import Cost
importしたパッケージのサイズをインラインで表示。バンドルサイズを意識した開発ができる。
Git
GitLens
Gitの履歴やブレイム（誰がいつ変更したか）をエディタ内に表示。行ごとの変更履歴が見られるので、「この行なんで変わったんだっけ？」がすぐわかる。
Git Graph
Gitのブランチをグラフィカルに可視化。ブランチの分岐・マージの状況が一目でわかる。
画像・アセット
Image preview
HTMLやCSSで参照している画像を、ホバーでプレビュー表示。パスが正しいかの確認にも使える。
SVG Preview
SVGファイルをVS Code内でプレビュー。別アプリを開かずに確認できて便利。
見た目・効率
Material Icon Theme
ファイルアイコンをMaterial Design風に変更。ファイルの種類がアイコンで直感的にわかるようになる。
Japanese Language Pack
VS Codeの日本語化。メニューやエラーメッセージが日本語になる。
入れすぎに注意
拡張機能は便利だが、入れすぎるとVS Code自体が重くなる。使わなくなった拡張機能は定期的に無効化・アンインストールすることをおすすめします。
特にリンターやフォーマッターを複数入れると競合することがあるので、同じ機能の拡張は1つに絞ること。
まとめ
| カテゴリ | 最優先 |
|---|---|
| フォーマット | Prettier |
| リンター | ESLint |
| AI | GitHub Copilot |
| HTML | Auto Rename Tag |
| CSS | Tailwind CSS IntelliSense |
| Git | GitLens |
まずはPrettier + ESLint + Copilotの3つを入れるだけでも、開発体験がかなり変わります。