I am often asked, “What are you favorite VS Code extensions for Angular?". This post covers my most often used VS Code extensions for Angular development.
The right tool for the right job.
We hear this a lot. When we use good tools, our development lives become so much more efficient. I created an extension pack that makes it easy to get them all by installing this one extension.
While there are other notable and excellent extensions, this list is what I maintain (and it is fluid) in an extension pack. The coolness of an extension pack is that you can install a set related of extensions all at once.
You can get them all most easily by installing my Angular Essentials extension pack for VS Code.
Click here to install them all from the extension pack
… or … You can also install each of these one by one, if you don’t want all of them.
Here is the list of extensions the pack includes, in alphabetical order:
Angular Language Service – This extension provides a rich editing experience for Angular templates, both inline and external templates. This extension is brought to you by members of the Angular team. It is fantastic at helping write solid code in the html templates.
Angular Snippets – Angular snippets that follow the official style guide, for TypeScript, templates, and RxJS.
Chrome Debugger – VS Code debugger for Chrome.
Editor Config – EditorConfig for VS Code. Great for maintaining consistent editor settings.
Material Icon Theme Show material icons in the explorer
npm This extension supports running npm scripts defined in the package.json file and validating the installed modules against the dependencies defined in the package.json.
Peacock This extension subtly changes the workspace color of your workspace. Ideal when you have multiple VS Code instances and you want to quickly identify which is which.
Prettier VS Code plugin for prettier/prettier, which formats code consistently
tslint – Adds tslint to VS Code using the TypeScript TSLint language service plugin.
Winter is Coming I like using the dark blue theme
Debugging Angular in VS Code
Add the configuration for chrome, as shown below, to your launch.json.
"name": "Launch Chrome against localhost",
Then, run your angular app with ng serve -o, set some breakpoints in VS Code, and press F5.
If you have ideas for what other extensions may be a good fit for Angular Essentials, please discuss them to the comments here or as an issue in GitHub.
I have some in mind that I’m currently evaluating … including Angular Console, which is extremely promising!