Opens an external site in a new window
Pray for peace.
RODNEY LAB
  • Home
  • Plus +
  • Projects
  • Giving
  • Contact
RODNEY LAB
  • Home
  • Plus +
  • Newsletter
  • Contact

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

VSCode File Nesting
  1. Rodney Lab Home
  2. Rodney Lab Blog Posts
  3. SvelteKit Blog Posts
<PREVIOUS POST
NEXT POST >
LATEST POST >>

VSCode File Nesting: Collapse Files to Declutter #

Published: 9 months ago
3 minute read Gunning Fog Index: 5.4
Content by Rodney
Author Image: Rodney from Rodney Lab
SHARE:

📂 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?
Voting reveals latest results.

🖥 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.

@askRodney avatar

Rodney

@askRodney

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.

Thanks for reading this post. I hope you found it valuable. Please get in touch with your feedback and suggestions for posts you would like to see. Read more about me …

Rodney from Rodney Lab
TAGS:
SVELTEKIT
<PREVIOUS POST
NEXT POST >
LATEST POST >>

Leave a comment …

Your information will be handled in line with our Privacy Policy .

Ask for more

1 Nov 2022 — Astro Server-Side Rendering: Edge Search Site
3 Oct 2022 — Svelte eCommerce Site: SvelteKit Snipcart Storefront
1 Sept 2022 — Get Started with SvelteKit Headless WordPress

Copyright © 2020 – 2023 Rodney Johnson. All Rights Reserved. Please read important copyright and intellectual property information.

  • Home
  • Plus +
  • Newsletter
  • Contact
  • Terms of Use
  • Privacy Policy
We use cookies  to enhance visitors’ experience. Please click the “Options” button to make your choice.  Learn more here.