WebDesigner's Memorandumウェブデザイナーの備忘録

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

Visual Studio Codeのエクスプローラーを見やすくするカスタマイズ方法

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

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

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

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

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

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

tree.renderIndentGuidesの設定

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

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

そもそもインデントの幅が狭くて見にくい場合は「tree.indent」の数値を変更します。
デフォルトは「8」になっていて、「4」以上を指定する必要があります。

tree.indentの設定

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

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

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

エクスプローラーの表示

著者について

プロフィール画像

サイトウ マサカズ@31mskz10

1997年生まれ。2016年から専門学校でデザインについて勉強。卒業後は神戸の制作会社「N'sCreates」にウェブデザイナーとして入社。このブログでは自分の備忘録も兼ねて、ウェブに関する記事や制作環境を効率的に行うための記事を書いています。

Twitterをフォロー Facebookでいいね