How can you declutter the VSCode explorer?

The VSCode explorer (which lists all files and folders in a project) can get pretty congested pretty quickly. This is because many modern tooling utilities each add one or two config files to your project. On top you might have a unit test file or CSS styling file alongside the source file containing the logic. Much of the time you just want to find the source with the logic. The other files can slow you down in finding the source you want. Using explorer file nesting in VSCode you can collapse the tooling config files into related groups. On top you can nest button.css or button.test.css under button.js. This helps you find button.js quicker. Also because there is less clutter, you will be able to access the collapsed, nested files quicker.

How do you extend VSCode file nesting defaults?

You can extend VSCode file nesting defaults by editing the JSON preferences file. To open it up use Cmd (or Ctrl), Shift and P then search for `Preferences: Open Settings (JSON)`. In there you need to add `explorer.fileNesting` settings. We have seen Anthony Fu's vscode-file-nesting-config GitHub repo has a pretty comprehensive config which you can just paste in here. You can then edit the settings to suit your own personal edge cases. By the same token you can add extra lines for new tools or languages which are not yet included in Anthony's config.

How do add VSCode file nesting config to a single project?

We have seen you can create a `settings.json` file within a `.vscode` folder in the root of a project. In `settings.json` there you can add `explorer.fileNesting` settings which you just need on this project. Also, if you share the project, for example in a Git repo, then anyone who clones it and opens it in VSCode can use you settings. Handy when working in a team!

VSCode File Nesting: Collapse Files to Declutter # VSCode File Nesting: Collapse Files to Declutter #

VSCode File Nesting: Collapse Files to Declutter #

Published: 9 months ago

3 minute read Gunning Fog Index: 5.4

Content by Rodney

📂 VSCode File Nesting #

VSCode file nesting is a relatively new feature which helps make your VSCode explorer look a little tidier. It does that by letting you collapse some related files into groups. For example, the default config will nests an NPM package-lock.json file under the package.json file in your JavaScript projects. The lock file is then hidden from view by default but you can easily expand it from under package.json with a single click. The defaults are pretty limited.

In this video we see how you can add a quite comprehensive config which will get your VSCode tidy for most projects. Then, we see how you can extend even the comprehensive list to fit your own edge cases.

If that’s what you wanted to know then hit play on the video! After that, don’t forget to scroll down. You will see a list of resources mentioned in the video. Drop a comment below or reach out for a chat on Element as well as Twitter @mention if you have suggestions for improvements or questions.

📹 SvelteKit Port: Video #

Please enable JavaScript to watch the video 📼

VSCode File Nesting: Collapse Files to Declutter

🗳 Poll #

What do you use most for code editing?

🖥 SvelteKit Port: Code #

Example per-project configuration to nest example.css.ts under example.svelte:

    1 {
2   "editor.formatOnSave": true,
3   "explorer.fileNesting.patterns": {
4     "*.svelte": "${capture}.css.ts"
5   },
6   "[markdown]": {
7     "editor.wordWrap": "bounded",
8     "editor.wordWrapColumn": 80,
9     "editor.quickSuggestions": false
10   },
11   "[svelte]": {
12     "editor.defaultFormatter": "svelte.svelte-vscode"
13   }
14 }

🔗 VSCode File Nesting: Links #

Post on the SvelteKit TypeScript vanilla-extract starter,
Anthony Fu's VSCode file nesting config ,
VSCode Explorer File Nesting Introduction ,
Remix docs on styling components with vanilla CSS ,
Twitter handle: @askRodney ,
Element chat: #Rodney matrix chat .

🏁 VSCode File Nesting: Summary #

How can you declutter the VSCode explorer? #: The VSCode explorer (which lists all files and folders in a project) can get pretty congested pretty quickly. This is because many modern tooling utilities each add one or two config files to your project. On top you might have a unit test file or CSS styling file alongside the source file containing the logic. Much of the time you just want to find the source with the logic. The other files can slow you down in finding the source you want. Using explorer file nesting in VSCode you can collapse the tooling config files into related groups. On top you can nest button.css or button.test.css under button.js. This helps you find button.js quicker. Also because there is less clutter, you will be able to access the collapsed, nested files quicker.
How do you extend VSCode file nesting defaults? #: You can extend VSCode file nesting defaults by editing the JSON preferences file. To open it up use Cmd (or Ctrl), Shift and P then search for `Preferences: Open Settings (JSON)`. In there you need to add `explorer.fileNesting` settings. We have seen Anthony Fu's vscode-file-nesting-config GitHub repo has a pretty comprehensive config which you can just paste in here. You can then edit the settings to suit your own personal edge cases. By the same token you can add extra lines for new tools or languages which are not yet included in Anthony's config.
How do add VSCode file nesting config to a single project? #: We have seen you can create a `settings.json` file within a `.vscode` folder in the root of a project. In `settings.json` there you can add `explorer.fileNesting` settings which you just need on this project. Also, if you share the project, for example in a Git repo, then anyone who clones it and opens it in VSCode can use you settings. Handy when working in a team!

🙏🏽 Feedback #

If you have found this video useful, see links below for further related content on this site. I do hope you learned one new thing from the video. Let me know if there are any ways I can improve on it. I hope you will use the code or starter in your own projects. Be sure to share your work on Twitter, giving me a mention so I can see what you did. Finally be sure to let me know ideas for other short videos you would like to see. Read on to find ways to get in touch, further below. If you have found this post useful, even though you can only afford even a tiny contribution, please consider supporting me through Buy me a Coffee.

Just recorded a new video talking through this in more detail.

You see how to customise VSCode for all projects and also add config on a project-by-project basis.

We also see a 👨🏽‍🍳 vanilla-extract ❤️ Svelte example.

Hope you find it useful!

#SvelteJS https://t.co/LuxTqXPlTC
— Rodney (@askRodney) May 30, 2022

Finally, feel free to share the post on your social media accounts for all your followers who will find it useful. As well as leaving a comment below, you can get in touch via @askRodney on Twitter and also askRodney on Telegram . Also, see further ways to get in touch with Rodney Lab. I post regularly on SvelteKit as well as Search Engine Optimisation among other topics. Also subscribe to the newsletter to keep up-to-date with our latest projects.