Thank you for reading my blog posts, I am no longer publishing new content on this platform. You can find my latest content on either mainawycliffe.dev or All Things Typescript Newsletter (✉️)
Visual Studio Code or VSCode is one of the best text editors out there. It is feature rich out of the box and has a lot of extensions which are easy to install. If you are an Angular developer using Visual Studio Code, you might want to consider the following extensions:
Angular Language Service
I have been using this extensions for a couple of weeks now and it has improved my coding experience. It relies on both @angular/language-service and typescript to provide completions list, and provide AOT (Ahead of Time) Diagnostic messages. It also offers Quick Info and Go to definition options.
Basically, all variables you have declared inside your typescript files are provided inside the template – be it an inline template or an external template. It also warns about errors that will brought up by the AOT compiler inside the Angular CLI – Such as using undefined variables inside your template and unimported or undeclared modules inside your project. Angular Language service also works nicely with Angular material, warning you if you use unimported material. It is a handy tool to have in your list of plugins.
Get Angular Language Service here.
TSLint (Typescript Lint)
Angular relies on Typescript - a superset of JavaScript. While you can still use JavaScript or something else like Dart or CoffeeScript, a lot of developers rely on Typescript for their applications. TSLint for VSCode integrates TSLint Tool into visual studio code.
“TSLint is an extensible static analysis tool that checks TypeScript code for readability, maintainability, and functionality errors. It is widely supported across modern editors & build systems and can be customized with your own lint rules, configurations, and formatters.”
For this extension to work, it requires both TSLint and Typescript to be installed either locally or globally. To install TSLint and typescript globally you can use the following command: npm install -g tslint typescript.
Angular 5 Snippets
This extension provides snippets for TypeScript, Html, Angular Material, ngRx, RxJS and Flex Layout. Although it requires some effort to learn how to use this extension, it can save you sometime if you learn how to use it. It is also extremely useful to developers who do not use Angular CLI as it will take some task off their hands like creating new components, services etc.
Angular Essentials
Technically, this is not an extension but rather a pack of extensions. It is packed with multiple extensions for Angular in Visual Studio Code, some already discussed in this list. It contains: Angular 5 Snippets, Angular Language Service, Editor Config, Tslint, Chrome Debugger, Path Intellisense, Angular Inline, Winter is Coming theme and Prettier Formatting extension. If you wanted all angular extensions, install this extension pack and you will get most of them if not all.
Angular Inline
If you use inline stylesheet and templates, you might want to consider Angular Inline. This extension provides Syntax highlighting and Code completion and hover information for inline html. It only works when you wrap your content using the backtrack character (`) which is kind of odd.