Many people ask me which Angular plugins I'm using. So here's my list. Most of these plugins are part of John Papa's Angular Essentials, the Angular Productivity Pack, and the TypeScript Extension Pack. You only need to install these plugins individually if you've behind a restrictive Firewall which doesn't allow you to install plugins from Visual Studio Code.
"Live-saver" plugins
These plugins make the difference between a glorified VI editor and a full-featured IDE:
Extension Pack | Name and marketplace URL | Description |
---|---|---|
p42 - Refactoring Hints & Automation | 120 useful refactorings for TypeScript and JavaScript. | |
JS CodeFormer | Another useful set of refactorings for TypeScript and JavaScript. I'm using it less often than the p42 plugin, but it seems to be rock-solid, too. | |
Angular Extension Pack | Visual Studio IntelliCode | AI assisted autocompletion |
Angular Extension Pack | Angular Language Service | Autocompletion for HTML |
Angular Productivity Pack | HTML SCSS Support | Autocompletion for SCSS |
Angular Productivity Pack | npm Intellisense | Autocompletion for import statements |
Angular Extension Pack | Path Intellisense | Autocompleting filenames |
Angular Extension Pack | Angular Schematics | UI for the ng generate commands |
Angular Extension Pack | ESLint | ESLint integration |
Angular Extension Pack | TSLint | TSLint integration |
Angular Extension Pack | EditorConfig for VS Code | Add EditorConfig support |
Angular Productivity Pack | Node npm | Validate the package.json |
Angular Extension Pack | Prettier | Pretter code formatting |
Angular Extension Pack | Auto Rename Tag | Rename paired HTML tags |
Jest | Support for tests written with Jest | |
Angular Extension Pack | Material Icon Theme | Makes your explorer tree look a lot better |
Angular Extension Pack | Paste Json as TypeScript code | Convert Json to TypeScript interfaces |
Angular Productivity Pack | SmoothType | let's the cursor move smoothly |
Angular Extension Pack | Move TS | Updates imports when moving TypeScript files |
Angular Productivity Pack | stylelint | Linter for CSS/SCSS |
Angular Productivity Pack | Gitlens | Visualize code authorship at a glance |
Most plugins are part of more than one of the extension packs. I only mentioned one of the for the sake of brevity.
Less frequently used plugins
There are also a couple of plugins I don't consider essential, but when you need them, they are very useful.
Extension Pack | Name and marketplace URL | Description |
---|---|---|
Markdown All in One | Support for Markdown | |
Angular Extension Pack | TypeScript Hero | Organize imports |
Angular Extension Pack | Peacock for Visual Studio Code | Running multiple instances of VS simultaneously? This plugin distinguishes them by different colors. |
Save without format | Additional shortcut for those who use "format on save" and need to circumvent formatting | |
Sort Typescript imports | Tidiying up your imports |