VScodeの設定（settings.json）まとめ【2023年1月更新】

はじめに

VScodeを愛用していくうちに設定ファイル（settings.json）がだいぶ煩雑になってきたので、それらを見直しがてらZennに記事としてまとめてみました。

主にwebサイト制作者向けの内容になっております。
どなたかの参考になれば幸いです！

settings.jsonのコードの中身だけを見たい方はこちらへどうぞ！

1. ファイルの自動保存設定

settings.json

// ====================================
// ファイル保存時の設定
// ====================================
// 自動保存設定をする
"files.autoSave": "afterDelay",

自動保存設定をする

指定したミリ秒後に自動保存される"afterDelay"を採用しています。
既定値である1000ミリ秒後（1秒後）に保存されるようになっています。
デフォルト値は"off"です。

2. ファイル保存時に同時に行われるアクション

settings.json

// ====================================
// ファイル保存時に行われるアクション
// ====================================
// ファイル保存時、コードを整形する
"editor.formatOnSave": true,
// ファイル保存時、同時に行われるアクション
"editor.codeActionsOnSave": {
	// 拡張機能Prettierのチェックを走らせる
	"source.fixAll.prettier": true
},
// ファイル保存時、最終行に改行を挿入する
"files.insertFinalNewline": true,
// ファイル保存時、最終行以降の空行を削除する
"files.trimFinalNewlines": true,
// ファイル保存時、末尾の空白をトリミングする
"files.trimTrailingWhitespace": true,

コードを整形する

settings.json

"editor.formatOnSave": true,

保存と同時にコード整形が行われる設定にしています。
デフォルト値はfalseです。

同時に行われるアクション

settings.json

"editor.codeActionsOnSave": {
	"source.fixAll.prettier": true
},

保存時に、拡張機能のPrettierによるチェックが走るようにしています。
タスクランナーにもPrettierを導入していますが、コードは常に整えておきたいので、拡張機能も導入しています。

最終行に改行を挿入する

settings.json

"files.insertFinalNewline": true,

各ファイルごとにdiffが発生しないように設定しています。
デフォルト値はfalseです。

最終行以降の空行を削除する

settings.json

"files.trimFinalNewlines": true,

各ファイルごとにdiffが発生しないように設定しています。
デフォルト値はfalseです。

末尾の空白をトリミングする

settings.json

"files.trimTrailingWhitespace": true,

各ファイルごとにdiffが発生しないように設定しています。
デフォルト値はfalseです。

コードを他から引っ張ってきた時など、不要な空白が入っていることがあるため、削除する設定にしています。

3. エディタのUIに関する設定

エディタ全体のUIに関する設定と、UIに関する詳細設定の2つに分けてご紹介します。
UIの各部名称については、以下の通りです。

1. メニューバー
2. アクティビティーバー
3. サイドバー
4. エディタ
5. パネル
6. ステータスバー

3.1 エディタ全体のUIに関する設定

settings.json

// ====================================
// エディタ全体のUIに関する設定
// ====================================
// テーマカラー
"workbench.colorTheme": "GitHub Dark Default",
// ミニマップを表示する
"editor.minimap.enabled": false,
// ファイルのパンくずリストを表示する
"breadcrumbs.enabled": false,
// メニューバーを表示する (toggle: Altキーで上部に表示する)
"window.menuBarVisibility": "toggle",
// アクティビティーバーの表示設定
"workbench.activityBar.visible": false,

テーマカラー

settings.json

"workbench.colorTheme": "GitHub Dark Default",

GitHub Themeの"GitHub Dark Default"を適用しています。

ミニマップ

settings.json

"editor.minimap.enabled": false,

使用頻度が低いため、非表示にしています。
デフォルト値はtrueです。

パンくずリスト

settings.json

"breadcrumbs.enabled": false,

使用頻度が低いため、非表示にしています。
デフォルト値はtrueです。

メニューバー

settings.json

"window.menuBarVisibility": "toggle",

"toggle"という設定を適用しています。
これは、普段は非表示、Altキーを押すことで表示させるという設定です。
デフォルト値は"classic"です。

アクティビティーバー

settings.json

"workbench.activityBar.visible": false,

falseで完全に非表示にしています。
代わりに拡張機能のActivity Barを導入し、ステータスバーの左下にアクティビティーバーのアイコンを表示させています。
デフォルト値はtrueです。

ここまでの設定を適用すると、エディタは以下の通りの画面になります。

パネルとサイドバーは必要に応じてショートカットキーで表示しています。
パネルはCtrl+J、サイドバーはCtrl+Bで表示/非表示を切り替えることができます。

3.2 エディタのUIに関する詳細設定

settings.json

// ====================================
// エディタのUIに関する詳細設定
// ====================================
// タブサイズ
"editor.tabSize": 2,
// インデントガイドを表示する
"editor.guides.indentation": false,
// 括弧（ブラケット）のペアガイドを表示する
"editor.guides.bracketPairs": true,
// 括弧（ブラケット）の水平方向のペアガイドを表示する
"editor.guides.bracketPairsHorizontal": true,
// 括弧（ブラケット）のペアごとに色を分ける
"editor.bracketPairColorization.independentColorPoolPerBracketType": true,
// 選択範囲のハイライトに角丸を適用する
"editor.roundedSelection": false,

タブサイズ

settings.json

"editor.tabSize": 2,

2に設定しています。
デフォルト値は4です。

インデントガイド

settings.json

"editor.guides.indentation": false,

拡張機能のindent-rainbowを導入しているため、非表示にしています。
デフォルト値はtrueです。

括弧（ブラケット）のペアガイド

settings.json

"editor.guides.bracketPairs": true,

trueで表示しています。
デフォルト値はfalseです。

括弧（ブラケット）の水平方向のペアガイド

settings.json

"editor.guides.bracketPairsHorizontal": true,

trueで表示しています。
デフォルト値は"active"です。

括弧（ブラケット）のペアカラー

settings.json

"editor.bracketPairColorization.independentColorPoolPerBracketType": true,

ペアごとに色を分けることで視認性を高めています。
デフォルト値はfalseです。

ハイライト

settings.json

"editor.roundedSelection": false,

ハイライトの角丸をfalseで消しています。
デフォルト値はtrueです。

ここまでの設定を適用すると、エディタは以下の通りの画面になります。

JavaScriptファイルの27行目を選択したときの画面
ネストが深くなると括弧の色は青→緑→黄と変更され、現在選択中の行はどのネスト内か？が一目瞭然になりました。

4. エディタのタイポグラフィーに関する設定

settings.json

// ====================================
// エディタのタイポグラフィーに関する設定
// ====================================
// フォント
"editor.fontFamily": "Hack, 'Noto Sans JP', monospace",
// 文字サイズ
"editor.fontSize": 15,
// 文字間隔
"editor.letterSpacing": -0.4,
// 行間
"editor.lineHeight": 1.48,
// テーマカラーのカスタマイズ
"editor.tokenColorCustomizations": {
	// コメントアウト
	"comments": "#999",
},

フォント

settings.json

"editor.fontFamily": "Hack, 'Noto Sans JP', monospace",

英数字がHack、日本語がNoto Sans JPです。

Hackは可読性が高く、0（ゼロ）の表示が特徴的でかっこよかったので採用しました。
Noto Sans JPは日本語の読みやすさ重視です。

上記のフォントを適用したい場合、各フォントをローカルにインストールする必要があります。

デフォルト値は"Consolas, 'Courier New', monospace"です。

Hackをおすすめする理由の1つとして、アンダースコア（_）を連続して記述しても、区切って表示してくれる点が挙げられます。

アンダースコアは繋がっていない方が個人的には視認ミスを防げているような気がします🤔

また、Hackは元々開発者向けに作られたフォントです。

エディタとの馴染みも良く、可読性の高さからも大変おすすめのフォントです。

Hackを適用したコードの見栄え

文字サイズ

settings.json

"editor.fontSize": 15,

15指定です。
デフォルト値は14です。

文字間隔

settings.json

"editor.letterSpacing": -0.4,

-0.4指定です。
上記の2種類のフォントに合わせた設定です。
デフォルト値は0です。

行間

settings.json

"editor.lineHeight": 1.48,

1.48指定です。
上記の2種類のフォントに合わせた設定です。
デフォルト値は0です。

テーマカラーのカスタム

settings.json

"editor.tokenColorCustomizations": {
	"comments": "#999",
},

コメントアウトの色のみ、"#999"に変更しています。
テーマにも寄りますが、グレー指定が無難かつ1番見やすいので設定しています。

5. ワークベンチの設定

settings.json

// ====================================
// ワークベンチの設定
// ====================================
// アイコンテーマ
"workbench.iconTheme": "material-icon-theme",
// ツリーのインデント
"workbench.tree.indent": 18,
// ツリーのインデントガイドを表示する
"workbench.tree.renderIndentGuides": "always",
// アニメーションを減らす
"workbench.reduceMotion": "on",
// 新規ファイル作成時、ヒントメッセージを表示する
"workbench.editor.untitled.hint": "hidden",

アイコンテーマ

settings.json

"workbench.iconTheme": "material-icon-theme",

拡張機能のMaterial Icon Themeを適用しています。
公式のロゴやアイコンが多く、シンプルで見やすいので気に入っています。
デフォルト値は"vs-seti"です。

Material Icon Themeのアイコン例

ツリーのインデント

settings.json

"workbench.tree.indent": 18,

18指定です。
値は16～24くらいがちょうどいいかなと思います。
デフォルト値は8です。

ツリーのインデントガイド

settings.json

"workbench.tree.renderIndentGuides": "always",

"always"指定で、常に表示しています。
デフォルト値は"onHover"です。

アニメーション

settings.json

"workbench.reduceMotion": "on",

"on"指定にし、アニメーションを減らしています。
CSSのtransition指定がなくなったような動きになります。
デフォルト値は"auto"です。

ヒントメッセージ

settings.json

"workbench.editor.untitled.hint": "hidden",

デフォルト値"text"指定の場合

"hidden"指定の場合
新規ファイル作成時に表示されるメッセージは"hidden"指定で非表示にしています。
デフォルト値は"text"です。

6. ターミナルの設定

settings.json

// ====================================
// ターミナルの設定
// ====================================
// ターミナルの文字サイズ
"terminal.integrated.fontSize": 14,
// ターミナルの行間
"terminal.integrated.lineHeight": 1.25,
// 新規ターミナル画面の表示位置
"terminal.integrated.defaultLocation": "editor",

ターミナルの文字サイズ

settings.json

"terminal.integrated.fontSize": 14,

デフォルト値の14指定です。

ターミナルの行間

settings.json

"terminal.integrated.lineHeight": 1.25,

1.25指定です。
デフォルト値は1です。

新規ターミナル画面の表示位置

settings.json

"terminal.integrated.defaultLocation": "editor",

"editor"指定です。
新規のターミナル画面を開くとき、パネルではなくエディタで開くように設定しています。
デフォルト値は"view"です。

ここまでの設定を適用すると、ターミナルは以下の通りの画面になります。

7. キャレットの設定

settings.json

// ====================================
// キャレットの設定
// ====================================
// エディタのキャレットの幅
"editor.cursorWidth": 3,
// エディタのキャレットアニメーション
"editor.cursorBlinking": "phase",
// ターミナルのキャレットのスタイル
"terminal.integrated.cursorStyle": "block",
// ターミナルのキャレットアニメーション
"terminal.integrated.cursorBlinking": true,
// テーマカラーの配色を上書きする
"workbench.colorCustomizations": {
	// エディタのキャレットカラー
	"editorCursor.foreground": "#f00058",
	// ターミナルのキャレットカラー
	"terminalCursor.foreground": "#efff0b"
},

キャレットとは、テキストの挿入位置を示すインジケーターのことです。

デフォルトのキャレットでも良いのですが、たまに迷子になることがあります。
遠目から見ても、分かりやすいスタイルに変更しました。

エディタのキャレットの幅

settings.json

"editor.cursorWidth": 3,

3指定です。
デフォルト値は0です。

エディタのキャレットアニメーション

settings.json

"editor.cursorBlinking": "phase",

"phase"指定です。
デフォルト値の"blink"よりも柔らかく点滅します。

ターミナルのキャレットスタイル

settings.json

"terminal.integrated.cursorStyle": "block",

デフォルト値の"block"指定です。

ターミナルのキャレットを点滅させる

settings.json

"terminal.integrated.cursorBlinking": true,

true指定で、キャレットを点滅させています。
デフォルト値はfalseです。

テーマカラーの配色を上書きする

settings.json

"workbench.colorCustomizations": {
	"editorCursor.foreground": "#f00058",
	"terminalCursor.foreground": "#efff0b"
},

エディタとターミナルのキャレットカラーを変更しています。

エディタのキャレットカラー

"#f00058"指定です。

ターミナルのキャレットカラー

"#efff0b"指定です。

ここまでの設定を適用すると、エディタは以下の通りの画面になります。

ターミナルは以下の通りの画面になります。

8. コード整形の設定

settings.json

// ====================================
// フォーマッターとコード整形に関する設定
// ====================================
// 入力時、コードを自動的に整形をする
"editor.formatOnType": true,
// ペースト時、コードを自動的に整形をする
"editor.formatOnPaste": true,
// デフォルトのフォーマッターを設定する
"editor.defaultFormatter": "esbenp.prettier-vscode",
// ------------------------------------
// 言語別フォーマッター指定
// ------------------------------------
// HTML
"[html]": {
	// 拡張機能のPrettierを適用する
	"editor.defaultFormatter": "esbenp.prettier-vscode"
},
// Pug
"[jade]": {
	// 拡張機能のpug (jade) formatterを適用する
	"editor.defaultFormatter": "ducfilan.pug-formatter"
},
// CSS
"[css]": {
	// 拡張機能のPrettierを適用する
	"editor.defaultFormatter": "esbenp.prettier-vscode"
},
// SCSS
"[scss]": {
	// 拡張機能のPrettierを適用する
	"editor.defaultFormatter": "esbenp.prettier-vscode"
},
// JavaScript
"[javascript]": {
	// 拡張機能のPrettierを適用する
	"editor.defaultFormatter": "esbenp.prettier-vscode"
},
// json
"[json]": {
	// 拡張機能のPrettierを適用する
	"editor.defaultFormatter": "esbenp.prettier-vscode"
},
// PHP
"[php]": {
	// 拡張機能のphpcbfを適用する
	"editor.defaultFormatter": "persoderlind.vscode-phpcbf",
	// ペースト時、自動的に整形しない
	"editor.formatOnSave": false
},
// markdown
"[markdown]": {
	// 拡張機能のmarkdownlintを適用する
	"editor.defaultFormatter": "DavidAnson.vscode-markdownlint",
	// ペースト時、自動的に整形しない
	"editor.formatOnPaste": false
},
// XML
"[xml]": {
	// 拡張機能のXML Formatを適用する
	"editor.defaultFormatter": "mikeburgh.xml-format"
},

入力時のコード整形

settings.json

"editor.formatOnType": true,

true指定です。
入力が終わった段階で、コード整形が行われるように設定しています。
デフォルト値はfalseです。

ペースト時のコード整形

settings.json

"editor.formatOnPaste": true,

true指定です。
ペーストした段階で、コード整形が行われるように設定しています。
デフォルト値はfalseです。

デフォルトのフォーマッター

settings.json

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

デフォルトのフォーマッターは拡張機能のPrettierを設定しています。
デフォルト値はnullです。

また、言語別に設定しているフォーマッターは下記の通りです。

言語	フォーマッター	詳細設定
HTML	Prettier
Pug	pug (jade) formatter
CSS	Prettier
SCSS	Prettier
JavaScript	Prettier
json	Prettier
PHP	phpcbf	ペースト時、自動的にコード整形しない
markdown	markdownlint	ペースト時、自動的にコード整形しない
xml	XML Format

9. 言語別個別設定

settings.json

// ====================================
// 言語別個別設定
// ====================================
// 【PHP】サジェスト機能を有効にする
"php.suggest.basic": false,
// 【PHP】バリデーターを有効にする
"php.validate.enable": false,
// 【JavaScript】自動インポートを有効にする
"javascript.suggest.autoImports": true,
// 【JavaScript】インポートパスの自動更新を有効にする
"javascript.updateImportsOnFileMove.enabled": "always",

PHP

settings.json

"php.suggest.basic": false,
"php.validate.enable": false,

WordPressを使った開発をする関係で、補完機能やバリデーターをオフ設定にしています。
これらの設定をfalseにすることで、WordPressの関数に対してエラーが吐かれなくなります。
デフォルト値はtrueです。

JavaScript

settings.json

"javascript.suggest.autoImports": true,
"javascript.updateImportsOnFileMove.enabled": "always",

モジュールの自動インポートとインポートパスの自動更新をオンにしています。
自動インポートのデフォルト値はtrueで、インポートパスのデフォルト値は"prompt"です。

10. その他の設定

settings.json

// ====================================
// その他の設定
// ====================================
// 空フォルダがある場合、コンパクト形式で表示する
"explorer.compactFolders": false,
// インデントの自動検出を設定する
"editor.detectIndentation": false,
// インデントを空白（半角スペース）に設定する
"editor.insertSpaces": false,
// 区切り文字（単語の境界文字）を設定する
"editor.wordSeparators": "`~!@#%^&*()=+[{]}\\|;:'\",.<>/?",
// スニペットのサジェスト位置を設定する
"editor.snippetSuggestions": "top",
// 小文字検索の場合、大文字と小文字を区別せずに検索し、それ以外の場合は区別して検索する（ファイル検索のみに適用）
"search.smartCase": true,
// デフォルトのLint機能を有効にする
"scss.validate": false,
"css.validate": false,
// DOCTYPE宣言書き換え
"emmet.variables": {
	"lang": "ja", // => <html lang="ja">
},

コンパクト形式表示

settings.json

"explorer.compactFolders": false,

false指定です。
コンパクト形式表示は見づらいのでオフにしています。
デフォルト値はtrueです。

true指定の場合のスクリーンショット

false指定の場合のスクリーンショット

インデントの自動検出

settings.json

"editor.detectIndentation": false,

false指定です。
trueの場合、フォーマットがうまくいかない場合があるのでオフにしています。
デフォルト値はtrueです。

インデントの種類

settings.json

"editor.insertSpaces": false,

false指定です。
trueの場合、tabキーで入力したインデントが空白（半角スペース）として扱われます。
デフォルト値はtrueです。

区切り文字

settings.json

"editor.wordSeparators": "`~!@#%^&*()=+[{]}\\|;:'\",.<>/?",

デフォルト値から、$と-を除いた設定にしています。
$を除外することで、PHPでの開発が少し快適になります。

スニペットのサジェスト位置

settings.json

"editor.snippetSuggestions": "top",

"top"指定です。
設定したスニペットがEmmetのサジェストよりも上に表示されるように設定しています。
デフォルト値は"inline"です。

小文字検索時の候補を決める

settings.json

"search.smartCase": true,

true指定です。
この設定を適用すると、小文字で検索した場合、大文字小文字関係なくヒットしてくれます。
デフォルト値はfalseです。

Lint機能

settings.json

"scss.validate": false,
"css.validate": false,

false指定です。
デフォルトのLint機能は、StylelintやPrettierとの競合回避のためにオフにしています。
デフォルト値はtrueです。

DOCTYPE宣言の書き換え

settings.json

"emmet.variables": {
	"lang": "ja", // => <html lang="ja">
},

デフォルト値は"en"ですが、基本的に日本語のサイトしか作成しないので"ja"指定に変更しています。

11. 拡張機能の設定

settings.json

// ====================================
// 拡張機能の個別設定
// ====================================
// ------------------------------------
// indent-rainbow
// ------------------------------------
// インデントカラー
"indentRainbow.colors": ["rgba(153, 40, 57, 0.24)", "rgba(111, 115, 30, 0.24)", "rgba(30, 115, 102, 0.24)", "rgba(85, 30, 115, 0.24)"],
// ------------------------------------
// Live Server
// ------------------------------------
// 起動時、IPアドレスをローカルIP形式に変更する
"liveServer.settings.useLocalIp": true,
// 起動できなかった場合、ポップアップメッセージを非表示にする
"liveServer.settings.donotShowInfoMsg": true,
// 起動時、HTMLファイル上にタグがない場合のエラーメッセージを非表示にする
"liveServer.settings.donotVerifyTags": true,
// ------------------------------------
// CodeSnap
// ------------------------------------
// 背景色
"codesnap.backgroundColor": "#70cdc9",
// エディタの影
"codesnap.boxShadow": "rgba(0, 0, 0, 0.2) 0px 20px 100px",
// エディタの行番号表示
"codesnap.showLineNumbers": false,
// シャッターボタン機能設定
"codesnap.shutterAction": "copy",
// ------------------------------------
// Insert <br> Tag
// ------------------------------------
"insert-br-tag.enableOnLanguage": [
	// 任意の言語で有効化する
	"html",
	"php"
	"javascript",
],
// ------------------------------------
// Code Spell Checker
// ------------------------------------
// 単語登録（VScode全体に適用）
"cSpell.userWords": [
	"hoge",
	"fuga",
	"piyo",
],
// ------------------------------------
// phpcbf
// ------------------------------------
// パスの登録
"phpcbf.executablePath": "phpcbf.bat",
// 保存時、PHPのコードを整形する
"phpcbf.onsave": true,
// 標準コーディングルールを設定する
"phpcbf.standard": "WordPress",

indent-rainbow

indent-rainbowはインデントの階層ごとに色分けしてくれる拡張機能です。
Pug使いの方にはおすすめです。

settings.json

"indentRainbow.colors": ["rgba(153, 40, 57, 0.24)", "rgba(111, 115, 30, 0.24)", "rgba(30, 115, 102, 0.24)", "rgba(85, 30, 115, 0.24)"],

不透明度とカラーの両方を変更しています。

デフォルト値は下記の通りです。

settings.json

"indentRainbow.colors": ["rgba(255,255,64,0.07)", "rgba(127,255,127,0.07)", "rgba(255,127,255,0.07)", "rgba(79,236,236,0.07)"],

Live Server

Live Serverは導入するだけで、簡単にローカルサーバーを立てられる拡張機能です。
スマホでの実機確認ができるように調整しています。

IPアドレス

settings.json

"liveServer.settings.useLocalIp": true,

true指定です。
IPアドレスの形式をローカルIP形式で表示するように変更しています。
同じWi-Fi環境下であれば、そのローカルIPをスマホのブラウザに入力することで、実機確認することができます。
デフォルト値はfalseです。

ポップアップメッセージ

settings.json

"liveServer.settings.donotShowInfoMsg": true,

true指定です。
Live Serverが起動を失敗した場合でも、メッセージが出ないように設定しています。
デフォルト値はfalseです。

エラーメッセージ

settings.json

"liveServer.settings.donotVerifyTags": true,

true指定です。
HTMLファイル上にタグがない場合でも、エラーメッセージが出ないように設定しています。
デフォルト値はfalseです。

CodeSnap

CodeSnapはコードのスクリーンショットができる拡張機能です。
デフォルトの設定でもいいのですが、気分を上げるために細かくカスタマイズしています。

背景色

settings.json

"codesnap.backgroundColor": "#70cdc9",

"#70cdc9"指定です。

エディタの影

settings.json

"codesnap.boxShadow": "rgba(0, 0, 0, 0.2) 0px 20px 100px",

"rgba(0, 0, 0, 0.2) 0px 20px 100px"指定です。

エディタの行番号

settings.json

"codesnap.showLineNumbers": false,

false指定です。
行番号は非表示にしています。

シャッターボタン機能

settings.json

"codesnap.shutterAction": "copy",

"copy"指定です。
この拡張機能はTwitterにコードを載せるために導入したようなものなので、シャッターボタンはコピー機能にしています。
デフォルト値は"save"です。

ここまでの設定を適用すると、CodeSnapの見栄えは以下の通りの画面になります。

Insert <br> Tag

settings.json

"insert-br-tag.enableOnLanguage": [
	// 任意の言語で有効化する
	"javascript",
	"javascriptreact",
	"typescript",
	"typescriptreact",
	"markdown",
	"html",
	"php"
],

Shift+Enterでbrタグを挿入できる便利な拡張機能Insert <br> Tagですが、デフォルト値のほかに、PHPでも機能するように追加しています。

Code Spell Checker

settings.json

"cSpell.userWords": [
	"hoge",
	"fuga",
	"piyo",
],

Code Spell Checkerはスペルミスを検出して、警告表示してくれる拡張機能です。
設定で単語登録を行うことができ、ここに登録された単語はスペルミスと認識されなくなります。

実際にはもっと多くの単語を登録していますが、ここでは割愛します。
基本的に「この単語は今後スペルミスとしては扱われないだろう」という固有名詞を登録しています。

phpcbf

パスの登録

settings.json

"phpcbf.executablePath": "phpcbf.bat",

phpcbfを実行するためのパスを設定しています。

自動フォーマット

settings.json

"phpcbf.onsave": true,

true指定です。
保存時に拡張機能のphpcbfによるコード整形が行われるように設定しています。
デフォルト値はfalseです。

コーディングルール

settings.json

"phpcbf.standard": "WordPress",

基本的にPHPを使う開発はWordPressのみのため、"WordPress"指定にしています。

12. settings.json

settings.json

{
	// ====================================
	// ファイル保存時の設定
	// ====================================
	// 自動保存設定をする
	"files.autoSave": "afterDelay",
	// ====================================
	// ファイル保存時に行われるアクション
	// ====================================
	// ファイル保存時、コードを整形する
	"editor.formatOnSave": true,
	// ファイル保存時、同時に行われるアクション
	"editor.codeActionsOnSave": {
		// 拡張機能Prettierのチェックを走らせる
		"source.fixAll.prettier": true
	},
	// ファイル保存時、最終行に改行を挿入する
	"files.insertFinalNewline": true,
	// ファイル保存時、最終行以降の空行を削除する
	"files.trimFinalNewlines": true,
	// ファイル保存時、末尾の空白をトリミングする
	"files.trimTrailingWhitespace": true,
	// ====================================
	// エディタ全体のUIに関する設定
	// ====================================
	// テーマカラー
	"workbench.colorTheme": "GitHub Dark Default",
	// ミニマップを表示する
	"editor.minimap.enabled": false,
	// ファイルのパンくずリストを表示する
	"breadcrumbs.enabled": false,
	// メニューバーを表示する (toggle: Altキーで上部に表示する)
	"window.menuBarVisibility": "toggle",
	// アクティビティーバーの表示設定
	"workbench.activityBar.visible": false,
	// ====================================
	// エディタのUIに関する詳細設定
	// ====================================
	// タブサイズ
	"editor.tabSize": 2,
	// インデントガイドを表示する
	"editor.guides.indentation": false,
	// 括弧（ブラケット）のペアガイドを表示する
	"editor.guides.bracketPairs": true,
	// 括弧（ブラケット）の水平方向のペアガイドを表示する
	"editor.guides.bracketPairsHorizontal": true,
	// 括弧（ブラケット）のペアごとに色を分ける
	"editor.bracketPairColorization.independentColorPoolPerBracketType": true,
	// 選択範囲のハイライトに角丸を適用する
	"editor.roundedSelection": false,
	// ====================================
	// エディタのタイポグラフィーに関する設定
	// ====================================
	// フォント
	"editor.fontFamily": "Hack, 'Noto Sans JP', monospace",
	// 文字サイズ
	"editor.fontSize": 15,
	// 文字間隔
	"editor.letterSpacing": -0.4,
	// 行間
	"editor.lineHeight": 1.48,
	// テーマカラーのカスタマイズ
	"editor.tokenColorCustomizations": {
		// コメントアウト
		"comments": "#999",
	},
	// ====================================
	// ワークベンチの設定
	// ====================================
	// アイコンテーマ
	"workbench.iconTheme": "material-icon-theme",
	// ツリーのインデント
	"workbench.tree.indent": 18,
	// ツリーのインデントガイドを表示する
	"workbench.tree.renderIndentGuides": "always",
	// アニメーションを減らす
	"workbench.reduceMotion": "on",
	// 新規ファイル作成時、ヒントメッセージを表示する
	"workbench.editor.untitled.hint": "hidden",
	// ====================================
	// ターミナルの設定
	// ====================================
	// ターミナルの文字サイズ
	"terminal.integrated.fontSize": 14,
	// ターミナルの行間
	"terminal.integrated.lineHeight": 1.25,
	// 新規ターミナル画面の表示位置
	"terminal.integrated.defaultLocation": "editor",
	// ====================================
	// キャレットの設定
	// ====================================
	// エディタのキャレットの幅
	"editor.cursorWidth": 3,
	// エディタのキャレットアニメーション
	"editor.cursorBlinking": "phase",
	// ターミナルのキャレットのスタイル
	"terminal.integrated.cursorStyle": "block",
	// ターミナルのキャレットアニメーション
	"terminal.integrated.cursorBlinking": true,
	// テーマカラーの配色を上書きする
	"workbench.colorCustomizations": {
		// エディタのキャレットカラー
		"editorCursor.foreground": "#f00058",
		// ターミナルのキャレットカラー
		"terminalCursor.foreground": "#efff0b"
	},
	// ====================================
	// フォーマッターとコード整形に関する設定
	// ====================================
	// 入力時、コードを自動的に整形をする
	"editor.formatOnType": true,
	// ペースト時、コードを自動的に整形をする
	"editor.formatOnPaste": true,
	// デフォルトのフォーマッターを設定する
	"editor.defaultFormatter": "esbenp.prettier-vscode",
	// ------------------------------------
	// 言語別フォーマッター指定
	// ------------------------------------
	// HTML
	"[html]": {
		// 拡張機能のPrettierを適用する
		"editor.defaultFormatter": "esbenp.prettier-vscode"
	},
	// Pug
	"[jade]": {
		// 拡張機能のpug (jade) formatterを適用する
		"editor.defaultFormatter": "ducfilan.pug-formatter"
	},
	// CSS
	"[css]": {
		// 拡張機能のPrettierを適用する
		"editor.defaultFormatter": "esbenp.prettier-vscode"
	},
	// SCSS
	"[scss]": {
		// 拡張機能のPrettierを適用する
		"editor.defaultFormatter": "esbenp.prettier-vscode"
	},
	// JavaScript
	"[javascript]": {
		// 拡張機能のPrettierを適用する
		"editor.defaultFormatter": "esbenp.prettier-vscode"
	},
	// json
	"[json]": {
		// 拡張機能のPrettierを適用する
		"editor.defaultFormatter": "esbenp.prettier-vscode"
	},
	// PHP
	"[php]": {
		// 拡張機能のphpcbfを適用する
		"editor.defaultFormatter": "persoderlind.vscode-phpcbf",
		// ペースト時、自動的に整形しない
		"editor.formatOnSave": false
	},
	// markdown
	"[markdown]": {
		// 拡張機能のmarkdownlintを適用する
		"editor.defaultFormatter": "DavidAnson.vscode-markdownlint",
		// ペースト時、自動的に整形しない
		"editor.formatOnPaste": false
	},
	// XML
	"[xml]": {
		// 拡張機能のXML Formatを適用する
		"editor.defaultFormatter": "mikeburgh.xml-format"
	},
	// ====================================
	// 言語別個別設定
	// ====================================
	// 【PHP】サジェスト機能を有効にする
	"php.suggest.basic": false,
	// 【PHP】バリデーターを有効にする
	"php.validate.enable": false,
	// 【JavaScript】自動インポートを有効にする
	"javascript.suggest.autoImports": true,
	// 【JavaScript】インポートパスの自動更新を有効にする
	"javascript.updateImportsOnFileMove.enabled": "always",
	// ====================================
	// その他の設定
	// ====================================
	// 空フォルダがある場合、コンパクト形式で表示する
	"explorer.compactFolders": false,
	// インデントの自動検出を設定する
	"editor.detectIndentation": false,
	// インデントを空白（半角スペース）に設定する
	"editor.insertSpaces": false,
	// 区切り文字（単語の境界文字）を設定する
	"editor.wordSeparators": "`~!@#%^&*()=+[{]}\\|;:'\",.<>/?",
	// スニペットのサジェスト位置を設定する
	"editor.snippetSuggestions": "top",
		// 小文字検索の場合、大文字と小文字を区別せずに検索し、それ以外の場合は区別して検索する（ファイル検索のみに適用）
	"search.smartCase": true,
	// デフォルトのLint機能を有効にする
	"scss.validate": false,
	"css.validate": false,
	// DOCTYPE宣言書き換え
	"emmet.variables": {
		"lang": "ja", // => <html lang="ja">
	},
	// ====================================
	// 拡張機能の個別設定
	// ====================================
	// ------------------------------------
	// indent-rainbow
	// ------------------------------------
	// インデントカラー
		"indentRainbow.colors": ["rgba(153, 40, 57, 0.24)", "rgba(111, 115, 30, 0.24)", "rgba(30, 115, 102, 0.24)", "rgba(85, 30, 115, 0.24)"],
	// ------------------------------------
	// Live Server
	// ------------------------------------
	// 起動時、IPアドレスをローカルIP形式に変更する
	"liveServer.settings.useLocalIp": true,
	// 起動できなかった場合、ポップアップメッセージを非表示にする
	"liveServer.settings.donotShowInfoMsg": true,
	// 起動時、HTMLファイル上にタグがない場合のエラーメッセージを非表示にする
	"liveServer.settings.donotVerifyTags": true,
	// ------------------------------------
	// CodeSnap
	// ------------------------------------
	// 背景色
	"codesnap.backgroundColor": "#70cdc9",
	// エディタの影
	"codesnap.boxShadow": "rgba(0, 0, 0, 0.2) 0px 20px 100px",
	// エディタの行番号表示
	"codesnap.showLineNumbers": false,
	// シャッターボタン機能設定
	"codesnap.shutterAction": "copy",
	// ------------------------------------
	// Insert <br> Tag
	// ------------------------------------
	"insert-br-tag.enableOnLanguage": [
		// 任意の言語で有効化する
		"html",
		"php"
		"javascript",
	],
	// ------------------------------------
	// Code Spell Checker
	// ------------------------------------
	// 単語登録（VScode全体に適用）
	"cSpell.userWords": [
		"hoge",
		"fuga",
		"piyo",
	],
	// ------------------------------------
	// phpcbf
	// ------------------------------------
	// パスの登録
	"phpcbf.executablePath": "phpcbf.bat",
	// 保存時、PHPのコードを整形する
	"phpcbf.onsave": true,
	// 標準コーディングルールを設定する
	"phpcbf.standard": "WordPress",
}

おわりに

1つ設定に対して和訳やデフォルト値を細かく記載したので、かなりの文章量になってしまいましたが、これらのカスタマイズをすることで、みなさまの開発環境が少しでも快適になりましたら幸いです！

また、現時点（2023年1月）でのVScodeの設定のため、環境が変わり次第加筆修正予定です！

それでは、良いVScodeライフを！

参考サイト

• VScode公式ドキュメント