VS code Extensions for Angular

Top Visual Studio Code extensions for Angular Development

Below is a list of some VSCode extensions I use heavily when developing Angular web applications that have helped me move faster. Check them out!

Compodoc

This first tool is not a VSCode extension, however, I have been using this lately as an invaluable tool when developing in bigger teams. As a developer you will spend a lot of time reading other people’s code where there may not be any documentation. The good people at Compodoc give you an out-of-the-box solution for automatically generating an entire static site of documentation for your Angular project right in your working directory. By providing some really cool graphical diagrams of all the imports, routes, and modules, understanding other people’s code just got a little easier.

Angular7 Snippets

Having this extension installed provides hot keys and short cuts to generate Angular and Typescript snippets. There’s not much more to be said here.

Prettier

Prettier is my de-facto code formatter and takes care of 80% of all of my code formatting. It’s also extremely customizable in that you can include a .prettierrc file in the root directory of your project and customize exactly how Prettier formats your code. Recently I’ve been turned off by the way it formats HTMLcode blocks so I’ve added a .prettierignore file to the root directory of my project to tell Prettier to ignore formatting my HTML – hence the missing 20%. See some sample files below:

// .prettierrc
{
"trailingComma": "es5",
"tabWidth": 2,
"semi": true,
"singleQuote": true
}
// .prettierignore
*.html

Code Spell Checker

Anybody writing code should some sort of spell checker in place. If you’re like me misspell words constantly then this extension will help you spot your blunders and correct them before your users read your mistakes in production!

Leave a Reply

Fill in your details below or click an icon to log in:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out /  Change )

Google photo

You are commenting using your Google account. Log Out /  Change )

Twitter picture

You are commenting using your Twitter account. Log Out /  Change )

Facebook photo

You are commenting using your Facebook account. Log Out /  Change )

Connecting to %s

This site uses Akismet to reduce spam. Learn how your comment data is processed.