# Visual Studio Codeのエクスプローラーを見やすくするちょっとしたカスタマイズ

URL: https://webrandum.net/vscode-settings-explorer/
公開日: 2022-07-01
更新日: 2022-06-30
カテゴリー: 作業環境整備
タグ: Visual Studio Code
出典: Webrandum（著者: サイトウ マサカズ）

Visual Studio Codeでフォルダを開いている場合、サイドメニューの［エクスプローラー］部分にフォルダが階層化されて表示されます。

コードを書く上で、いまどの階層のファイルを開いていて、ファイルがどんな構成になっているかは非常に重要なのですが、デフォルトだとこの表示がかなり窮屈で、階層が増えていくとだんだん見にくくなります。

今回はこのエクスプローラーを見やすくするカスタマイズ方法をまとめておきます。

## インデントガイドを常に表示する

フォルダを開いている場合、そのフォルダにマウスオーバーすると、フォルダ内に入っていることが分かるようにガイドラインが表示されます。

しかし、マウスオーバーしているときしか表示されないのであまり意味がありません。

常に表示させたい場合は「tree.renderIndentGuides」の設定を「always」にします。

![tree.renderIndentGuidesの設定](https://webrandum.net/mskz/wp-content/uploads/2022/06/image_1-20.png)

これで常にインデントガイドが表示されるようになり、パッと見でどの階層のフォルダなのか分かりやすくなりました。

## インデントの幅をカスタマイズ

そもそもインデントの幅が狭くて見にくい場合は「tree.indent」の数値を変更します。

デフォルトは「8」になっていて、「4」以上を指定する必要があります。

![tree.indentの設定](https://webrandum.net/mskz/wp-content/uploads/2022/06/image_4-16.png)

自分の場合は「16」くらいがちょうどいい感じです。

ただし、フォルダ階層が深いプロジェクトばかりを扱う場合には、幅を広げた分1度にサイドバーに表示できるファイル名が短くなっていきます。

サイドバー部分は横スクロールもできないため、ファイル名が省略されてしまう点も注意が必要です。

非常に細かいことですが、使う頻度の高いアプリケーションですから、ちょっとしたことでも見やすくしていきたいものです。

![エクスプローラーの表示](https://webrandum.net/mskz/wp-content/uploads/2022/06/image_3-18.png)