VSCode のサイドバーのエクスプローラー(ファイルツリー)とエディタのタブは、デフォルトのままだとどうにも見づらい。
不満は具体的にこの6つでした。
- 中身がフォルダ1つだけの階層が
features/recipes/componentsのように1行に潰される - インデントが浅くて、深い階層のどこにいるのか追えない
- アイコンの見た目が均一で、フォルダの区別がつかない
- タブが増えると横スクロールの奥に隠れて見えなくなる
- どのタブが未保存なのか分かりにくい
- 使っていないミニマップがエディタの横幅を占領している
これらは拡張機能1つと settings.json 8行で解決できます。
動作確認環境:VSCode 1.125.1(macOS)/ Material Icon Theme v5.36.1
結論
Material Icon Theme を入れて、settings.json に次を足します。
// ファイルアイコンを Material Icon Theme に(拡張のインストールが必要)
"workbench.iconTheme": "material-icon-theme",
// フォルダの1行圧縮(features/recipes/components)をやめる
"explorer.compactFolders": false,
// ツリーのインデントを深くする(デフォルトは 8)
"workbench.tree.indent": 16,
// 階層のガイド線(縦線)を消す
"workbench.tree.renderIndentGuides": "none",
// タブが画面幅を超えたら複数行に折り返す
"workbench.editor.wrapTabs": true,
// 未保存のタブの上部に色付きボーダーを出す
"workbench.editor.highlightModifiedTabs": true,
// タブにファイル名 + 親フォルダ名を表示する
"workbench.editor.labelFormat": "short",
// エディタ右のミニマップ(コードの縮小プレビュー)を消す
"editor.minimap.enabled": false
settings.json はコメントが書ける形式(JSONC)なので、このまま貼っても動きます。
フォルダの1行圧縮をやめる(explorer.compactFolders)
中身がフォルダ1つしかない階層を a/b/c と1行にまとめる表示はコンパクトフォルダーといって、VSCode 1.41(2019 年 11 月)からのデフォルト動作です(リリースノート)。
公式の設定説明には「Useful for Java package structures, for example.」(たとえば Java のパッケージ構造で便利)とあります(files.contribution.ts)。
少なくとも自分のプロジェクトではこの圧縮の恩恵がなく、クリックしたら想定と違う階層が開く戸惑いのほうが勝ちました。
false にすると、1階層ずつ素直にツリー表示されます。
インデントを深くする(workbench.tree.indent)
ツリーのインデント幅で、デフォルトは 8px です(4〜40 の範囲で指定可。listService.ts)。
コンパクトフォルダーを切って階層が縦に伸びると、8px の浅さでは余計に追いにくくなります。
倍の 16 にして、今のところ困っていません。
20 を推す記事もあります。
ガイド線を消す(workbench.tree.renderIndentGuides)
階層を示す縦のガイド線の設定です。
選択肢は none / onHover(マウスを乗せた列だけ表示)/ always の3つで、デフォルトは onHover。
インデントを 16 に広げると線がなくても階層を追えるようになるので、none で消しています。
逆に always で常時表示にすると、深くしたインデントの分だけ縦線が目立って、かえってうるさくなります。
フォルダを名前で認識して色分けする(Material Icon Theme)
定番のファイルアイコンテーマで、インストール数は 3,400 万超(2026 年 7 月時点)。
ファイル種別ごとのアイコンに加えて、フォルダを名前で認識して専用アイコンを付けてくれるのが効きます。
src や docs や test あたりのよくある名前は、何もしなくても色付きの専用アイコンになります(認識される名前の一覧)。
インストール後、settings.json で "workbench.iconTheme": "material-icon-theme" を指定すれば有効になります。
コマンドパレットで「Material Icons: Activate Icon Theme」を実行しても同じです。
フォルダの色やアイコンパックを変える設定(material-icon-theme.folders.color 等)も一通りあります(README)。
ちなみに拡張なしのデフォルトアイコンは Seti というテーマです(公式ドキュメント)。
Material の見た目が好みに合わなければ、代替は2つあります。
老舗の vscode-icons(2,400 万超。フレームワークの自動検出つき)と、元 VSCode デザインチームの Miguel Solorio 氏によるミニマル系の Symbols(88 万弱)です。
どちらに差し替えても、残りの設定はそのまま使えます。
タブ側の3行
タブについては先に残念なお知らせで、色分けなどの装飾系の拡張機能はまともなものが存在しません。
拡張 API がタブのスタイリングを許可しておらず、本体へのタブ色分けの機能要望も not planned でクローズされています(issue #210340)。
存在する Tabscolor などの拡張は VSCode 本体のファイルを書き換えるハックで、インストール破損の警告(YOUR CODE INSTALLATION IS CORRUPT)が出るうえ、macOS や一部の Linux では動かないことがあると README 自身が認めています。
というわけで、タブは標準設定で整えます。
タブを折り返して全部表示する(workbench.editor.wrapTabs)
デフォルト(false)では、タブが増えると横スクロールの奥に隠れます。
true にするとタブバーが複数行に折り返され、開いているファイルが常に全部見えます。
未保存のタブを目立たせる(workbench.editor.highlightModifiedTabs)
true にすると、未保存の変更があるタブの上部に色付きのボーダーが表示されます。
どのタブを保存していないかが一目で分かるようになり、地味に効きます。
タブに親フォルダ名も表示する(workbench.editor.labelFormat)
デフォルトはファイル名だけの表示で、同名ファイルを複数開いたときにだけ区別用のパスが付きます。
short にすると、常にファイル名 + 親フォルダ名の表示になります。
README.md や index.md をよく開くリポジトリでは、これがないとタブの区別がつきません。
(ここにタブ折り返し + 親フォルダ名表示のスクリーンショットを貼る)
ミニマップを消す(editor.minimap.enabled)
エディタ右側に出るコード全体の縮小プレビュー(ミニマップ)は、常時エディタの横幅を消費します。
スクロールバー代わりに使っていないなら、false で消すと本文の表示領域がその分広がります。
たまに使いたくなったら、メニューの「表示 → 外観 → ミニマップ」でその場だけ切り替えられます。
さらにいじりたい人向け
- ガイド線の色は
workbench.colorCustomizationsのtree.indentGuidesStrokeで変えられます - 関連ファイルを親ファイルの下に畳むファイルネスト(
explorer.fileNesting.enabled、デフォルト false)という別方向の整理術もあります。package.jsonの下に lock ファイルをぶら下げる、あれです - タブの表示名そのものを glob パターンで組み替える
workbench.editor.customLabels.patternsもあります(VSCode 1.88 で導入)
参考
- VSCode 1.41 リリースノート(コンパクトフォルダーの導入)
- microsoft/vscode - listService.ts(tree.indent / renderIndentGuides の定義)
- microsoft/vscode - files.contribution.ts(compactFolders / fileNesting の定義)
- microsoft/vscode - workbench.contribution.ts(wrapTabs / highlightModifiedTabs / labelFormat の定義)
- Material Icon Theme(Marketplace)
- File Icon Themes(公式ドキュメント)
