大量のソースコードが入ったプロジェクトでは、
「自分が担当する機能だけを見たい！」というケースがよくあります。
VS Codeにはファイルを非表示にする設定（files.exclude）はありますが、手動で切り替えるのは面倒です。
そこで今回は、Settings Cycler × Better Status Bar を使って、
ボタンひとつでフォルダ群の表示切替ができる便利な環境を作る方法を紹介します。
前提：対象プロジェクトのフォルダ構成
この記事では、以下のような単純なプロジェクト構成を例に説明します。
project/
├─ FeatureA/
│ └─ FeatureA_placeholder.txt
├─ FeatureB/
│ └─ FeatureB_placeholder.txt
├─ FeatureC/
│ └─ FeatureC_placeholder.txt
├─ Common/
│ └─ Common_placeholder.txt
└─ Docs/
└─ Docs_placeholder.txt
よくある「機能A / 機能B / 機能C / 共通 / ドキュメント」という構成です。
実現したいこと
以下の表示切替を実現します。
- 全てのフォルダ、ファイルを表示
- 機能A、機能B、機能Cに関するフォルダ、ファイルを表示
- 共通のフォルダ、ファイルを表示
- ドキュメントのフォルダ、ファイルを表示
設定手順
① プロジェクトを VS Code で開く
既存システムのコードフォルダを VS Code で開きます。
② 拡張機能をインストール
以下の拡張機能を追加します。
- Settings Cycler
→ 複数の設定セットを切り替える仕組みを提供する - Better Status Bar
→ ステータスバーに “表示切替ドロップダウン” を表示可能にする
③ ワークスペースのsettings.jsonを開く
以下より、Open Workspace Settings (JSON)を検索して開きます。
Ctrl + Shift + P（Mac: Cmd + Shift + P）
④ 以下をsettings.jsonに貼り付けて保存する
{
// ======================================================
// Settings Cycler：フォルダ表示プリセット切替
// ======================================================
"settings.cycle": [
// ---------------------------------------------------
// ① 全て表示
// ---------------------------------------------------
{
"id": "scopeAll",
"overrideWorkspaceSettings": true,
"values": [
{
"files.exclude": {}
}
]
},
// ---------------------------------------------------
// ② FeatureA / FeatureB / FeatureC だけ表示
// ---------------------------------------------------
{
"id": "scopeFeatures",
"overrideWorkspaceSettings": true,
"values": [
{
"files.exclude": {
"FeatureA/**": false,
"FeatureB/**": false,
"FeatureC/**": false,
"Common/**": true,
"Docs/**": true,
"*.*": false
}
}
]
},
// ---------------------------------------------------
// ③ Common だけ表示
// ---------------------------------------------------
{
"id": "scopeCommon",
"overrideWorkspaceSettings": true,
"values": [
{
"files.exclude": {
"FeatureA/**": true,
"FeatureB/**": true,
"FeatureC/**": true,
"Common/**": false,
"Docs/**": true,
"*.*": false
}
}
]
},
// ---------------------------------------------------
// ④ Docs だけ表示
// ---------------------------------------------------
{
"id": "scopeDocs",
"overrideWorkspaceSettings": true,
"values": [
{
"files.exclude": {
"FeatureA/**": true,
"FeatureB/**": true,
"FeatureC/**": true,
"Common/**": true,
"Docs/**": false,
"*.*": false
}
}
]
}
],
// ======================================================
// Better Status Bar：ステータスバーに切替メニュー追加
// ------------------------------------------------------
// 下部ステータスバーのドロップダウンから
// Settings Cycler のプリセットを選択するための“ラッパーコマンド”
// ------------------------------------------------------
// ※ ここに登録した ID を dropdowns.commands で参照する
// ======================================================
"betterStatusBar.commands": [
{
"id": "scope.all",
"label": "全て表示",
"command": "settings.cycle.scopeAll",
"useVsCodeApi": true,
"alignment": 2,
"color": "statusBar.foreground"
},
{
"id": "scope.features",
"label": "機能ABC",
"command": "settings.cycle.scopeFeatures",
"useVsCodeApi": true,
"alignment": 2,
"color": "statusBar.foreground"
},
{
"id": "scope.common",
"label": "共通のみ",
"command": "settings.cycle.scopeCommon",
"useVsCodeApi": true,
"alignment": 2,
"color": "statusBar.foreground"
},
{
"id": "scope.docs",
"label": "Docsのみ",
"command": "settings.cycle.scopeDocs",
"useVsCodeApi": true,
"alignment": 2,
"color": "statusBar.foreground"
},
{
"id": "dummy.keepAlive",
"label": " ",
"command": "workbench.action.none",
"alignment": 2
}
],
// ======================================================
// ステータスバーのドロップダウンメニュー定義
// ------------------------------------------------------
// Better Status Bar に表示される「フォルダ切替」UI。
// ここに列挙したコマンドがプルダウンで選択できる。
// =====================================================
"betterStatusBar.dropdowns": [
{
"id": "folderSelector",
"label": "$(file-submodule) 表示フォルダ切替",
"tooltip": "表示するフォルダを選択",
"commands": [
"scope.all",
"scope.features",
"scope.common",
"scope.docs"
],
"options": {
"title": "表示するフォルダセットを選んでください",
"placeholder": "フォルダセットを選択"
}
}
],
"betterStatusBar.defaultColor": "statusBar.foreground"
}
使用方法
① VSCodeのステータスバーに表示されている「表示フォルダ切替」をクリックします。
② ドロップダウンリストが表示されるため、切り替えたい機能を選択します。
③ 選択した機能のフォルダのみ表示されます。
まとめ
Settings Cycler × Better Status Bar により、VSCodeのフォルダ表示をワンクリック切替できる環境が構築できます。
大規模プロジェクトや複数機能並行開発の現場では特に効果的で、開発効率の向上に直結するため、ぜひ取り入れてみてください！