こんにちは、こんばんは
2025年でバックエンドエンジニア2年目のiniです。
いまさらですが、すごくストレス解消になった設定などを共有できればと思っています。
初めて、記載するのでご了承ください<(_ _)>
早速本題
もっとエクスプローラー見やすくしたいですよね？
普段Pythonのflaskを使って開発していて、
そのベースとなる環境を作ったときのエクスプローラー
まずこちらを見てください。
これ、初期の状態です。
階層が一応深く分かれていて一件デフォルトでもいいじゃんって思うかもですが、
これがフォルダー、ファイルが増えていくとどこの階層なのかわからなくなっていきます。
（もちろんこのまま開発していっても行けるとは思います…）
これを最終的には
このようにします。
ならべてみると
結構わかりやすくなったんじゃないでしょうか？
やったことをまとめると
- 階層の幅を広げる
- フォルダの中に一つのフォルダしかなくても階層に分ける
- アイコンを付ける
の3ステップです。
設定と拡張機能に分けて手順を説明していきます。（時間ない！って方は結論まで飛んでください！）
設定でやること
設定をいじるには、 Ctrl+,で設定画面に行くことができます。
そして基本的に検索フィールドに打ってGUI操作します。
※ 検索フィールドとは
この画面の設定の検索の場所を指しています
（正しくなかったらすみません。人によっては検索バーとかかもしれません）
階層の幅を広げる
- 検索フィールドに
tree.indentと入力して、デフォルト値が8なのでそれを20～25の間の数字に変える。
これで幅が広がります！
個人的には20が一番見やすいかなと思ってます。
フォルダの中に一つのフォルダしかなくても階層分けする
ここに関しては、好き嫌いあるかもなので何とも言えませんが、
すべてのフォルダ統一して階層をわけて見やすくするのがいいと思い紹介しています。
- 検索フィールドに
explorer.compactFoldersと入力して、✅をはずす。
これですべてのフォルダが統一して階層を表示するようになりました。
拡張機能を追加
名前:
vscode-icons
ID:vscode-icons-team.vscode-icons
説明:Icons for Visual Studio Code
バージョン:12.13.0
パブリッシャー:VSCode Icons Team
VS Marketplace リンク: https://marketplace.visualstudio.com/items?itemName=vscode-icons-team.vscode-icons
これを追加してください。
追加方法は
左のサイドバー(正式にはプライマリー サイドバーらしいです)にある
このアイコンを押して
vscode-icons と検索してもいいですし上の VS Marketplace のリンクから飛んで追加しても構いません。
アイコンがエクスプローラーで表示されます。
フォルダーに色がついたりするので間違えて開いたりしなくなりました！
結論（これだけ見れば実質ブログ全体と同じ…）
読んでくださってる皆さんの時間も有限です。
結論から言いますと
設定
-
Ctrl+,で設定に行きます。（⚙マークでも開けます） - 検索フィールドに
tree.indentと入力して、デフォルト値が8なのでそれを20～25の間の数字に変える。 - 検索フィールドに
explorer.compactFoldersと入力して、✅をはずす。
拡張機能
vscode-iconsを追加する。
終わりです。
これで作業効率が上がると思います。（思うだけかもですが、個人差…ってことにしておきます。）
※ この記事は基本的にVSCodeをフォーカスして話していますが、VSCodeライクなWindsurfも同様に設定できますのでぜひ同じように設定してみてください！