DEV Community

Cover image for Tidy Up Your VSCode Explorer with File Nesting

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.

explorer.fileNesting.patterns in action

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"
}
Enter fullscreen mode Exit fullscreen mode




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

Top comments (0)