大規模なプロジェクトで「あのファイルどこだっけ？」と探し回った経験はありませんか？
VSCodeのツリー表示機能は、単なるファイル一覧ではありません。プロジェクトの構造を視覚的に把握し、効率的にナビゲートするための強力なツールなんです。
でも、デフォルト設定のままでは、その真の力を発揮できていないかもしれません。インデントの幅、アイコンの表示、フォルダの展開方法など、カスタマイズ次第で作業効率が劇的に向上します。
この記事では、VSCodeのツリー表示機能を徹底的に解説し、あなたの開発環境を最適化する方法を初心者でも実践できるように詳しく紹介していきます。
1. VSCodeのツリー表示の基本：5つの主要ツリー
エクスプローラー（ファイルツリー）
VSCodeで最も使用頻度が高いツリー表示です。
基本構成：
ワークスペース名
├── 📁 src
│ ├── 📁 components
│ │ ├── 📄 Header.jsx
│ │ └── 📄 Footer.jsx
│ └── 📄 index.js
├── 📁 public
├── 📄 package.json
└── 📄 README.md
表示/非表示の切り替え：
ショートカット：
Windows/Linux: Ctrl + Shift + E
Mac: Cmd + Shift + E
または：
表示メニュー → エクスプローラー
アウトライン（コード構造ツリー）
現在開いているファイルの構造を表示します。
表示される要素：
JavaScript/TypeScript：
├── 🔧 変数
├── 📦 関数
├── 🏛️ クラス
├── 🔌 インポート
└── 📝 コメント
HTML：
├── <div>
├── <header>
├── <main>
└── <footer>
ソース管理（Gitツリー）
変更されたファイルをツリー形式で表示します。
変更
├── M src/components/Header.jsx （変更）
├── A src/utils/helper.js （新規）
├── D old-file.js （削除）
└── R renamed-file.js （リネーム）
検索結果ツリー
検索結果を階層構造で表示します。
検索結果 "TODO" - 15件
├── src/index.js
│ ├── Line 15: // TODO: エラー処理を追加
│ └── Line 42: // TODO: リファクタリング
└── src/components/App.jsx
└── Line 8: // TODO: パフォーマンス改善
タイムライン（履歴ツリー）
ファイルの変更履歴をツリー形式で表示します。
タイムライン
├── 今日
│ ├── 14:30 - Git: コミット "機能追加"
│ └── 10:15 - ローカル: 保存
└── 昨日
└── 18:00 - Git: コミット "バグ修正"
2. エクスプローラーのカスタマイズ設定
インデント（階層）の調整
インデント幅を変更する：
// settings.json
{
// ツリーのインデント幅（ピクセル）
"workbench.tree.indent": 20, // デフォルト: 8
// インデントガイドラインの表示
"workbench.tree.renderIndentGuides": "always",
// "onHover": ホバー時のみ
// "none": 表示しない
}
視覚的な比較：
インデント: 8px（狭い）
├ components
│├ Header.jsx
││└ Logo.jsx
インデント: 20px（広い）
├── components
│ ├── Header.jsx
│ │ └── Logo.jsx
ファイルアイコンテーマ
人気のアイコンテーマ：
// Material Icon Theme（最も人気）
{
"workbench.iconTheme": "material-icon-theme",
// フォルダアイコンの設定
"material-icon-theme.folders.theme": "specific",
"material-icon-theme.folders.color": "#90a4ae",
// アイコンの不透明度
"material-icon-theme.opacity": 1,
// ファイル関連付けカスタム
"material-icon-theme.files.associations": {
"*.service.ts": "nest",
"*.module.ts": "nest"
}
}
その他のアイコンテーマ：
1. vscode-icons
2. Nomo Dark Icon Theme
3. Bearded Icons
4. Chalice Icon Theme
5. City Lights Icon Theme
ファイルのネスト（グループ化）設定
関連ファイルをグループ化：
{
"explorer.fileNesting.enabled": true,
"explorer.fileNesting.expand": false,
"explorer.fileNesting.patterns": {
// package.json関連
"package.json": ".eslintrc*, .prettierrc*, tsconfig*, vite.config*",
// コンポーネント関連
"*.jsx": "${capture}.test.jsx, ${capture}.module.css, ${capture}.stories.jsx",
"*.tsx": "${capture}.test.tsx, ${capture}.module.css, ${capture}.stories.tsx",
// 設定ファイル
".gitignore": ".gitattributes, .gitmodules, .mailmap",
// README関連
"README.md": "README.*, readme.*",
// インデックスファイル
"index.js": "index.*.js, index.test.js",
"index.ts": "index.*.ts, index.test.ts"
}
}
ネスト表示の例：
変更前：
├── Button.jsx
├── Button.test.jsx
├── Button.module.css
├── Button.stories.jsx
変更後：
├── Button.jsx
├── Button.test.jsx
├── Button.module.css
└── Button.stories.jsx
3. ツリー表示の操作テクニック
キーボードショートカット
基本操作：
ナビゲーション：
↑↓：上下移動
←：折りたたむ/親へ移動
→：展開する/子へ移動
Enter：ファイルを開く
Space：プレビュー（選択）
展開/折りたたみ：
Ctrl + ←：現在のフォルダを折りたたむ
Ctrl + →：現在のフォルダを展開
Alt + ←：すべて折りたたむ
Alt + →：すべて展開
その他：
F2：リネーム
Delete：削除
Ctrl + C/V：コピー/ペースト
フォルダの一括展開/折りたたみ
すべてのフォルダを操作：
// 設定で自動展開を制御
{
// 単一フォルダは自動展開
"explorer.compactFolders": false,
// フォルダ展開の最大深度
"explorer.autoReveal": true,
"explorer.autoRevealExclude": {
"**/node_modules": true,
"**/dist": true
}
}
コマンドパレットから：
Ctrl + Shift + P → 入力
- "Explorer: Collapse Folders in Explorer"
- "Explorer: Expand All"
フィルタリングと検索
エクスプローラー内検索：
方法1：フィルター
Ctrl + F（エクスプローラーにフォーカス時）
→ ファイル名でフィルタリング
方法2：タイプして検索
エクスプローラーで文字を入力
→ インクリメンタルサーチ
フィルターモードの設定：
{
"workbench.list.keyboardNavigation": "filter",
// "simple": 単純な検索
// "highlight": ハイライト表示
// "filter": フィルター表示
}
ドラッグ&ドロップの活用
高度なドラッグ操作：
基本操作：
- ドラッグ：ファイル/フォルダ移動
- Ctrl + ドラッグ：コピー（Windows/Linux）
- Option + ドラッグ：コピー（Mac）
エディタへのドロップ：
- ファイル：新しいタブで開く
- Shift + ドロップ：分割して開く
- Alt + ドロップ：別ウィンドウで開く
インポート文の生成：
JSファイルを別のJSファイルにドロップ
→ import文が自動生成
4. ファイル/フォルダの表示制御
除外パターンの設定
不要なファイルを非表示：
{
// エクスプローラーから除外
"files.exclude": {
"**/.git": true,
"**/.DS_Store": true,
"**/node_modules": true,
"**/dist": true,
"**/*.log": true,
"**/.vscode": false, // .vscodeは表示
// 条件付き除外
"**/*.js": {
"when": "$(basename).ts" // .tsファイルがある場合.jsを隠す
},
"**/*.map": true
},
// 検索から除外
"search.exclude": {
"**/node_modules": true,
"**/bower_components": true,
"**/dist": true,
"**/*.code-search": true
}
}
表示設定の詳細カスタマイズ
エクスプローラーの見た目を調整：
{
// ファイルの装飾
"explorer.decorations.badges": true,
"explorer.decorations.colors": true,
// ソート順
"explorer.sortOrder": "type",
// "default": デフォルト
// "mixed": 混在
// "filesFirst": ファイル優先
// "type": タイプ別
// "modified": 更新日時順
// 大文字小文字の扱い
"explorer.sortOrderLexicographicOptions": "unicode",
// 確認ダイアログ
"explorer.confirmDelete": true,
"explorer.confirmDragAndDrop": false,
// 開く動作
"explorer.openEditors.visible": 5,
"explorer.openEditors.sortOrder": "editorOrder"
}
.gitignoreとの連携
.gitignoreのパターンを活用：
{
// .gitignoreに記載されたファイルをグレーアウト
"git.decorations.enabled": true,
// 無視されたファイルの表示設定
"explorer.excludeGitIgnore": false, // 完全に隠す場合true
// 色の設定
"workbench.colorCustomizations": {
"gitDecoration.ignoredResourceForeground": "#777777",
"gitDecoration.modifiedResourceForeground": "#dcb862",
"gitDecoration.addedResourceForeground": "#81b366",
"gitDecoration.deletedResourceForeground": "#c74e39"
}
}
5. アウトライン表示の活用
シンボルツリーのカスタマイズ
アウトラインの詳細設定：
{
// アウトラインの表示設定
"outline.icons": true,
"outline.problems.enabled": true,
"outline.problems.colors": true,
"outline.problems.badges": true,
// ソート設定
"outline.showVariables": true,
"outline.showFunctions": true,
"outline.showClasses": true,
"outline.showConstants": true,
"outline.showEnums": true,
// 自動フォロー
"outline.followCursor": true,
// パンくずリスト連携
"breadcrumbs.enabled": true,
"breadcrumbs.showVariables": true
}
言語別のアウトライン設定
特定言語でのカスタマイズ：
{
"[javascript]": {
"outline.showFunctions": true,
"outline.showVariables": false
},
"[python]": {
"outline.showFunctions": true,
"outline.showClasses": true,
"outline.showVariables": true
},
"[markdown]": {
"outline.icons": false // Markdownではアイコン非表示
}
}
ブレッドクラムとの連携
パンくずリストの活用：
{
// ブレッドクラムの表示
"breadcrumbs.enabled": true,
"breadcrumbs.filePath": "on",
"breadcrumbs.symbolPath": "on",
// アイコン表示
"breadcrumbs.icons": true,
// シンボルのソート
"breadcrumbs.symbolSortOrder": "position",
// "name": 名前順
// "type": タイプ順
// 表示する要素
"breadcrumbs.showArrays": true,
"breadcrumbs.showBooleans": true,
"breadcrumbs.showClasses": true,
"breadcrumbs.showConstants": true
}
6. 便利な拡張機能でツリー表示を強化
Project Manager
複数プロジェクトの管理：
// プロジェクト登録
{
"projectManager.projects": [
{
"name": "Frontend App",
"rootPath": "C:\\Projects\\frontend",
"tags": ["React", "TypeScript"],
"enabled": true
},
{
"name": "Backend API",
"rootPath": "C:\\Projects\\backend",
"tags": ["Node.js", "Express"],
"enabled": true
}
],
// ツリー表示設定
"projectManager.showProjectNameInStatusBar": true,
"projectManager.sortList": "Name"
}
Todo Tree
TODOコメントをツリー表示：
{
"todo-tree.general.tags": [
"TODO",
"FIXME",
"BUG",
"HACK",
"XXX",
"NOTE"
],
"todo-tree.highlights.customHighlight": {
"TODO": {
"icon": "check",
"iconColour": "#ffcc00",
"foreground": "#000",
"background": "#ffcc00"
},
"FIXME": {
"icon": "alert",
"iconColour": "#ff0000",
"foreground": "#fff",
"background": "#ff0000"
}
},
"todo-tree.tree.showInExplorer": true
}
Bookmarks
ブックマークをツリー管理：
{
"bookmarks.saveBookmarksInProject": true,
"bookmarks.navigateThroughAllFiles": true,
"bookmarks.wrapNavigation": true,
// サイドバー表示
"bookmarks.sideBar.expanded": true,
"bookmarks.showBookmarksInActivityBar": true,
// ラベル付けブックマーク
"bookmarks.label.suggestion": "useWhenSelected"
}
File Tree Generator
ファイルツリーをテキストで出力：
設定例：
{
"file-tree-generator.exclude": [
"node_modules",
".git",
"dist",
"build"
],
"file-tree-generator.maxDepth": 5,
"file-tree-generator.charset": "utf-8"
}
出力例：
project/
├── src/
│ ├── components/
│ │ ├── Header.jsx
│ │ └── Footer.jsx
│ └── index.js
├── package.json
└── README.md
7. マルチルートワークスペースでのツリー表示
ワークスペースの設定
複数フォルダの管理：
// workspace.code-workspace
{
"folders": [
{
"name": "Frontend",
"path": "./frontend"
},
{
"name": "Backend",
"path": "./backend"
},
{
"name": "Shared",
"path": "./shared"
}
],
"settings": {
// ワークスペース固有の設定
"files.exclude": {
"**/node_modules": true
}
}
}
フォルダごとの設定
個別フォルダのカスタマイズ：
{
"folders": [
{
"name": "React App",
"path": "./react-app",
"settings": {
"files.exclude": {
"**/.git": true,
"**/node_modules": true,
"**/build": true
}
}
},
{
"name": "API Server",
"path": "./api",
"settings": {
"files.exclude": {
"**/dist": true,
"**/*.log": true
}
}
}
]
}
8. パフォーマンスの最適化
大規模プロジェクトでの設定
パフォーマンス向上の設定：
{
// ファイル監視の制限
"files.watcherExclude": {
"**/.git/objects/**": true,
"**/.git/subtree-cache/**": true,
"**/node_modules/**": true,
"**/.hg/store/**": true,
"**/dist/**": true,
"**/build/**": true,
"**/out/**": true
},
// 検索の最適化
"search.followSymlinks": false,
"search.maxResults": 10000,
// エクスプローラーの最適化
"explorer.maxOpenEditors": 10,
"explorer.autoReveal": false,
// Git統合の制限
"git.autorefresh": false,
"git.countBadge": "off"
}
メモリ使用量の削減
軽量化設定：
{
// 不要な機能を無効化
"telemetry.telemetryLevel": "off",
"extensions.autoUpdate": false,
"npm.autoDetect": "off",
"typescript.surveys.enabled": false,
// ファイルサイズ制限
"editor.largeFileOptimizations": true,
"files.maxMemoryForLargeFilesMB": 4096,
// レンダリングの最適化
"workbench.tree.enableStickyScroll": false,
"workbench.list.smoothScrolling": false
}
9. トラブルシューティング
ツリーが表示されない
解決方法：
1. エクスプローラーパネルを確認
表示 → エクスプローラー（Ctrl+Shift+E）
2. ワークスペースを開き直す
ファイル → フォルダーを開く
3. 設定のリセット
{
"workbench.sideBar.location": "left",
"workbench.activityBar.visible": true
}
4. 拡張機能の無効化
問題のある拡張機能を特定
アイコンが表示されない
対処法：
{
// アイコンテーマを再設定
"workbench.iconTheme": "vscode-icons",
// キャッシュクリア後、再起動
"workbench.iconTheme": null,
// VSCode再起動
"workbench.iconTheme": "vscode-icons"
}
ファイルが見つからない
除外設定を確認：
{
// 一時的にすべて表示
"files.exclude": {},
"search.exclude": {},
// .gitignore の影響を無効化
"explorer.excludeGitIgnore": false
}
10. よくある質問（FAQ）
Q1: node_modulesを常に非表示にしたい
A: グローバル設定で除外します：
{
"files.exclude": {
"**/node_modules": true
},
"files.watcherExclude": {
"**/node_modules/**": true
},
"search.exclude": {
"**/node_modules": true
}
}
Q2: ツリーのフォントサイズを変更したい
A: ズーム機能を使用します：
{
"window.zoomLevel": 1, // 全体のズーム
// またはキーボードショートカット
// Ctrl + + : 拡大
// Ctrl + - : 縮小
// Ctrl + 0 : リセット
}
Q3: フォルダを常に展開した状態にしたい
A: 自動展開の設定を使用：
{
"explorer.autoReveal": true,
"explorer.expandSingleFolderWorkspaces": true,
// 特定フォルダのみ除外
"explorer.autoRevealExclude": {
"**/node_modules": true,
"**/dist": true
}
}
Q4: ツリーの色をカスタマイズしたい
A: テーマの色設定を変更：
{
"workbench.colorCustomizations": {
"list.activeSelectionBackground": "#214283",
"list.inactiveSelectionBackground": "#3a3d41",
"list.hoverBackground": "#2a2d2e",
"list.focusBackground": "#062f4a",
"tree.indentGuidesStroke": "#585858",
"sideBar.background": "#1e1e1e",
"sideBarTitle.foreground": "#bbbbbb"
}
}
Q5: ツリー表示が遅い
A: パフォーマンス設定を最適化：
{
// 監視を減らす
"files.watcherExclude": {
"**/.git/**": true,
"**/node_modules/**": true,
"**/dist/**": true,
"**/build/**": true
},
// コンパクトフォルダを無効化
"explorer.compactFolders": false,
// 自動更新を制限
"explorer.autoReveal": false,
"git.autorefresh": false
}
まとめ：ツリー表示を極めて開発効率を最大化
VSCodeのツリー表示は、単なるファイル一覧以上の強力な機能を持っています。
ツリー表示マスターへの3ステップ：
- 基本設定の最適化
- インデント幅の調整
- アイコンテーマの導入
- 不要ファイルの除外
- 操作の効率化
- キーボードショートカット習得
- ドラッグ&ドロップ活用
- フィルタリング機能
- 拡張機能で強化
- Project Manager
- Todo Tree
- カスタムツリービュー
適切に設定されたツリー表示は、コードナビゲーションを劇的に改善し、開発速度を向上させます。
この記事で紹介した設定やテクニックを組み合わせて、あなただけの最適な開発環境を構築してください。
効率的なツリー表示で、より快適なコーディングライフを！
コメント