VS Code初心者ガイド｜Web制作の効率が上がる必須設定と拡張機能15選

2026年6月24日

この記事の結論

VS Codeはインストールしただけでは本来の力を発揮できず、適切な初期設定・拡張機能・ショートカットを整えることでコーディング速度と品質が大きく変わります。初期設定はフォントサイズ・自動保存・タブサイズから始め、拡張機能はLive Server・Prettier・Auto Rename Tag・CSS Peekを最優先で導入するのが効果的です。すべてを一度に導入する必要はなく、まず基本設定と主要な拡張機能から始めて慣れてきたら追加していく順番が無理なく定着します。

生徒

VS Codeをインストールしたけど、何を設定すればいいかわからなくて、結局メモ帳みたいにしか使えていないんですよね…

ペン博士

それはもったいない！この記事ではWeb制作に特化した初期設定・必須拡張機能15選・時短ショートカットを順番に解説するよ。今日から作業速度がガラッと変わるはずだ！

VS Code（Visual Studio Code）はWeb制作の現場で最も使われているコードエディターです。しかし、インストールしただけの状態では本来の力を発揮できません。適切な初期設定と拡張機能を整えるだけで、コーディング速度が劇的に上がり、ミスも減ります。この記事では、HTML/CSS・JavaScript・WordPressのコーディングを日常的に行う初心者〜中級者向けに、すぐに実践できる設定・拡張機能・ショートカットを網羅的に解説します。「なんとなく使っている」状態から卒業して、プロと同じ環境を整えましょう。

VS Codeとは？初心者が選ぶべき理由

VS CodeはMicrosoft製の無料コードエディターで、2024〜2026年のStack Overflow調査でも「最もよく使われる開発ツール」第1位をキープしています。Web制作者に支持される主な理由は以下の通りです。

完全無料：商用利用を含め一切費用がかかりません。
拡張機能が豊富：公式マーケットプレイスに5万件以上の拡張機能があり、自分の用途に合わせてカスタマイズ可能です。
動作が軽快：Electronベースでありながら、他のIDEより起動が速く、低スペックのPCでも快適に動きます。
Git連携が標準搭載：サイドバーからcommit・pushが操作でき、ターミナルを開かなくても差分確認ができます。
Windows・Mac・Linux対応：OSを問わず同じ操作感で使えるため、チーム開発でも設定を共有しやすいです。

初心者がまず覚えるべきことは「エディター選びに時間をかけない」こと。VS Codeを選んでおけばコミュニティ情報が豊富で、困ったときに解決策が見つかりやすいメリットがあります。

最初に行うべきVS Code初期設定5つ

インストール直後にやっておくと後悔しない設定を5つ紹介します。設定画面は Ctrl + ,（Mac: Cmd + ,）で開けます。

① フォントサイズ・行間を見やすく調整する

デフォルトのフォントサイズは14pxで少し小さいと感じる人が多いです。Editor: Font Size を16px、Editor: Line Height を1.7 に変更すると、長時間のコーディングでも目が疲れにくくなります。また、フォントには等幅フォントの「Fira Code」や「JetBrains Mono」を設定すると、記号が見やすくなりリガチャ（→や≠などの合字）が使えて可読性が上がります。

② 自動保存（Auto Save）を有効にする

Files: Auto Save を afterDelay に設定し、遅延を1000ms（1秒）にしておきましょう。ライブプレビューと組み合わせると、コードを書いた瞬間にブラウザへ反映されるため、保存を忘れてなぜ反映されないか悩む時間をゼロにできます。

③ Emmetの設定を確認する

VS CodeにはEmmetが標準搭載されています。Emmetとは省略記法でHTMLを高速入力できる機能で、例えば ul>li*5>a と入力してTabキーを押すだけで5つのリスト項目を持つulタグが一瞬で展開されます。設定で「Emmet: Include Languages」に { "javascript": "html" } を追加しておくと、JSXファイルでもEmmetが使えるようになります。

④ タブサイズとインデント設定を統一する

チーム開発や納品時にインデントのズレが原因でトラブルが起きることがあります。Editor: Tab Size を2に設定し、「Editor: Detect Indentation」をオフにしておくと、開くファイルによってインデント幅がバラバラになる問題を防げます。後述するPrettierと組み合わせると、保存時に自動整形されてさらに安心です。

⑤ ミニマップを非表示にする（任意）

右端に表示されるコードの縮小表示（ミニマップ）は、画面が狭いと邪魔に感じることがあります。「Editor: Minimap Enabled」をオフにすると編集エリアが広がり、特にラップトップでの作業が快適になります。

公式サイトから無料カウンセリングに申し込む →

Web制作に必須のVS Code拡張機能15選

拡張機能はサイドバーの四角いアイコン（Extensions）から検索してインストールできます。以下の15本は、HTML/CSS・WordPress・JavaScript案件を問わず役立つ厳選セットです。

コーディング効率化系（5選）

Prettier – Code formatter：保存時にHTML・CSS・JavaScriptを自動整形します。インデントのズレや不揃いなクォートを一瞬で統一できるため、コードレビューでの指摘が激減する最重要拡張機能です。設定で「Format On Save」をオンにするだけで有効になります。
ESLint：JavaScriptの文法エラーやコーディング規約違反をリアルタイムで検出します。実行前にバグを発見できるため、フロントエンド開発には欠かせません。
Auto Rename Tag：HTMLのタグ名を変更すると、対になる開始タグ・終了タグが同時に変わります。<div>を<section>に変えるような作業が一瞬で完了します。
Bracket Pair Colorizer 2（Rainbow CSV含む）：ネストが深いコードで対になる括弧を色分けして表示します。CSSのメディアクエリや複雑なJavaScript関数を読む際の視認性が大幅に向上します。
Path Intellisense：ファイルパスを入力する際に補完候補を表示します。../images/と打ち始めるだけでフォルダ内のファイル名が一覧で出てくるため、パスのタイポによるエラーがなくなります。

プレビュー・確認系（4選）

Live Server：HTMLファイルをローカルサーバーで開き、コード変更を検知してブラウザを自動でリロードします。静的サイト制作では最初にインストールすべき拡張機能の筆頭です。
CSS Peek：HTMLファイルのクラス名にカーソルを合わせるとCSSの定義をその場でプレビューできます。ファイルを行き来する回数が減り、スタイルの確認・修正が格段に速くなります。
HTML CSS Support：HTMLファイルでCSSクラス名を入力する際にオートコンプリートが効くようになります。クラス名のタイポが原因のデザイン崩れを防げます。
Image Preview：コード内のimgタグのsrcや background-image のパスにカーソルを合わせると、画像のサムネイルがホバーで表示されます。リンク切れ確認が視覚的にできて便利です。

Git・プロジェクト管理系（3選）

GitLens：各行のコードが「いつ・誰が・どのコミットで変更したか」をインラインで表示します。チーム開発での変更履歴追跡が容易になり、バグの原因特定にも役立ちます。
Git Graph：ブランチの分岐・マージをグラフィカルに可視化します。コマンドラインに不慣れなうちはGit操作の全体像を把握するのに非常に役立ちます。
Project Manager：複数のクライアント案件フォルダをブックマーク登録しておき、ワンクリックで切り替えられます。案件が増えてくると特に重宝します。

WordPress・PHP開発系（3選）

PHP Intelephense：PHP構文のインテリセンス（補完・定義ジャンプ・エラー検出）を提供します。WordPressのfunctions.phpやテンプレートファイルを編集する際に必須です。
WordPress Snippets：WordPressの関数・フック・テンプレートタグのスニペットが登録されており、wphやwpqなどの短縮コードから展開できます。関数名を毎回調べる手間が省けます。
DotENV：.envファイルの構文に色がつきます。WordPressのローカル開発環境でデータベース設定を管理する際に、見やすさが上がります。

公式サイトから無料カウンセリングに申し込む →

作業速度が2倍になるVS Code必須ショートカット

拡張機能と並んでコーディング速度を上げるのが、キーボードショートカットです。以下の表にWeb制作で特に使用頻度の高いものをまとめました。まず5つを完全に手になじませることを目標にしてください。

操作	Windows	Mac
コマンドパレットを開く	Ctrl + Shift + P	Cmd + Shift + P
ファイル内の文字列検索・置換	Ctrl + H	Cmd + H
同じ単語を一括選択	Ctrl + D（連続押し）	Cmd + D（連続押し）
行を上下に移動	Alt + ↑ / ↓	Option + ↑ / ↓
行を複製	Shift + Alt + ↓	Shift + Option + ↓
サイドバーの表示/非表示	Ctrl + B	Cmd + B
ターミナルの表示/非表示	Ctrl + `	Cmd + `
ファイルをクイックオープン	Ctrl + P	Cmd + P
選択行をコメントアウト	Ctrl + /	Cmd + /
マルチカーソルを追加	Alt + クリック	Option + クリック

特に「Ctrl + D（同じ単語を一括選択）」と「マルチカーソル」は、同じクラス名やIDを複数箇所同時に書き換えられるため、リファクタリングの速度が劇的に変わります。CSSのクラス名をまとめて変更したいときなどに積極的に使いましょう。

設定をチームや複数PCで共有する方法

フリーランスで複数台のPCを使っていたり、チームで同じ開発環境を揃えたい場合に役立つ機能が「Settings Sync（設定同期）」です。

Settings Syncの設定手順

コマンドパレット（Ctrl/Cmd + Shift + P）を開き「Settings Sync: Turn On」を選択する
GitHubまたはMicrosoftアカウントでサインインする
同期する内容（設定・拡張機能・スニペット・キーバインド）を選択する
別のPCでも同じアカウントでサインインするだけで設定が自動ダウンロードされる

また、チーム開発ではプロジェクトのルートに .vscode/settings.json と .vscode/extensions.json を置いてGitで管理する方法もあります。extensions.jsonに推奨拡張機能のIDを書いておくと、リポジトリを開いたメンバーに「この拡張機能をインストールしますか？」と自動で提案が出るので、環境差異による動作違いを防げます。

extensions.jsonの書き方例

以下のように記述してプロジェクトフォルダ内の.vscode/ディレクトリに保存します。

{
  "recommendations": [
    "esbenp.prettier-vscode",
    "ritwickdey.liveserver",
    "formulahendry.auto-rename-tag",
    "ecmel.vscode-html-css"
  ]
}

よくある設定ミスとトラブル解決法

VS Codeの初期設定でつまずきやすいポイントをQ&A形式でまとめます。

PrettierがHTMLを意図しない形に整形してしまう

Prettierのデフォルト設定ではHTMLの属性を複数行に展開することがあります。プロジェクトルートに .prettierrc ファイルを作成し、以下を追記することで制御できます。

{
  "printWidth": 120,
  "htmlWhitespaceSensitivity": "ignore",
  "singleQuote": true
}

Live Serverが起動しない・ポートが競合する

Live Serverのデフォルトポートは5500ですが、すでに使用中の場合は起動に失敗します。設定の「Live Server > Settings: Port」を5501など別の番号に変更するか、VS Codeを再起動することで解決するケースがほとんどです。

日本語ファイル名やパスが原因でエラーになる

フォルダ名・ファイル名に日本語や半角スペースが含まれていると、一部の拡張機能が正常に動作しないことがあります。ファイル名は英数字・ハイフン・アンダースコアのみで統一することを習慣にしましょう。

公式サイトから無料カウンセリングに申し込む →

まとめ

VS Codeは設定・拡張機能・ショートカットを正しく整えるだけで、コーディング速度と品質が大きく変わります。本記事で紹介した内容を一度にすべて導入する必要はありません。まず初期設定5つとLive Server・Prettierだけ入れて、慣れてきたら他の拡張機能を試すという順番が無理なく定着します。

・ポイント1：初期設定はフォントサイズ・自動保存・タブサイズの3つから始めると即効果が出る
・ポイント2：必須拡張機能はLive Server・Prettier・Auto Rename Tag・CSS Peekを最優先でインストールする
・ポイント3：ショートカットは「Ctrl+D（一括選択）」「Alt+↑↓（行移動）」「Ctrl+/（コメントアウト）」を先にマスターすると作業効率が劇的に上がる

道具の使い方を覚えることはWeb制作の土台づくりです。VS Codeを使いこなすことで生まれた時間をコーディング練習や案件対応に使えるようになります。WithCodeではこうしたツール活用も含めた実践的なカリキュラムで、効率よくWeb制作スキルを身につけられます。

よくある質問（FAQ）

Q1. VS Codeで最初にやるべき初期設定は何ですか？

A. フォントサイズを16px・行間を1.7に調整する、自動保存（Auto Save）を有効にする、Emmetの設定を確認する、タブサイズを2に統一しインデント自動検出をオフにする、ミニマップを非表示にする（任意）の5つが紹介されています。特にフォント・自動保存・タブサイズの3つは即効果が出ます。

Q2. 最優先で入れるべき拡張機能はどれですか？

A. Live Server（保存時にブラウザを自動リロード）とPrettier（保存時にコードを自動整形）が特に重要です。加えてAuto Rename Tag、CSS Peekを最優先でインストールすると、静的サイト制作やコードレビューの効率が大きく上がります。

Q3. 作業速度を上げるために覚えるべきショートカットは？

A. 「Ctrl/Cmd + D（同じ単語を一括選択）」「Alt/Option + ↑↓（行を上下に移動）」「Ctrl/Cmd + /（選択行をコメントアウト）」を先にマスターすると作業効率が劇的に上がります。特に一括選択とマルチカーソルはリファクタリングの速度を大きく変えます。

Q4. 設定を複数のPCやチームで共有できますか？

A. できます。「Settings Sync（設定同期）」機能を使えば、GitHubまたはMicrosoftアカウントでサインインするだけで設定・拡張機能・スニペット・キーバインドを別PCに自動ダウンロードできます。チーム開発では.vscode/settings.jsonとextensions.jsonをGitで管理する方法もあります。

Q5. Live Serverが起動しない場合はどうすればよいですか？

A. デフォルトポートの5500がすでに使用中だと起動に失敗します。設定の「Live Server > Settings: Port」を5501など別の番号に変更するか、VS Codeを再起動することで解決するケースがほとんどです。

参考リンク（公式・一次情報）

AIスキルで、未来の自分をアップデート！

今なら完全無料でAIを学べる！

動画や実践で楽しく学べる：初心者でも安心のカリキュラム
スマホ・PCどちらでもOK：好きな時間に学習できる
料金は一切ナシ：0円でAIスキルが身につく

目的に合わせて選べる「AI副業」「AI転職」「AI活用」の3コースを用意。副収入・キャリアチェンジ・日常の生産性アップまで、あなたのゴールに合わせてAIを学べます。

会員登録はカンタン30秒で完了します。まずは公式LINEから、無料でAI学習をスタートしましょう！

公式LINEから学習をスタート

この記事を書いた人

田中誠

WithCodeでWeb制作を習得後、フリーランスエンジニアとして活動。HTML/CSS・JavaScript・WordPress案件を中心に年間20件以上の制作実績を持つ。「難しい技術をわかりやすく」をモットーに、初心者〜中級者向けの技術記事を執筆。副業・フリーランス独立を目指す方に向けた情報発信に注力している。

VS Code初心者ガイド｜Web制作の効率が上がる必須設定と拡張機能15選

この記事の結論

VS Codeとは？初心者が選ぶべき理由

最初に行うべきVS Code初期設定5つ

① フォントサイズ・行間を見やすく調整する

② 自動保存（Auto Save）を有効にする

③ Emmetの設定を確認する

④ タブサイズとインデント設定を統一する

⑤ ミニマップを非表示にする（任意）

Web制作に必須のVS Code拡張機能15選

コーディング効率化系（5選）

プレビュー・確認系（4選）

Git・プロジェクト管理系（3選）

WordPress・PHP開発系（3選）

作業速度が2倍になるVS Code必須ショートカット

設定をチームや複数PCで共有する方法

Settings Syncの設定手順

extensions.jsonの書き方例

よくある設定ミスとトラブル解決法

PrettierがHTMLを意図しない形に整形してしまう

Live Serverが起動しない・ポートが競合する

日本語ファイル名やパスが原因でエラーになる

まとめ

よくある質問（FAQ）

Q1. VS Codeで最初にやるべき初期設定は何ですか？

Q2. 最優先で入れるべき拡張機能はどれですか？

Q3. 作業速度を上げるために覚えるべきショートカットは？

Q4. 設定を複数のPCやチームで共有できますか？

Q5. Live Serverが起動しない場合はどうすればよいですか？

関連記事

参考リンク（公式・一次情報）

AIスキルで、未来の自分をアップデート！

今なら完全無料でAIを学べる！

この記事を書いた人

– service –WithGroupの運営サービス