VS Code | How to hide Spec.ts/ Test files from Sidebar File explorer

In the Angular project, we usually see spec.ts files in our application folders. These are test files which are not used most of the times. Also whenever we create a new Service, Component or any Directive, using the generate command in Ng CLI tool, these are created by default.

However, we can skip the creation of Spec.ts file by adding --skipTests=true option flag in our generate commands like these:

$ ng generate component foo --skipTests=true

But it's always cool to have fewer files in your Sidebar file explorer. In VS code we have a lot of features and preferences which proves very useful if we know how to use them.

Here I will discuss a trick to hide Spec.ts files from your sidebar. You only need to add a filter for files which you don't want to see in you sidebar files stack.

How to hide Spec.ts Files?

Step 1) Open VS Code, then for to Files>> Preferences>> Settings


Step 2) Now under the User tab, open Text Editor tree menu then hit Files.


Step 3) Scroll down to see Exclude section, here you will see a list of file extensions which are already hidden using wildcard characters.

Just click on "Add Pattern" button, then add **/*.spec.ts, hit Ok. That's it!

This simple trick can hide any file extension from the sidebar. There are also many tricks in VS code which can help to make development easy.

Notify of
Inline Feedbacks
View all comments