はじめに
VS Codeを使っていて、プロジェクトの規模が大きくなりフォルダ階層が深くなった時に「あれ？このファイルってどこのフォルダに入ってるんだっけ？」と迷子になったことはありませんか？
デフォルトの設定だとツリーのインデント幅が少し狭く、階層を表すガイド線も見えにくいことがあります。
今回はsettings.jsonにたった3行追加するだけで、ファイルツリーの視認性を劇的に向上させる設定を紹介します。
設定方法
-
Cmd + Shift + P(WindowsはCtrl + Shift + P) を押してコマンドパレットを開きます。 -
Preferences: Open User Settings (JSON)を入力して選択し、settings.jsonを開きます。 - 以下のコードを追加（または修正）して保存します。
settings.json
{
// 既存の設定...
// 1. ツリーのインデント幅を広げる（デフォルトは8px程度）
"workbench.tree.indent": 15,
// 2. インデントのガイド（縦線）を常に表示する
"workbench.tree.renderIndentGuides": "always",
// 3. ガイド線の色を少し目立つグレーに変更する
"workbench.colorCustomizations": {
"tree.indentGuidesStroke": "#bcb6b6"
}
}
画像で見る主な変更点:
- インデント幅の拡大 (Wider Indent): 左側の余白が広がり（8px→15px）、階層構造がよりはっきりと認識できるようになりました。
- ガイド線の強調 (Visible Guide Stroke): 薄くて見づらかったガイド線が、常にくっきりとしたグレー（#bcb6b6）で表示されるようになり、親子関係が一目瞭然になりました。
解説
それぞれの設定について詳しく解説します。
1. workbench.tree.indent: 15
ファイルツリーの階層ごとの字下げ幅（インデント）をピクセル単位で指定します。
デフォルトは 8 程度で少し狭いため、これを 15 に増やすことで、パッと見た時にファイルがどの階層にあるかが直感的に分かりやすくなります。
お好みで 20 くらいまで広げても見やすいです。
2. workbench.tree.renderIndentGuides: "always"
階層を表すガイド（縦線）の表示設定です。
デフォルトではマウスを乗せた時（ホバー時）しか表示されないことがありますが、"always" にすることで常に縦線が表示され、ディレクトリ構造がより明確になります。
3. workbench.colorCustomizations
ガイド線（tree.indentGuidesStroke）の色を個別に指定しています。
#bcb6b6 は少し明るめのグレーです。使用しているカラーテーマによっては、デフォルトのガイド線が薄すぎて背景に溶け込んでしまうため、ここで明示的に視認しやすい色を指定しています。