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

Web制作の作業効率は、エディタの設定で大きく変わります。

同じVisual Studio Code（VS Code）を使っていても、設定が最適化されている人とそうでない人では、コーディングのスピードやミスの少なさに明確な差が生まれます。

特にWeb制作では、HTML、SCSS、JavaScript、PHPといった複数の言語を扱うことが多く、さらにWordPressテーマ開発ではHTMLとPHPが混在する独特の構造になります。こうした環境では、エディタの補助機能がどれだけ効いているかが、作業効率に直結します。

そこで重要になるのが、VS Codeの「settings.json」です。

このファイルには、エディタの挙動やフォーマット、補完機能、表示設定などを細かく指定できます。例えば、HTMLのタグを自動で閉じる設定、Emmetによる高速入力、保存時の自動整形など、日々のコーディングを支える便利な機能をまとめて管理できます。

実際、ちょっとした設定を入れておくだけで、

HTMLの入力スピードが大幅に上がる
コードの整形が自動化される
Gitの差分がきれいになる
WordPressテンプレートの編集が快適になる

といった変化を体感できます。

しかし、VS Codeは自由度が高い分、「どの設定を使えばいいのか分からない」という声も少なくありません。ネット上の情報も断片的で、実務向けの設定を体系的に解説している記事は意外と少ないのが現状です。

この記事では、Web制作（HTML / SCSS / WordPress）を前提としたVS Codeのsettings.json設定を、実際のコード例とともに詳しく解説します。初心者でも理解できるように基本から説明しつつ、実務で役立つポイントもしっかり押さえています。

毎日使うエディタだからこそ、設定を整える価値は非常に大きいものです。コーディングのストレスを減らし、快適な開発環境を作るためのヒントとして、ぜひ参考にしてみてください。

VS Codeのsettings.jsonとは何か

VS Codeには、エディタの挙動を細かくカスタマイズする仕組みがあります。その中心になるのが「settings.json」という設定ファイルです。

このファイルには、フォントサイズ、補完機能、コード整形、Emmetなどの動作ルールをJSON形式で記述します。

VS Codeでは設定をGUIから変更することもできますが、実務ではsettings.jsonでまとめて管理するケースが多くなります。理由はシンプルで、設定をコードとして管理できるためです。

複数の設定を一括管理できる
バックアップや共有が簡単
設定の変更履歴を把握できる
ワークスペースごとに設定を切り替えられる

例えばチーム開発では、インデントやフォーマットのルールを統一する必要があります。settings.jsonを使えば、そのルールをエディタ側で強制できます。

VS Code公式ドキュメントでも、settings.jsonはエディタ設定の中心となる仕組みとして紹介されています。

LINK：User and workspace settings

日々のコーディングを快適にするための「土台」と言える存在です。

Web制作向けの基本settings.json

HTML、SCSS、WordPressテーマ制作を前提にした基本設定の例を紹介します。実務で使いやすい形に整理したものです。

{ 
"editor.fontSize": 16, 
"editor.tabSize": 2, 
"editor.insertSpaces": true, 
"editor.wordWrap": "on", 
"editor.formatOnSave": true, 
"files.trimTrailingWhitespace": true, 
"editor.linkedEditing": true, 
"html.autoClosingTags": true, 
"javascript.autoClosingTags": true, 
"typescript.autoClosingTags": true, 
"emmet.triggerExpansionOnTab": true, 
"editor.defaultFormatter": "esbenp.prettier-vscode" 
}

この設定は、主に次の3つの目的を持っています。

コーディングのスピードを上げる
コードを自動で整形する
編集ミスを減らす

設定自体は非常にシンプルですが、日常の作業では大きな効果を発揮します。

Emmet設定でHTML入力を高速化する

HTMLを書くとき、Emmetは非常に強力な機能です。VS Codeには標準でEmmetが搭載されています。

Emmetは、短い記述を展開してHTML構造を生成する仕組みで、例えば次のような記述があります。

ul>li*3

これを展開すると、次のHTMLが生成されます。

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

この機能を最大限活かすために重要なのが、次の設定です。

"emmet.triggerExpansionOnTab": true

これを設定すると、Emmetの展開がTabキーで行えるようになります。

また、次の設定を使うとHTMLの閉じタグの後にコメントを付けられます。

"emmet.syntaxProfiles": { "html": { "filters": "html,c" } }

例えば次のコードが生成されます。

<div id="header" class="nav"></div> <!-- /#header.nav -->

HTMLが深くネストしたときでも、構造を把握しやすくなるメリットがあります。

保存時フォーマットでコードを自動整形する

コーディングが進むと、インデントや空白が乱れてくることがあります。
そこで便利なのが「保存時フォーマット」です。

"editor.formatOnSave": true

この設定を入れると、ファイルを保存したタイミングでコードが自動整形されます。

さらに、次の設定を組み合わせることでコードの品質が安定します。

行末の空白を削除
不要な改行を整理
インデントを統一

特にGitを使っている場合、空白の違いだけで差分が出ることがあります。次の設定はその問題を防ぐために重要です。

"files.trimTrailingWhitespace": true

この設定により、行末の余計な空白が自動で削除されます。

Prettierでコード整形を統一する

VS Codeでは、フォーマッター拡張を使ってコード整形を統一できます。Web制作で最もよく使われているフォーマッターの一つが「Prettier」です。

Prettierを使う場合は、次の設定を入れておくと便利です。

"editor.defaultFormatter": "esbenp.prettier-vscode"

これにより、HTML、CSS、SCSS、JavaScript、JSONなどのコードが統一されたルールで整形されます。

Prettierは多くのプロジェクトで採用されているフォーマッターで、公式サイトでもHTML・CSS・JavaScriptなど幅広い言語をサポートしていることが説明されています。

LINK：https://prettier.io/

保存時フォーマットと組み合わせると、コード整形をほぼ自動化できます。

WordPressテーマ開発で便利な設定

WordPressテーマ開発では、HTMLとPHPが混在したコードを書くことが多くなります。そのため、次の設定が役立ちます。

タグ同時編集

"editor.linkedEditing": true

この設定を有効にすると、HTMLタグの開始タグと終了タグを同時に編集できます。

<div></div>

divをsectionに変更すると

<section></section>

終了タグも自動で変更されます。

タグ自動補完

"html.autoClosingTags": true

これにより、

<div>

と入力すると

<div></div>

が自動で補完されます。

HTMLとPHPが混在するWordPressテンプレートでも、この機能はそのまま使えます。

Web制作向けVS Code設定のポイント

VS Codeの設定は無数にありますが、Web制作で重要なのは次のポイントです。

HTML入力を高速化する
コード整形を自動化する
ミスを防ぐ補助機能を有効にする

具体的には次のような構成がバランスよく機能します。

カテゴリ	設定
入力補助	Emmet
整形	Prettier
編集支援	Linked Editing
品質管理	Whitespace削除

設定は一度整えてしまえば、その後の作業がとても快適になります。

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

VS Codeは非常に高機能なエディタですが、その真価は「設定を整えてから」発揮されます。デフォルト状態でも十分に使えますが、settings.jsonを調整することで、コーディングの快適さは大きく変わります。

特にWeb制作では、HTML、SCSS、JavaScript、PHPと複数の言語を扱うため、エディタの補助機能が効いているかどうかが作業効率を左右します。

Emmetによる高速入力、保存時フォーマット、Prettierによる自動整形などを組み合わせることで、手作業で整形する時間を大幅に減らすことができます。

また、タグ同時編集や自動閉じタグなどの機能は、HTMLのミスを防ぐうえでも役立ちます。WordPressテーマ開発のようにHTMLとPHPが混在する環境でも、こうした設定はそのまま効果を発揮します。

さらに、行末の空白削除や改行整理の設定は、Gitを使う開発環境で特に重要です。コードの差分がきれいになり、レビューもしやすくなります。

settings.jsonの設定は一度作ってしまえば、長く使い続けることができます。少しだけ時間をかけて整えるだけで、日々のコーディングが驚くほど快適になるはずです。

エディタは毎日触れる道具です。だからこそ、使いやすさにこだわる価値があります。

もしVS Codeをデフォルト設定のまま使っているなら、ぜひ今回紹介したsettings.jsonをベースに環境を整えてみてください。ほんの数行の設定でも、作業のストレスがぐっと減ることを実感できるはずです。

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