VS Codeのsettings.json完全ガイド｜Web制作を快適にする設定

Web制作
Visual Studio Code（VS Code）

Web制作をしていると、同じVS Code（Visual Studio Code）を使っているのに、人によってコーディングの速さやミスの少なさに差が出ることがあります。私も昔はデフォルト設定のまま使っていて、保存のたびにインデントを手で直したり、閉じタグを打ち忘れたりしていました。

その差を生んでいるものの正体が、じつは「settings.json」というVS Codeの設定ファイルの作り込み具合です。

settings.jsonには、フォントサイズやインデント幅、保存時の自動整形、文字コード、ファイルの除外設定など、エディタの挙動をまとめて書いておけます。GUIの設定画面からポチポチ変えることもできますが、テキストとして一括管理できるsettings.jsonのほうが、あとから見返しやすく、別のパソコンにも丸ごと移せて便利です。

とくにWeb制作では、HTML・SCSS・JavaScript・PHPと複数の言語を行き来します。WordPressテーマの開発ともなると、1つのファイルの中でHTMLとPHPが混ざり合う独特の構造になります。こういう環境こそ、エディタの補助機能がどれだけ効いているかで、1日の作業効率がまるで変わってきます。

この記事では、私が普段使っている設定をベースに、2026年時点のVS Codeでそのまま使えるsettings.jsonの実務設定を、コピペで動くコード例つきで解説します。基本の1ファイルから始めて、フォーマッタ・保存時整形・文字コード・字下げ・折り返し・除外設定・拡張機能との連携まで、順番に足していく形にしました。

毎日何時間も触る道具だからこそ、最初に少し整えておく価値は大きいです。まずは丸ごとコピーして、あとから自分好みに削っていくくらいの気持ちで読んでみてください。

関連記事：VS CodeとDreamweaverを徹底比較！Web制作で選ばれる理由とは

settings.jsonの開き方と2つの適用範囲

設定を書き込む前に、まずsettings.jsonの開き方と、設定が効く範囲を押さえておきます。ここを理解しておくと、あとで「なぜか設定が効かない」といった迷子になりません。

ファイルを開くには、コマンドパレット（WindowsならCtrl+Shift+P、Macなら⌘+Shift+P）を出して Preferences: Open User Settings (JSON) と入力します。これでユーザー設定のsettings.jsonが開きます。

settings.jsonには「ユーザー設定」と「ワークスペース設定」の2種類があります。

  • ユーザー設定：すべてのプロジェクトに共通で効く。自分の基本設定はこちら。
  • ワークスペース設定：フォルダ直下の .vscode/settings.json に置き、そのプロジェクトだけに効く。チームで共有したいルールはこちら。

両方に同じ項目があるときは、ワークスペース設定が優先されます。個人の好み（フォントサイズなど）はユーザー設定に、インデント幅のようにチームでそろえたいものはワークスペース設定に、と分けて考えると管理が楽になります。

参考：Visual Studio Code Docs – User and workspace settings

まずはこれ。Web制作の基本settings.json

細かい話に入る前に、まず土台となる基本設定を丸ごと載せます。HTML・SCSS・WordPressテーマ制作を想定した、私が新しいパソコンで最初に入れる内容です。そのままコピペで動くので、まずはこれを貼ってから不要な行を消していくのがおすすめです。

{
  "editor.fontSize": 15,
  "editor.tabSize": 2,
  "editor.insertSpaces": true,
  "editor.wordWrap": "on",
  "editor.renderWhitespace": "boundary",
  "editor.formatOnSave": true,
  "editor.defaultFormatter": "esbenp.prettier-vscode",
  "files.encoding": "utf8",
  "files.eol": "\n",
  "files.insertFinalNewline": true,
  "files.trimTrailingWhitespace": true,
  "editor.linkedEditing": true,
  "emmet.triggerExpansionOnTab": true
}

この設定がざっくり何をしているかというと、字下げをスペース2つにそろえ、保存するたびに自動整形と行末空白の削除を行い、文字コードをUTF-8に固定する、といった具合です。次のセクションから、それぞれの役割を分けて説明していきます。

字下げ・折り返し・空白まわりを整える

まずは見た目と入力の基本になる部分です。ここがそろっているだけで、コードの読みやすさがぐっと上がります。

インデントは editor.tabSize で幅を、editor.insertSpaces でタブ文字ではなくスペースを使うかを決めます。Web制作ではスペース2つが定番なので、次のようにしています。

{
  "editor.tabSize": 2,
  "editor.insertSpaces": true
}

長い行を折り返して表示したいときは editor.wordWrap を "on" にします。横スクロールせずに全文を追えるので、長いclass属性やコメントが多いHTMLで重宝します。

{
  "editor.wordWrap": "on"
}

地味ですが効くのが、行末の空白まわりの設定です。行末に残った余計な空白は、Gitの差分を無駄に汚す原因になります。次の2つを入れておくと、保存時に行末空白が消え、ファイル末尾に改行が1つ入るよう自動でそろえてくれます。

{
  "files.trimTrailingWhitespace": true,
  "files.insertFinalNewline": true
}

また editor.renderWhitespace を "boundary" にすると、単語の間以外の空白が点で見えるようになり、全角スペースの混入などにも気づきやすくなります。

文字コードと改行コードを固定する

Web制作でつまずきやすいのが、文字化けと改行コードの混在です。とくに複数人で作業したり、古いファイルを引き継いだりすると、ここが原因のトラブルが起きがちです。

文字コードはUTF-8、改行コードはLFに固定しておくのが安全です。次の設定で、新規ファイルの文字コードと改行コードをそろえられます。

{
  "files.encoding": "utf8",
  "files.eol": "\n"
}

files.eol の "\n" がLF（Unix系の改行）、"\r\n" がCRLF（Windowsの改行）です。WordPressやGitを使う現場ではLFにそろえておくと、改行コードの違いだけで差分が出る事故を防げます。

既存ファイルの文字コードを開いた時点で自動判定してほしい場合は、次を足しておくと、UTF-8以外のファイルもある程度うまく開いてくれます。

{
  "files.autoGuessEncoding": true
}

Emmetでhtml入力を高速化する

HTMLをたくさん書くなら、Emmetは外せません。VS Codeには標準で組み込まれているので、拡張機能を入れなくてもすぐ使えます。

Emmetは短い記述をHTML構造に展開してくれる機能です。たとえば次のように書いて、

ul>li*3

Tabキーを押すと、次のHTMLに展開されます。

<ul>
  <li></li>
  <li></li>
  <li></li>
</ul>

このTabキーでの展開を有効にするのが、次の1行です。

{
  "emmet.triggerExpansionOnTab": true
}

WordPressテーマ開発で効いてくるのが emmet.includeLanguages です。PHPファイルの中でもEmmetを使えるようにする設定で、テンプレート編集がぐっと快適になります。

{
  "emmet.includeLanguages": {
    "php": "html"
  }
}

これでPHPファイル内のHTML部分でも、Emmetの展開がそのまま使えるようになります。

保存時フォーマットとPrettierで整形を自動化する

コードを書き進めると、インデントや空白は少しずつ乱れてきます。それを手で直すのは時間の無駄なので、保存した瞬間に自動整形されるようにしておきます。

整形の主役になるのが「Prettier」というフォーマッタ拡張です。HTML・CSS・SCSS・JavaScript・JSONなど幅広い言語を、統一したルールで整えてくれます。まず拡張機能「Prettier – Code formatter」をインストールしたうえで、次の設定を入れます。

{
  "editor.formatOnSave": true,
  "editor.defaultFormatter": "esbenp.prettier-vscode"
}

editor.formatOnSave で保存時整形を有効にし、editor.defaultFormatter で既定の整形ツールにPrettierを指定しています。この2つで、保存するたびにコードが自動でそろうようになります。

言語ごとに整形ツールを変えたいときは、言語別に指定できます。たとえばJavaScriptだけPrettier、と明示したい場合は次のように書きます。

{
  "[javascript]": {
    "editor.defaultFormatter": "esbenp.prettier-vscode"
  },
  "[css]": {
    "editor.defaultFormatter": "esbenp.prettier-vscode"
  }
}

整形のルール（1行の最大文字数やクォートの種類など）は、プロジェクト直下に .prettierrc を置いて管理するのが定番です。チーム全員で同じ整形結果になるので、レビュー時の無駄な差分が消えます。

参考：Prettier 公式ドキュメント

タグ同時編集と自動補完でミスを減らす

HTMLとPHPが混ざるWordPressテンプレートでは、タグの打ち間違いや閉じ忘れが起きやすくなります。ここを補助機能でカバーします。

開始タグと終了タグを同時に書き換えられるのが「Linked Editing」です。次の設定で有効になります。

{
  "editor.linkedEditing": true
}

これを入れておくと、次のようなタグの、

<div></div>

開始側の div を section に書き換えるだけで、閉じタグも自動で section に変わります。

<section></section>

あわせて、閉じタグを自動で補ってくれる設定も入れておきます。

{
  "html.autoClosingTags": true,
  "javascript.autoClosingTags": true
}

これで <div> と打った時点で </div> が自動で補完されます。HTMLとPHPが混在するテンプレートでも、そのまま効いてくれます。

除外設定でファイルツリーと検索を軽くする

意外と見落とされがちですが、効果が大きいのが除外設定です。node_modules やビルド後のファイルまで一覧や検索に出てくると、目当てのファイルを探すのに時間がかかってしまいます。

エクスプローラーから隠すのが files.exclude、検索対象から外すのが search.exclude です。Web制作でよくある不要ファイルをまとめて除外しておきます。

{
  "files.exclude": {
    "**/.DS_Store": true,
    "**/Thumbs.db": true
  },
  "search.exclude": {
    "**/node_modules": true,
    "**/dist": true,
    "**/.git": true
  }
}

さらに、監視対象から外してVS Code自体を軽くする files.watcherExclude も、大きなプロジェクトでは効果的です。

{
  "files.watcherExclude": {
    "**/node_modules/**": true,
    "**/dist/**": true
  }
}

ファイル数が多いプロジェクトほど、この設定で動作が軽くなり、検索結果もノイズが減って見やすくなります。

「VS Codeのsettings.json完全ガイド」まとめ

VS Codeはデフォルトのままでも十分使えるエディタですが、settings.jsonを少し整えるだけで、毎日のコーディングの快適さは大きく変わります。手で直していた作業がどんどん自動になり、その分だけ本来のコーディングに集中できるようになります。

この記事で紹介した設定を、役割ごとにもう一度整理しておきます。

  • 字下げ・折り返し・空白：editor.tabSize / editor.wordWrap / files.trimTrailingWhitespace
  • 文字コード・改行：files.encoding / files.eol
  • 入力の高速化：Emmet（emmet.triggerExpansionOnTab / emmet.includeLanguages）
  • 整形の自動化：保存時フォーマット＋Prettier（editor.formatOnSave / editor.defaultFormatter）
  • ミス防止：Linked Editingと自動閉じタグ（editor.linkedEditing / html.autoClosingTags）
  • 動作の軽量化：files.exclude / search.exclude / files.watcherExclude

とくにWeb制作では、HTML・SCSS・JavaScript・PHPと複数の言語を行き来し、WordPressテーマ開発ではそれらが混在します。だからこそ、入力補助・自動整形・ミス防止の3つがそろっているかどうかで、作業効率がはっきり変わってきます。文字コードと改行コードの固定も、Gitを使う現場では差分をきれいに保つうえで効いてきます。

settings.jsonは、一度作ってしまえば長く使い回せる資産です。別のパソコンに移るときも、この1ファイルを持っていくだけで同じ環境がすぐ再現できます。私自身、新しい環境をセットアップするときは、まずこのファイルを貼るところから始めています。

まずは基本のsettings.jsonをそのままコピーして貼り、使いながら自分に合わない行を削っていく。それだけでも、数行の設定が日々のストレスをどれだけ減らしてくれるか、きっと実感できるはずです。

CSS Dreamweaver HTML VS Code Web制作

関連する記事