If you go to your VSCode defaultSettings.json
you'll see explorer.fileNesting.patterns
key, turns out VSCode
can group files based on some patterns.
Here is that section;
// Controls nesting of files in the Explorer. `explorer.fileNesting.enabled` must be set for this to take effect. Each __Item__ represents a parent pattern and may contain a single `*` character that matches any string. Each __Value__ represents a comma separated list of the child patterns that should be shown nested under a given parent. Child patterns may contain several special tokens:
// - `${capture}`: Matches the resolved value of the `*` from the parent pattern
// - `${basename}`: Matches the parent file's basename, the `file` in `file.ts`
// - `${extname}`: Matches the parent file's extension, the `ts` in `file.ts`
// - `${dirname}`: Matches the parent file's directory name, the `src` in `src/file.ts`
// - `*`: Matches any string, may only be used once per child pattern
"explorer.fileNesting.patterns": {
"*.ts": "${capture}.js",
"*.js": "${capture}.js.map, ${capture}.min.js, ${capture}.d.ts",
"*.jsx": "${capture}.js",
"*.tsx": "${capture}.ts",
"tsconfig.json": "tsconfig.*.json",
"package.json": "package-lock.json, yarn.lock, pnpm-lock.yaml"
},
As you can see some predefined patterns are there.
Since I'm mostly working on Svelte projects, here are the patterns I prepared & wrote in my (user) settings.json
.
So I've extended package.json
definition and groupped some standart files that are exists in sveltekit project that you wouldn't mingle much.
"explorer.fileNesting.patterns": {
"svelte.config.js": "tsconfig.json, jsconfig.json, tailwind.config.cjs, postcss.config.cjs, vite.config.js, playwright.config.js, .prettierrc, .prettierignore, .eslintrc.cjs, .eslintignore",
"package.json": "package-lock.json, yarn.lock, pnpm-lock.yaml, .npmrc, .gitignore, *.code-workspace",
"app.html": "app.d.ts, app.css"
}
You can either go and add this line to your settings.json "explorer.fileNesting.enabled": true
or
Open settings pane (command + ,
for me) and search for File Nesting, then enable it.