はじめに
Visual Studio Code（以下、VS Code）は、拡張機能を入れることで開発環境をより便利にできます。
今回は基本的なWeb制作であると便利な拡張機能を紹介します。
総合
IntelliCode
Python、TypeScript、JavaScript、JavaのAIによるコード補完をする公式の拡張機能でした。使用される可能性の高い候補に★が付き、先頭に来るようになっていました。
IntelliCodeは、2025年11月にMicrosoftが非推奨にしました。★付きの候補や、グレーの文字で出る補完はもう表示されません。アンインストールしても、言語サーバーによる通常の補完（IntelliSense）は使えます。AIによる補完を使いたい場合は、GitHub Copilotが勧められています。
Japanese Language Pack for Visual Studio Code
入れるだけで日本語化できるので、日本語で使いたい場合は入れておきましょう。
稀に翻訳されなくなるときがあるので、そのときはVS Codeを再起動してください。
Japanese Language Pack for Visual Studio Code - Visual Studio Marketplace（新しいタブで開く）
Material Icon Theme
デフォルトのファイルアイコンよりこちらのアイコンの方が個人的に好きなので入れています。
同じフォルダでもフォルダ名によってアイコンが変わるので見やすいです。お好みでインストールしてください。
Material Icon Theme - Visual Studio Marketplace（新しいタブで開く）
Paste and Indent
ソースコードを貼り付けたときに自動的にインデントされます。
手動でコード整形をする手間が省けます。
Paste and Indent - Visual Studio Marketplace（新しいタブで開く）
Path Intellisense
コード内でパスを入力する際に、ディレクトリ構造に合わせて候補を表示してくれます。imgタグにパスを入れるときにいちいちフォルダを見に行かなくて良いので便利です。
Path Intellisense - Visual Studio Marketplace（新しいタブで開く）
Prettier - Code formatter
言わずと知れたコードフォーマッターです。
整形ルールはそのままでも良いですが、デフォルトのフォーマッターの指定と、保存時・ペースト時に自動整形されるように、設定画面で以下の3項目を設定しておきましょう。
- Editor: Default Formatter … Prettier - Code formatter
- Editor: Format On Paste … オン
- Editor: Format On Save … オン
settings.jsonに直接書く場合は、以下のようになります。
{ "editor.defaultFormatter": "esbenp.prettier-vscode", "editor.formatOnPaste": true, "editor.formatOnSave": true}Prettier - Code formatter - Visual Studio Marketplace（新しいタブで開く）
vscode-input-sequence
あまりこの拡張機能を解説している記事がないのですが、マルチカーソルで連番を入力したいときにとても便利です。
入力の仕方が覚えにくいので慣れるまで苦戦します。1, 2, 3, ...といった連番の他に奇数、偶数、飛び連番や2進数などさまざまな入力ができます。
連番の設定時に番号が重複して出力されることがあるので、settings.jsonに以下の設定を入れておきましょう。
{ "sequence.replaceSelection": true}vscode-input-sequence - Visual Studio Marketplace（新しいタブで開く）
Figma
VS Code上でFigmaのデザインを確認することができます。
画面の占有域が広いので最近はあまり使っていないですが、便利なのでおすすめです。
Figma for VS Code - Visual Studio Marketplace（新しいタブで開く）
Git
Git Graph
Gitを使う方は入れておいて良い拡張機能です。
Gitのグラフを見たり、グラフ上からGitの操作を行うことができます。
Git Graph - Visual Studio Marketplace（新しいタブで開く）
HTML
Auto Close Tag
開始タグの閉じかっこを入力すると自動で閉じタグが補完される拡張機能です。
HTMLファイルでは、VS Codeの標準の機能でも閉じタグが補完されます（設定の「HTML: Auto Closing Tags」）。この拡張機能は、PHPやJSX、XMLなど、標準の機能が効かないファイルで閉じタグを補完したいときに役立ちます。
Auto Close Tag - Visual Studio Marketplace（新しいタブで開く）
Auto Rename Tag
開始タグと閉じタグの片方を編集すると、もう片方のタグも自動で変更される拡張機能です。
HTMLファイルでは、VS Codeの標準の機能でも同じことができます。settings.jsonに"editor.linkedEditing": trueを設定すると有効になり、そのときこの拡張機能はHTMLファイルでは動かなくなります。
Auto Rename Tag - Visual Studio Marketplace（新しいタブで開く）
Code Spell Checker
スペルミスを青い波線でハイライトしてくれる拡張機能です。
Code Spell Checker - Visual Studio Marketplace（新しいタブで開く）
Highlight Matching Tag
カーソルをあてた開始タグに対応する終了タグを黄色い下線でハイライトしてくれる拡張機能です。
Highlight Matching Tag - Visual Studio Marketplace（新しいタブで開く）
Live Server
ローカルサーバーを立ち上げることができる拡張機能です。ファイルを保存すると、ブラウザの表示も自動で更新されます。
Live Server - Visual Studio Marketplace（新しいタブで開く）
Sass
Live Sass Compiler
Dart Sassを使用する場合はGulpなどを使用せずにSassの開発環境が整うので入れておきましょう。開発者が「Glenn Marks」になっているものを選んでください。
Live Sass Compiler - Visual Studio Marketplace（新しいタブで開く）
Dart SassやLive Sass Compilerの詳しい使い方は以下の記事で紹介しています。
Dart Sassへの移行ガイド：@useと@forward、ビルトインモジュールの書き方
PHP
PHP Intelephense
PHPで開発をするなら入れておいて損はないです。
WordPressを使う場合は、設定のintelephense.stubsに"wordpress"を追加しておきましょう。この設定は既定の一覧を置き換えるので、既定の値を残したまま、末尾に足してください。
{ "intelephense.stubs": [ // 既定の値（省略） "wordpress" ]}PHP Intelephense - Visual Studio Marketplace（新しいタブで開く）
この記事は役に立ちましたか？