How to hide .js and .map files in WebStorm while working on Angular2-typescript project

Question

I tried adding the extensions to .gitignore but the result is as below:

The files are not completely hidden.

Answer 1

When using WebStorm without the built-in TypeScript Compiler (eg because you are running an Angular2 project with their npm start script which does the compiling already) and the other method doesn't work, you can configure your own filtered "Project" panel for WebStorm:

1. Select Project Files section of the side panel ( Project section does not offer the needed config menu)
2. Click on the gear icon to configure
3. Select "Edit Scopes" from that menu
4. Add a new Scope
5. Set the Pattern to an appropriate filter to exclude the *.js and *.js.map files (I am using !file[my-root-folder]:app//*.js&&!file[my-root-folder]:app//*.js.map )
6. You can select this scope as a section of the side panel (instead of Project or Project Files ) under the name you set the scope.

Answer 2

• Enable Typescript Compiler (Generated files are hidden when compiler generates them)

• Change your view to Project as suggested by Cibes

Answer 3

For me, using the Project panel, rather than the Project Files panel did the trick collapsing the *.js and .js.map files and hiding them beneath their corresponding *.ts file.

Note: This is only working when WebStorm's TypeScript Compiler is enabled. ( see A_Singh's answer )

Answer 4

WebStorm 2017.3.3

If you don't need run Enable Typescript Compiler .

You can do this

Then

After that, just select you filter