Is there a way to remove unused imports and declarations from Angular 2+?
If you're a heavy visual studio user, you can simply open your preference settings and add the following to your settings.json:
...
"editor.formatOnSave": true,
"editor.codeActionsOnSave": {
"source.organizeImports": true
}
....
Hopefully this can be helpful!
Edit (as suggested in comments and other people), Visual Studio Code has evolved and provides this functionality in-built as the command "Organize imports", with the following default keyboard shortcuts:
option+Shift+O for Mac
Alt + Shift + O for Windows
Original answer:
I hope this visual studio code extension will suffice your need: https://marketplace.visualstudio.com/items?itemName=rbbit.typescript-hero
It provides following features:
- Add imports of your project or libraries to your current file
- Add an import for the current name under the cursor
- Add all missing imports of a file with one command
- Intellisense that suggests symbols and automatically adds the needed imports "Light bulb feature" that fixes code you wrote
- Sort and organize your imports (sort and remove unused)
- Code outline view of your open TS / TSX document
- All the cool stuff for JavaScript as well! (experimental stage though, better description below.)
For Mac: control+option+o
For Win: Ctrl+Alt+o
As of Visual Studio Code Release 1.22 this comes free without the need of an extension.
Shift+Alt+O will take care of you.
To be able to detect unused imports, code or variables, make sure you have this options in tsconfig.json file
"compilerOptions": {
"noUnusedLocals": true,
"noUnusedParameters": true
}
have the typescript compiler installed, ifnot install it with:
npm install -g typescript
and the tslint extension installed in Vcode, this worked for me, but after enabling I notice an increase amount of CPU usage, specially on big projects.
I would also recomend using typescript hero extension for organizing your imports.