VSCodeのファイルネスト自動化完全ガイド！関連ファイルをスッキリ整理

プログラミング・IT

「index.ts、index.test.ts、index.css…同じファイルがバラバラに表示されて見づらい」 「package.jsonとpackage-lock.jsonを一緒にまとめたい」 「関連ファイルを自動的にグループ化できないかな？」

そんな悩み、VSCodeのFile Nesting（ファイルネスト）機能で完璧に解決できます！

モダンな開発では、1つのコンポーネントに対して複数の関連ファイル（テスト、スタイル、型定義など）が存在します。これらがエクスプローラーにフラットに表示されると、プロジェクトが見づらくなってしまいますよね。でも、ファイルネスト機能を使えば、関連ファイルを親ファイルの下に自動的にネスト表示できるんです！

この記事では、VSCodeのファイルネストを自動化する設定から、言語別のベストプラクティス、カスタムルールの作成まで、プロジェクトをスッキリ整理する方法を完全解説します！

スポンサーリンク

File Nesting（ファイルネスト）とは？

ファイルネストの基本概念

ファイルネストとは： 関連するファイルを親ファイルの下に階層的に表示する機能

ビフォー・アフター：

# ネストなし（見づらい）
📁 src/
  📄 App.tsx
  📄 App.test.tsx
  📄 App.css
  📄 App.module.css
  📄 index.ts
  📄 index.test.ts
  📄 index.d.ts

# ネストあり（スッキリ！）
📁 src/
  📄 App.tsx
    └ 📄 App.test.tsx
    └ 📄 App.css
    └ 📄 App.module.css
  📄 index.ts
    └ 📄 index.test.ts
    └ 📄 index.d.ts

ネストできるファイルの例

親ファイルネストされるファイル用途
index.tsindex.test.ts, index.d.ts, index.cssコンポーネント関連
package.jsonpackage-lock.json, yarn.lockパッケージ管理
.env.env.local, .env.production環境変数
README.mdREADME.*.mdドキュメント
tsconfig.jsontsconfig.*.jsonTypeScript設定

【基本設定】ファイルネストを有効にする

ステップ1：File Nesting機能を有効化

  1. 設定を開く Ctrl + ,（Windows/Linux） Cmd + ,（Mac）
  2. 「file nesting」で検索
  3. Explorer: File Nestingを設定 ☑ Explorer: File Nesting: Enabled チェックを入れる

ステップ2：ネストの展開方法を設定

Explorer: File Nesting: Expand

false: デフォルトで折りたたみ（推奨）
true: デフォルトで展開

ステップ3：設定をJSONで確認

settings.json：

{
  "explorer.fileNesting.enabled": true,
  "explorer.fileNesting.expand": false
}

【詳細設定】自動ネストパターンの設定

デフォルトパターンの確認と編集

  1. 設定でパターンを編集 設定 → Explorer: File Nesting: Patterns 「settings.jsonで編集」をクリック
  2. 基本的なパターン設定 { "explorer.fileNesting.patterns": { // パッケージ管理 "package.json": "package-lock.json, yarn.lock, pnpm-lock.yaml, .npmrc, .yarnrc", // TypeScript設定 "tsconfig.json": "tsconfig.*.json", // 環境変数 ".env": ".env.*", // Git関連 ".gitignore": ".gitattributes, .gitmodules", // Docker "dockerfile": ".dockerignore, dockerfile*, docker-compose.*" } }

言語別の推奨パターン

JavaScript/TypeScript

{
  "explorer.fileNesting.patterns": {
    // コンポーネント（React/Vue）
    "*.tsx": "${capture}.test.ts, ${capture}.test.tsx, ${capture}.spec.ts, ${capture}.spec.tsx, ${capture}.module.css, ${capture}.module.scss, ${capture}.css, ${capture}.scss, ${capture}.less, ${capture}.stories.tsx, ${capture}.stories.ts",
    
    "*.ts": "${capture}.test.ts, ${capture}.spec.ts, ${capture}.d.ts, ${capture}.js",
    
    "*.jsx": "${capture}.test.js, ${capture}.test.jsx, ${capture}.spec.js, ${capture}.spec.jsx, ${capture}.css, ${capture}.module.css, ${capture}.stories.jsx",
    
    "*.js": "${capture}.test.js, ${capture}.spec.js, ${capture}.d.ts, ${capture}.min.js, ${capture}.map"
  }
}

Python

{
  "explorer.fileNesting.patterns": {
    "*.py": "${capture}_test.py, test_${capture}.py, ${capture}.pyc, ${capture}.pyo, ${capture}.pyi",
    "__init__.py": "__pycache__",
    "requirements.txt": "requirements.*.txt, requirements-*.txt",
    "setup.py": "setup.cfg, MANIFEST.in, pyproject.toml"
  }
}

Java

{
  "explorer.fileNesting.patterns": {
    "*.java": "${capture}Test.java, ${capture}Tests.java, ${capture}Spec.java, ${capture}.class",
    "pom.xml": "pom.*.xml",
    "build.gradle": "gradle.properties, gradlew, gradlew.bat, settings.gradle"
  }
}

C/C++

{
  "explorer.fileNesting.patterns": {
    "*.c": "${capture}.h, ${capture}.o, ${capture}.obj, ${capture}.exe",
    "*.cpp": "${capture}.hpp, ${capture}.h, ${capture}.o, ${capture}.obj",
    "Makefile": "makefile, Makefile.*, *.mk",
    "CMakeLists.txt": "*.cmake, CMakeCache.txt"
  }
}

カスタムネストパターンの作成

変数の使い方

利用可能な変数：

変数説明例
${capture}拡張子を除いたファイル名App.tsx → App
${basename}ファイル名全体App.tsx → App.tsx
${extname}拡張子App.tsx → .tsx
*ワイルドカード*.test.ts
**再帰的ワイルドカード**/*.test.ts

実践的なカスタムパターン例

プロジェクト固有の設定

{
  "explorer.fileNesting.patterns": {
    // Storybookファイル
    "*.stories.tsx": "${capture}.stories.mdx",
    
    // GraphQLスキーマ
    "*.graphql": "${capture}.generated.ts, ${capture}.types.ts",
    
    // Prismaスキーマ
    "schema.prisma": "migrations, *.db, *.db-journal",
    
    // Next.jsページ
    "[page].tsx": "[page].module.css, [page].test.tsx, [page].stories.tsx",
    
    // APIルート
    "route.ts": "route.test.ts, route.spec.ts"
  }
}

モノレポ設定

{
  "explorer.fileNesting.patterns": {
    // Lerna/Yarn Workspaces
    "lerna.json": "package.json, yarn.lock, .yarnrc.yml",
    
    // Rush
    "rush.json": "common, rush-logs, .rush",
    
    // Nx
    "nx.json": "workspace.json, .nx"
  }
}

高度な設定とテクニック

ワークスペース固有の設定

.vscode/settings.json:

{
  // このプロジェクトだけの設定
  "explorer.fileNesting.enabled": true,
  "explorer.fileNesting.patterns": {
    // プロジェクト固有のパターン
    "*.page.tsx": "${capture}.page.test.tsx, ${capture}.page.module.css, ${capture}.page.stories.tsx",
    "*.component.tsx": "${capture}.component.test.tsx, ${capture}.component.module.css"
  }
}

複数パターンのマージ

{
  "explorer.fileNesting.patterns": {
    // 基本パターン
    "*.ts": "${capture}.test.ts, ${capture}.spec.ts",
    
    // 追加パターン（上書きではなくマージ）
    "index.ts": "index.*.ts, index.d.ts, index.test.ts"
  }
}

条件付きネスト

{
  "explorer.fileNesting.patterns": {
    // 開発環境のみ
    "*.dev.ts": "${capture}.dev.test.ts, ${capture}.dev.mock.ts",
    
    // 本番環境のみ
    "*.prod.ts": "${capture}.prod.test.ts, ${capture}.prod.config.ts"
  }
}

よくあるトラブルと解決方法

Q1. ネストが機能しない

確認事項：

  1. 機能が有効か確認 "explorer.fileNesting.enabled": true
  2. VSCodeのバージョン
    • v1.67以降が必要
    • ヘルプ → バージョン情報で確認
  3. パターンの構文エラー // 間違い "*.ts": "{capture}.test.ts" // $ が抜けている // 正解 "*.ts": "${capture}.test.ts"

Q2. 特定のファイルだけネストされない

解決方法：

  1. パターンの優先順位を確認 { // より具体的なパターンを先に "index.ts": "index.*.ts", "*.ts": "${capture}.test.ts" }
  2. ファイル名の完全一致を確認 // 大文字小文字に注意 "README.md": "readme.*.md" // readme.md はマッチしない

Q3. ネストが深すぎる

フラット化の設定：

{
  "explorer.fileNesting.patterns": {
    // 1階層のみ（推奨）
    "*.ts": "${capture}.test.ts, ${capture}.spec.ts",
    
    // 深いネストは避ける
    // "*.ts": "${capture}.test.ts, ${capture}.test.*.ts"
  }
}

Q4. パフォーマンスが低下する

最適化方法：

{
  // パターンを必要最小限に
  "explorer.fileNesting.patterns": {
    // 使用頻度の高いものだけ
    "*.tsx": "${capture}.test.tsx, ${capture}.css",
    "package.json": "package-lock.json"
  },
  
  // 大規模プロジェクトでは制限
  "files.exclude": {
    "**/node_modules": true,
    "**/dist": true
  }
}

ベストプラクティス

プロジェクトタイプ別推奨設定

Reactプロジェクト

{
  "explorer.fileNesting.patterns": {
    "*.tsx": "${capture}.test.tsx, ${capture}.spec.tsx, ${capture}.module.css, ${capture}.module.scss, ${capture}.stories.tsx, ${capture}.types.ts",
    "App.tsx": "App.test.tsx, App.css, setupTests.ts",
    "index.tsx": "index.css, react-app-env.d.ts"
  }
}

Vue.jsプロジェクト

{
  "explorer.fileNesting.patterns": {
    "*.vue": "${capture}.test.js, ${capture}.spec.js, ${capture}.stories.js",
    "App.vue": "main.js, main.ts",
    "package.json": "package-lock.json, vue.config.js, .browserslistrc"
  }
}

Node.jsプロジェクト

{
  "explorer.fileNesting.patterns": {
    "*.js": "${capture}.test.js, ${capture}.spec.js",
    "index.js": "index.d.ts",
    "package.json": "package-lock.json, .npmignore, .npmrc",
    "server.js": "server.test.js, .env, .env.*"
  }
}

チーム開発での共有

.vscode/settings.json（コミット対象）:

{
  "explorer.fileNesting.enabled": true,
  "explorer.fileNesting.expand": false,
  "explorer.fileNesting.patterns": {
    // チーム共通のパターン
    "*.ts": "${capture}.test.ts, ${capture}.spec.ts, ${capture}.d.ts",
    "*.tsx": "${capture}.test.tsx, ${capture}.module.css, ${capture}.stories.tsx"
  }
}

他の整理機能との併用

ファイル除外設定との組み合わせ

{
  // 不要ファイルは非表示
  "files.exclude": {
    "**/.git": true,
    "**/.DS_Store": true,
    "**/node_modules": true,
    "**/dist": true
  },
  
  // 重要な関連ファイルはネスト
  "explorer.fileNesting.patterns": {
    "src/index.ts": "src/index.*.ts"
  }
}

ワークスペースの色分けと併用

{
  // フォルダーアイコンテーマ
  "workbench.iconTheme": "material-icon-theme",
  
  // ファイルネスト
  "explorer.fileNesting.patterns": {
    "*.component.ts": "${capture}.component.html, ${capture}.component.css"
  }
}

まとめ：スッキリ整理されたプロジェクトで開発効率UP！

VSCodeのファイルネスト自動化、完璧にマスターできましたね！

この記事の重要ポイント：

  1. 基本設定
    • explorer.fileNesting.enabled: true
    • パターンで自動グループ化
    • ${capture}変数の活用
  2. 言語別設定
    • JavaScript/TypeScript: テスト、CSS、型定義
    • Python: テスト、キャッシュ
    • その他: 言語特有のファイル
  3. カスタマイズ
    • プロジェクト固有のパターン
    • ワークスペース設定
    • チーム共有設定
  4. 最適化
    • パフォーマンスを考慮
    • 必要最小限のパターン
    • 他の整理機能と併用

関連ファイルが自動的にグループ化されることで、プロジェクトの見通しが格段に良くなります。

整理整頓された環境で、快適な開発を楽しんでください！📁✨

Youtube

神話・歴史・伝承の解説チャンネル

スポンサーリンク

コメント

タイトルとURLをコピーしました