#Vscode hide folders update
#Vscode hide folders code

Wouldn’t it be nice to group most if not all of them under the main *.component.ts file and declutter the folder? Well, we can certainly do that now. So for a single component we might end up with four or five different files in the same directory. For example, next to, we might also have *.component.html|css|scss|spec and. When working with Angular components we often follow the file structure convention where a component is represented by several similarly named files. In the next section I’m going to show one pattern suitable for Angular developers in particular. I think by using the examples provided in the Patterns list, you can come up your own patterns. Well, now you know how file nesting works. Can you find the patterns in the screenshot below? The package.json pattern is part of that list, as is the main.ts example described earlier.

#Vscode hide folders code

That is because VS Code has a default list of patterns that it uses to nest/group files. yarnrc files get nested under package.json. If you do it while you have a project open, you might notice that the files package-lock.json. Go ahead and do it by toggling the “File Nesting: Enabled” setting.

#Vscode hide folders update

Note: The above description is taken from the release blog post.Īfter you update VS Code to v1.64, file nesting is not enabled by default.

- Controls whether file nests show as expanded by default.

- Controls whether file nesting is enabled.

Note that the files are still in the same directory, they are just visually “nested” under main.ts. You can now “collapse” the main.ts file and reduce the “clutter”. After enabling the file nesting feature and configuring it, VS Code will visually group the main.* files under the main.ts file, as shown in the following screenshot: You can also add search.exclude if you only want to exclude a file from search results, and not from the folder explorer. Then add a files.exclude option to specify patterns to exclude. For example, say you have a main.ts file and next to it you have main.js, main.d.ts and main.js.map. In newer versions of VS Code, you navigate to settings ( Ctrl +, ), and make sure to select Workspace Settings at the top right. This feature lets you visually “nest”/group related files under a “root” file in the same directory. I can see how that can be useful on bigger screens.Īnother new feature that catched my interest was the experimental support for file nesting. the “other side of the screen”, giving you the option to have more views open at once. An exciting new feature is the Side Panel that can be opened opposite to the Side Bar, i.e.

VS Code v1.64 was released a few days ago and it’s once again packaged with nice new features and improvements.