Helpful Extensions

This lesson shares some great extensions to help boost your web application development in Angular.

At the end of the day, it’s smart development that counts. Extensions are a great tool for faster and smarter development. I am listing down some of the extensions that help me a lot with efficient development, with preferably Visual Studio Code as the IDE.


First off, focusing on code formatting, indentation, commas, semi-colons,

Prettier

This extension makes development easy as it:

  • Maintains a consistent coding style and saves discussion time
  • Formats on save
  • Supports not just templates or JS/TS but also CSS, SCSS, etc.

Angular Language Service

This is a great way to get completions, errors, hints, and navigation inside Angular templates. It works with external templates in separate HTML files, and also with in-line templates.


TSLint

Checks TypeScript code maintainability, readability, and functionality related errors.


TypeScript Hero

Writing a lot of TypeScript? This extension is literally a hero in the workplace.

  • Takes care of the unused imports
  • Sorts imports
  • Auto adds imports

Focusing on large code organization? Opening and closing brackets are a deal! This extension helps you understand the brack companion by the bracket color.

Bracket Pair Colorizer

As the website says,

This extension allows matching brackets to be identified with colors. The user can define which characters to match, and which colors to use.


Focusing on referencing to any other codebase or migrating your app from one version to another?

Peacock

This extension really helps developers separate between different application projects. This extension changes the IDE color helping you differentiate between the different IDEs open.


Need documentation for your vast application, but your deadlines don’t allow writing all the detailed stuff? Well, don’t worry, you are covered.

The following extension helps you do that.

Compodoc

Compodoc creates the documentation of your app with all the routes, modules in your application in their hierarchy. It also creates a flowchart of the way modules and components and nested or sibling relationships.


TabNine

An AI-based autocomplete code extension that gives good suggestions as per the context.


Happy and smart coding!

Get hands-on with 1200+ tech skills courses.