VS Codeのサイドバーのフォルダ表示を見やすくカスタムする。

VS Codeのサイドバーのフォルダの階層表示がなんだか見ずらいと思い、設定を2か所変更して改善した方法をご紹介します。

見ずらいと思った原因

• その1：下層フォルダのインデントが窮屈。
• その2：下層のフォルダが並んで表示されている。

改善その1：インデントの幅を広げる。

上記スクショは初期状態です。インデント幅が狭いですね。
以下の手順で変更します。

手順

• 1.画面左下の歯車アイコンをクリック。
• 2.開いたポップアップメニューから「設定」をクリック。
• 3.設定の検索フィールドにtree.indentと入力する。
• 4.「Workbench › Tree: Indent ツリーのインデントをピクセル単位で制御します。」のフィールドに任意の数値を入力する。（20くらいが良さげです。）

サイドバーを見ると・・・

インデントの幅が広がりました！
お好みのサイズに設定してみてください。

---

改善その2：下層のフォルダをぶら下がり表示にする。

下層のフォルダがスラッシュで並んで表示されているのが見ずらいです。
ぶら下がってほしい・・・

以下の手順で変更します。

手順

• 1.画面左下の歯車アイコンをクリック。
• 2.開いたポップアップメニューから「設定」をクリック。
• 3.設定の検索フィールドにexplorer.compactFoldersと入力する。
• 4.現れたチェックボックスのチェックを外す。

サイドバーを見ると・・・

見事にぶら下がりました！