🐰

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

2023/01/01に公開約29,300字

はじめに

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. ステータスバー

VScodeのUIの各部名称

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です。

ここまでの設定を適用すると、エディタは以下の通りの画面になります。
設定を適用し、27行目を選択した時のエディタの画面
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"です。

文字サイズ

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のアイコン例
Material Icon Themeのアイコン例

ツリーのインデント

settings.json
"workbench.tree.indent": 18,

18指定です。
値は1624くらいがちょうどいいかなと思います。
デフォルト値は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"指定です。

ここまでの設定を適用すると、エディタは以下の通りの画面になります。
エディタでキャレットが点滅しているgif画像

ターミナルは以下の通りの画面になります。
ターミナルでキャレットが点滅しているgif画像

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の見栄えは以下の通りの画面になります。
設定を適用した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ライフを!

参考サイト

Discussion

ログインするとコメントできます