5 Best Vs-Code Extensions To Work With Angular And Ionic 4

VS-Code is a very popular and easy code editor. Vs-code extensions extend the features of VS-Code. If we work with Ionic and angular we can use these extensions to get the best out of it.

Vs-code extensions for angular and ionic 4 can help us to do better code and save huge time and also prevent from unnecessary syntax mistakes.

TSLint

This extension was written by Erich Gamma and it works very similar to other linter extensions but specifically for typescript.

TSLint is powerful and strongly recommended vs-code extension. It helps us to follow the coding rules. It enables us to identify the mistakes that we do with coding rules.

Like sometimes we use == to compare the values but TSLint force to use === because === used to compare both value as well as the data type of variable whereas == only compare the value of a variable.

When we use let to declare a variable which is never changing its value, TSLint tells us to use const instead of let.

If you want to learn more about linting and code formatting check-out this article https://vscode.rocks/js-linting

This article explains a lot about code formatting and linting techniques. You can learn here the best rules for code formatting and a lot more.

You can download this extension from here https://marketplace.visualstudio.com/items?itemName=eg2.tslint

Ionic 4 Snippets

Ionic 4 Snippets provide us with the snippets of code not only for typescript but also for HTML, CSS and SCSS. This extension will be going to save a lot of time coding.

By using this extension, we don’t need to remember all the syntaxes. Start typing part of the snippet and hit the enter button it will complete the code.

Snippet prefix will start with i-.

For more information and download click on the given link https://marketplace.visualstudio.com/items?itemName=fivethree.vscode-ionic-snippets.

Auto Rename Tag

This is a simple but useful vs-code extension. As its name suggest Auto Rename Tag, it helps us to rename the HTML or ionic tags like we rename the opening tag and it will automatically rename the closing tag.

When we rename one HTML/XML tag, automatically rename the paired HTML/XML tag.

Angular Language Service

To work with the angular and ionic app, this extension is very useful. This extension provides us with the feature to get to the definition of the variable or object.

It also, allow us to walk through all keys of the object without the need to remember them.

Peacock

Sometimes we are working with multiple projects at a time and it’s hard to understand the project without reading the name again and again.

So, to solve this problem, Peacock comes in the picture.

This extension helps us to identify the project type by assigning a different colour to a different project.