✏️

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

2022/10/16に公開

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

見ずらいと思った原因

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

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

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

手順

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

インデントの幅を設定するフィールド

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

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


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

下層のフォルダが横に並んでいる

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

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

手順

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

チェックを外す

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

下層フォルダがぶら下がっている
見事にぶら下がりました!

Discussion