5 Visual Studio Code Extensions for Angular

| By Maina Wycliffe | | | Angular

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

5 Visual Studio Code Extensions for Angular

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.

Get TSLint Here.

Angular 5 Snippets

5 Visual Studio Code Extensions for Angular

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.

Get Angular 5 Snippets here.

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.

Get Angular Essentials Here.

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.

Get Angular Inline here

What I learned when I switched to Angular Material from Bootstrap

A couple months ago, I was having a debate on whether I should switch from Bootstrap to Angular Material. I have used Bootstrap for a very …

Read More
Components Comparison Between Angular Material and Bootstrap Framework

Today, we are going to compare the components in Angular Material and Bootstrap Framework. This comparison is meant to help you decide on …

Read More
Is Angular Flex Layout (with Angular Material) Better than Bootstrap for Responsive Layout?

First before I can say anything else, I want to express my huge respect and love for Bootstrap. I am not writing this to bash bootstrap in …

Read More
NgRev – Analyze and Profile your Angular App

NgRev is a graphical tool designed to reverse engineer your Angular application. It is not a browser extension like Augury, but a standalone …

Read More
Augury – A Tool to Debug and Profile your Angular App

Augury is an open source tool available to Google Chrome that was developed by Google in conjunction with Rangle.IO for debugging and …

Read More
Angular 5 – Handling Token Based Authentication

Token based authentication is popular for single page applications. A token is a security code issued by a server for authenticating and …

Read More