Recommended VS Code Extensions for Angular Developers

#webdev #vscode #javascript #angular

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.

Angular Essentials

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.

Included Extensions

Here is the list of extensions the pack includes, in alphabetical order:

Angular Inline - This extension extends the javascript and typescript languages to add Angular2 specific features for inline templates and stylesheets. When you define an inline template or inline style sheet using the back-tick character the content will be processed by this extension.
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

The Chrome Debugger extension is excellent, and it enables you to debug front-end javascript in VS Code. You should set this up by following this guide in the docs.

tldr;

Add the configuration for chrome, as shown below, to your launch.json.

{
  "version": "0.2.0",
  "configurations": [
    {
      "type": "chrome",
      "request": "launch",
      "name": "Launch Chrome against localhost",
      "url": "http://localhost:4200",
      "webRoot": "${workspaceFolder}"
    }
  ]
}

Then, run your angular app with ng serve -o, set some breakpoints in VS Code, and press F5.

What Else

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!

Top comments (3)

Tomas • May 31 '19

Great list for useful extensions!

I prefer to keep my extensions to a minimum and there for I don't use the "Angular Essentials" extension, after all, only 3/11 extensions are Angular specific :-)

I highly recommend the extension Settings Sync, which enables me to be be productive at a new client in a few minutes and also keeping all my VS Code installations in sync.

Appreciate your hard work for the community, keep it up!