Skip to content

Instantly share code, notes, and snippets.

@siniradam
Last active May 5, 2023 18:27
Show Gist options
  • Save siniradam/71ad6016846753eea2b8a401d55951a3 to your computer and use it in GitHub Desktop.
Save siniradam/71ad6016846753eea2b8a401d55951a3 to your computer and use it in GitHub Desktop.
You can group config files like a folder to declutter your vscode file explorer, here is my take for sveltekit.

VSCode File Nesting / File Grouping

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"
  }

In order to activate this feature;

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.

Big thanks to Rodney for his blog post

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment