はじめに

　一流の料理人は自分だけのマイ鍋やらマイ調味料やらを持ち歩いているとかいないとかという話を聞いたことはないですか？
ソフトウェア開発者も同じように、自分だけの開発環境を育てるものらしいです。(私はこの行為を盆栽と呼んでいる)

そこで、ほぼ毎日使うVSCodeの設定を少し盆栽してみました。
拡張機能に頼らなくても、それなりに快適な環境が実現できたので、その内容を共有します。

この記事で扱う範囲

汎用性を重視し、標準のVSCode本体の設定のみとします。
この記事で紹介する内容は、基本的に個人の User Settings を盆栽するための例です。
一方で、改行コード、フォーマット、インデントのようにプロジェクト全体の整合性へ影響する項目は、チームではワークスペース設定、.editorconfig、各種フォーマッタ設定を優先して決めるのが安全です。

0. 設定方法

VSCodeの設定は、エディタ左下の歯車アイコンから、settingsを開く（Ctrl + ,, Cmd + , でも可）ことで、GUIから変更できます。また、settings.jsonを直接編集も可能です。
左上のOpen Settings (JSON)を押すと、settings.jsonが開きます。
基本的にはコードベースで書くほうが、共有や反映がしやすいのでおすすめです。

1. エディタ

 "editor.fontFamily": "'Monaspace Neon', monospace",
"editor.wrappingIndent": "indent",
"editor.showFoldingControls": "always",
"editor.minimap.showSlider": "always",
"editor.renderWhitespace": "all",
"editor.formatOnPaste": true,
"editor.formatOnSave": true,
"editor.tabSize": 2,

editor.fontFamily

エディタで表示するフォントを指定する設定です。

文字の見やすさ、横幅、記号の判別しやすさは、作業体験に影響します。
基本的には、等幅フォントを選ぶのが無難です。
値にはフォント名を文字列で指定します。複数候補をカンマ区切りで並べてフォールバックさせることもできます。

私は Monaspace Neon を愛用しています。
この例をそのまま使う場合は、もちろん対応するフォントをインストールしておく必要があります。

editor.wrappingIndent

長い行が折り返されたとき、続きの行をどのようにインデントするかを決める設定です。

主な選択肢は none、same、indent、deepIndent です。
same, indentあたりが見やすいと思います。

editor.showFoldingControls

コード折りたたみ用のボタンを、ガターにいつ表示するかを決める設定です。

主な選択肢は always、never、mouseover です。

editor.minimap.showSlider

ミニマップのスクロールスライダーをいつ表示するかを決める設定です。

主な選択肢は always と mouseover です。
私はコードの現在地を常に把握したいので always にしています。

editor.renderWhitespace

空白文字をどの程度表示するかを決める設定です。

主な選択肢は none、boundary、selection、trailing、all です。
昔は拡張機能がないとできなかった気がしますが、便利になったものですね。

editor.formatOnPaste, editor.formatOnSave

貼り付け時、保存時に自動整形を走らせるかどうかの設定です。

true / false で設定します。
自分は常にコードを整形しておきたいので、両方とも true にしています。
ただし、Pythonのようなインデントが意味を持つ言語や、Makefileのように空白やタブの扱いが厳密なファイルでは、意図しない整形が走ることがあるので注意が必要です。
また、利用するフォーマッタや言語サーバーによって挙動が変わるため、全言語で一律に有効化するよりも、必要に応じて言語別設定やワークスペース設定で使い分けるほうが安全です。

editor.tabSize

タブ文字を何文字分の幅として扱うかを決める設定です。

よく使われるのは 2 と 4 です。
設定ファイルやWeb系では 2、JavaやC系では 4 を採ることが多く、
プロジェクトの文化に合わせるのが基本です。
後述の記法により、言語ごとに別の設定を持たせることもできます。

言語ごとにEditor設定を変える

VSCodeでは [javascript] や [python] のように言語ごとに括った設定を持たせられます。
例えば、Javaだけタブ幅を4にしたい場合は、以下のように書きます。

"[java]": {
  "editor.tabSize": 4
}

editor.formatOnSave や editor.formatOnPaste のように副作用が出やすい設定も、この書き方で言語ごとに切り替えられます。
個人設定で広く試しつつ、チーム開発では対象言語だけを明示する、という運用にすると事故を減らしやすいです。

2. ファイル

この節の設定は、とくにチームの規約や既存ファイルへの影響が出やすいので、個人設定へ入れる前にプロジェクト側のルールを確認するのがおすすめです。

"files.insertFinalNewline": true,
"files.trimFinalNewlines": true,
"files.trimTrailingWhitespace": true,
"files.encoding": "utf8",
"files.eol": "\n"

files.insertFinalNewline

保存時に、ファイル末尾へ改行を自動で入れる設定です。

選択肢は true / false です。
多くの開発環境では末尾改行ありが採用されているかと思います。

files.trimFinalNewlines

ファイル末尾に余分に入った複数の改行を削る設定です。

選択肢は true / false です。

files.trimTrailingWhitespace

各行の末尾にある不要な空白を保存時に削除する設定です。

選択肢は true / false です。
普段のコードでは有用ですが、Markdownの意図的な行末スペースや、Makefileを含む一部のツール用ファイルでは意味を持つことがあります。
全体に一律適用するより、必要なら言語別設定やワークスペース設定で制御するのが安全です。

files.encoding

新しく開くファイルや保存時に使う文字コードの基準を決める設定です。

よく使う値は utf8 です。

files.eol

改行コードを何で保存するかを決める設定です。

主な選択肢は \n、\r\n、auto です。
\n はLF、\r\n はCRLF、auto はOSに応じた改行コードを使います。
基本的には、LFが採用されるプロジェクトが多いですが、既存リポジトリの既定とずれると不要な差分が出ます。
特にWindows向け資産や古いツールチェーンを含むプロジェクトでは注意が必要なので、チームの文化や .editorconfig に合わせるのが無難です。

3. ワークベンチ

"workbench.editor.pinnedTabsOnSeparateRow": true,
"workbench.view.alwaysShowHeaderActions": true

workbench.editor.pinnedTabsOnSeparateRow

ピン留めしたタブを通常タブとは別の行に分ける設定です。
(タブってピン留めできるんですね...知らなかった)

選択肢は true / false です。
ピン留めしたタブが常に見えるようになるので、作業中のファイルを見失いにくくなって便利ですね。
なお、この設定は workbench.editor.showTabs が multiple のときに有効です。

workbench.view.alwaysShowHeaderActions

サイドバーやパネルのヘッダー操作を常に表示する設定です。

選択肢は true / false です。
UIを常時見せたいか、必要時だけ見せたいかで選べます。

4. Git

Gitや差分表示関連の設定です。

"git.autofetch": true,
"scm.defaultViewMode": "tree",
"scm.diffDecorationsGutterWidth": 5,
"diffEditor.ignoreTrimWhitespace": false

git.autofetch

リモートリポジトリの更新を自動取得する設定です。

選択肢は true / false です。
最新状態を把握しやすくなりますが、巨大なリポジトリの場合だと負荷が大きいので注意です。
社内ネットワーク、VPN環境、組織のセキュリティポリシーによっては自動通信の扱いに制約があるため、企業環境では組織のネットワーク方針に従って有効化してください。

scm.defaultViewMode

ソース管理ビューで変更ファイルをどう並べるかを決める設定です。

主な選択肢は tree と list です。
treeにすると、変更ファイルのディレクトリ構造を把握しやすくなります。

scm.diffDecorationsGutterWidth

エディタ左側のガターに表示される差分マーカーの幅を調整する設定です。

数値で指定し、公式スキーマ上は 1〜5 px の選択式です。
少し広めにしておくと、差分の有無が視覚的にわかりやすくなるので設定しています。

diffEditor.ignoreTrimWhitespace

差分表示で、前後の空白だけの変更を無視するかどうかの設定です。

選択肢は true / false です。
私は厳密に管理したいので false にしています。

5. ターミナル・検索など

"terminal.integrated.fontFamily": "Cascadia Code NF",
"debug.console.fontFamily": "Cascadia Code NF",
"search.showLineNumbers": true,

terminal.integrated.fontFamily, debug.console.fontFamily

それぞれ、統合ターミナルとデバッグコンソールで使うフォントを指定する設定です。

エディタとは別設定なので、コード用とターミナル用で分けることも可能です。
私はWindows環境でStarshipを使っているので、NerdFont対応のCascadia Code NFを指定しています。
ここも、エディタのフォントと同様に、対応するフォントをインストールしておく必要があります。

search.showLineNumbers

検索結果に行番号を表示するかどうかの設定です。

選択肢は true / false です。

6. インデント

インデントの視認性を上げると言えばIndent Rainbowのような拡張機能が有名ですが、
いつの間にかVSCode標準でも括弧ペアの色分けや、インデントガイドの色分けができるようになっていました。

"editor.bracketPairColorization.enabled": true,
"editor.guides.bracketPairs": "active",
"workbench.colorCustomizations": {
  "editorIndentGuide.background1": "#fabd2f4d",
  "editorIndentGuide.background2": "#d3869b4d",
  "editorIndentGuide.background3": "#8ec07c4d",
  "editorIndentGuide.background4": "#fe80194d",
  "editorIndentGuide.background5": "#83a5984d",
  "editorIndentGuide.background6": "#b8bb264d",
  "editorIndentGuide.activeBackground1": "#fabd2f",
  "editorIndentGuide.activeBackground2": "#d3869b",
  "editorIndentGuide.activeBackground3": "#8ec07c",
  "editorIndentGuide.activeBackground4": "#fe8019",
  "editorIndentGuide.activeBackground5": "#83a598",
  "editorIndentGuide.activeBackground6": "#b8bb26",
  "editorBracketHighlight.foreground1": "#fabd2f",
  "editorBracketHighlight.foreground2": "#d3869b",
  "editorBracketHighlight.foreground3": "#8ec07c",
  "editorBracketHighlight.foreground4": "#fe8019",
  "editorBracketHighlight.foreground5": "#83a598",
  "editorBracketHighlight.foreground6": "#b8bb26",
  "editorBracketHighlight.unexpectedBracket.foreground": "#fb4934",
  "editorWhitespace.foreground": "#79695898"
}

editor.bracketPairColorization.enabled

対応する括弧ペアを色分け表示する設定です。

選択肢は true / false です。
ネストの深いコードを視覚的に追いやすくなります。

editor.guides.bracketPairs

括弧ペアに対応するガイド線をどこまで表示するかを決める設定です。

主な選択肢は false、active、true です。
現在注目しているペアだけ強調したいなら active、
常に表示したいなら true を選びましょう。

workbench.colorCustomizations

VSCode本体の色設定を部分的に上書きするための設定です。

テーマ全体はそのままに、括弧の色、インデントガイドの色、空白文字の色などを個別に調整できます。
見やすさを上げたい場所だけをピンポイントで変えたいときに便利です。
私は、Gruvbox Themeというテーマを使っているので、Gruvbox系のパレットを参考に色を調整しています。
ただし、テーマやディスプレイ環境次第ではコントラストが不足して見づらくなることもあるため、適用後は実際の表示で見やすさを確認してください。

7. 完成形

最後に、この記事で扱った項目をまとめた settings.json を載せます。

フォント名や色は環境に合わせて調整してください。
そのまま丸ごと適用するより、まずは個人の User Settings で試し、チーム設定と競合しそうな項目はワークスペース側のルールに合わせて間引くのがおすすめです。

{
  // 1. エディタ
  "editor.fontFamily": "'Monaspace Neon', monospace",
  "editor.wrappingIndent": "indent",
  "editor.showFoldingControls": "always",
  "editor.minimap.showSlider": "always",
  "editor.renderWhitespace": "all",
  "editor.formatOnPaste": true,
  "editor.formatOnSave": true,
  "editor.tabSize": 2,

  "[java]": {
    "editor.tabSize": 4
  },

  // 2. ファイル
  "files.insertFinalNewline": true,
  "files.trimFinalNewlines": true,
  "files.trimTrailingWhitespace": true,
  "files.encoding": "utf8",
  "files.eol": "\n",

  // 3. ワークベンチ
  "workbench.editor.pinnedTabsOnSeparateRow": true,
  "workbench.view.alwaysShowHeaderActions": true,

  // 4. Git
  "git.autofetch": true,
  "scm.defaultViewMode": "tree",
  "scm.diffDecorationsGutterWidth": 5,
  "diffEditor.ignoreTrimWhitespace": false,

  // 5. ターミナル・検索
  "terminal.integrated.fontFamily": "Cascadia Code NF",
  "debug.console.fontFamily": "Cascadia Code NF",
  "search.showLineNumbers": true,

  // 6. インデント・括弧
  "editor.bracketPairColorization.enabled": true,
  "editor.guides.bracketPairs": "active",
  "workbench.colorCustomizations": {
    "editorIndentGuide.background1": "#fabd2f4d",
    "editorIndentGuide.background2": "#d3869b4d",
    "editorIndentGuide.background3": "#8ec07c4d",
    "editorIndentGuide.background4": "#fe80194d",
    "editorIndentGuide.background5": "#83a5984d",
    "editorIndentGuide.background6": "#b8bb264d",
    "editorIndentGuide.activeBackground1": "#fabd2f",
    "editorIndentGuide.activeBackground2": "#d3869b",
    "editorIndentGuide.activeBackground3": "#8ec07c",
    "editorIndentGuide.activeBackground4": "#fe8019",
    "editorIndentGuide.activeBackground5": "#83a598",
    "editorIndentGuide.activeBackground6": "#b8bb26",
    "editorBracketHighlight.foreground1": "#fabd2f",
    "editorBracketHighlight.foreground2": "#d3869b",
    "editorBracketHighlight.foreground3": "#8ec07c",
    "editorBracketHighlight.foreground4": "#fe8019",
    "editorBracketHighlight.foreground5": "#83a598",
    "editorBracketHighlight.foreground6": "#b8bb26",
    "editorBracketHighlight.unexpectedBracket.foreground": "#fb4934",
    "editorWhitespace.foreground": "#79695898"
  }
}

おわりに

いかがだったでしょうか。
拡張機能に頼らなくても、VSCodeの標準設定だけで結構快適になったのではないでしょうか。
特に、保存時の自動整形や、インデントガイドの色分けなどは、QOLがかなり上がるので設定してよかったなと思います。
ただし、フォーマット、行末空白、改行コードの扱いは、個人設定で便利でもプロジェクト全体には副作用になり得ます。
基本的には .editorconfig やフォーマッタの設定を優先し、必要なら言語別設定やワークスペース設定で使い分けてください。

ぜひ、皆さんも自分の開発環境を盆栽して、幸せな開発ライフを過ごしましょう！

(最近はコーディングエージェントに書かせるから、エディタで直接コードを書くことは無いって？うーん😭)

はじめに

この記事で扱う範囲

0. 設定方法

1. エディタ

`editor.fontFamily`

`editor.wrappingIndent`

`editor.showFoldingControls`

`editor.minimap.showSlider`

`editor.renderWhitespace`

`editor.formatOnPaste`, `editor.formatOnSave`

`editor.tabSize`

言語ごとにEditor設定を変える

2. ファイル

`files.insertFinalNewline`

`files.trimFinalNewlines`

`files.trimTrailingWhitespace`

`files.encoding`

`files.eol`

3. ワークベンチ

`workbench.editor.pinnedTabsOnSeparateRow`

`workbench.view.alwaysShowHeaderActions`

4. Git

`git.autofetch`

`scm.defaultViewMode`

`scm.diffDecorationsGutterWidth`

`diffEditor.ignoreTrimWhitespace`

5. ターミナル・検索など

`terminal.integrated.fontFamily`, `debug.console.fontFamily`

`search.showLineNumbers`

6. インデント

`editor.bracketPairColorization.enabled`

`editor.guides.bracketPairs`

`workbench.colorCustomizations`

7. 完成形

おわりに

はじめに

この記事で扱う範囲

0. 設定方法

1. エディタ

editor.fontFamily

editor.wrappingIndent

editor.showFoldingControls

editor.minimap.showSlider

editor.renderWhitespace

editor.formatOnPaste, editor.formatOnSave

editor.tabSize

言語ごとにEditor設定を変える

2. ファイル

files.insertFinalNewline

files.trimFinalNewlines

files.trimTrailingWhitespace

files.encoding

files.eol

3. ワークベンチ

workbench.editor.pinnedTabsOnSeparateRow

workbench.view.alwaysShowHeaderActions

4. Git

git.autofetch

scm.defaultViewMode

scm.diffDecorationsGutterWidth

diffEditor.ignoreTrimWhitespace

5. ターミナル・検索など

terminal.integrated.fontFamily, debug.console.fontFamily

search.showLineNumbers

6. インデント

editor.bracketPairColorization.enabled

editor.guides.bracketPairs

workbench.colorCustomizations

7. 完成形

おわりに

`editor.fontFamily`

`editor.wrappingIndent`

`editor.showFoldingControls`

`editor.minimap.showSlider`

`editor.renderWhitespace`

`editor.formatOnPaste`, `editor.formatOnSave`

`editor.tabSize`

`files.insertFinalNewline`

`files.trimFinalNewlines`

`files.trimTrailingWhitespace`

`files.encoding`

`files.eol`

`workbench.editor.pinnedTabsOnSeparateRow`

`workbench.view.alwaysShowHeaderActions`

`git.autofetch`

`scm.defaultViewMode`

`scm.diffDecorationsGutterWidth`

`diffEditor.ignoreTrimWhitespace`

`terminal.integrated.fontFamily`, `debug.console.fontFamily`

`search.showLineNumbers`

`editor.bracketPairColorization.enabled`

`editor.guides.bracketPairs`

`workbench.colorCustomizations`