Tidy Up Your VSCode Explorer with File Nesting

Just a quick note of a nifty VSCode feature to streamline the project's explorer view by nesting related files under a single parent file. This is done through the explorer.fileNesting.patterns setting.

It’s a visual aid that keeps your workspace uncluttered.

How to Configure File Nesting

To configure file nesting, access your settings JSON file and add or modify the explorer.fileNesting.patterns. Here's an example that nests common project files under package.json:

"explorer.fileNesting.enabled": true,
"explorer.fileNesting.expand": false,
"explorer.fileNesting.patterns": {
  "package.json": ".babelrc, .browserslistrc, .dockerignore, .editorconfig, .env, .eslintignore, .eslintrc.*, .gitignore, .graphqlrc.*, .nvmrc, .prettierignore, .prettierrc.*, README.md, babel.config.json, cypress.json, jest.config.ts, jest.preset.js, nx.json, package.json, tsconfig.base.json, tsconfig.json, workspace.json, yarn.lock, vercel.json, netlify.toml, pnpm-lock.yaml"
}

Benefits of File Nesting

• Cleaner Workspace: Reduces clutter by showing only relevant files at a glance.
• Improved Focus: Helps you focus on the files you are actively working on.
• Better Organization: Groups logically related files together.

Remember, you can always adapt the nesting patterns to fit your project's structure and your personal preferences.

References

VSCode Docs - Explorer file nesting