Essential extensions for Angular developers
Tags: angular, javascript, extensions, vscode
Published: 2020-10-05 11:59:24

Visual Studio Code (more casually known as VS code) is a lightweight but powerful cross platform open source code editor that runs on your desktop. With built in support for debugging, syntax highlighting, intelligent code completion, snippets, code refactoring, and embedded Git. I quickly fell in love with the editor the more I used it to build my projects.

Another reason for its broad popularity is the various extensions available in the marketplace that enrich the  development workflow. Today we are going to be looking at Angular Essentials extension pack for angular developers and some of the extensions included in this pack.
lets start by navigating to the Extension Menu of vs code and  Search for the **Angular Essentials** keyword and click on the **install** 
button.

![Alt Text](https://dev-to-uploads.s3.amazonaws.com/i/t6xx1yoy2st3n2ybn1k5.png)
This [Angular Essential pack](https://marketplace.visualstudio.com/items?itemName=johnpapa.angular-essentials) comes with 12 extensions to help angular developers boost their workflow and productivity some of them include.

1.**[Angular TypeScript Snippets](https://marketplace.visualstudio.com/items?itemName=johnpapa.Angular2&wt.mc_id=angularessentials-github-jopapa)**
   The Angular Snippets extension contains a collection of TypeScript and HTML code snippets for various Angular artifact, such as components,root app component,module,pipe,404 route path etc.
**note**
All available Angular snippets start with the a- prefix. 
![Alt Text](https://dev-to-uploads.s3.amazonaws.com/i/bhuhfbgwt6bifm7v4mna.png)
2.**[Angular Language Service](https://marketplace.visualstudio.com/items?itemName=Angular.ng-template)**
      The Angular Language Service extension is developed and maintained by the Angular team and provides code completion, navigation,Go-to navigation and error detection inside Angular templates and its part of the angular essentials extension pack.To see some of the powerful capabilities of the extension, let's have a look at the code completion feature. Suppose that we want to display a new property called **lead** in the template of AppComponent. We can set this by defining the new property in the component class.

![Alt Text](https://dev-to-uploads.s3.amazonaws.com/i/mrcjmael3yjne08aavvj.png)
then Start typing the name of the property in the template. The Angular Language Service will find it and suggest it for you automatically.
![Alt Text](https://dev-to-uploads.s3.amazonaws.com/i/x3u7zio3hbyxc11cpbw2.png)
3.**[Nx Console](https://marketplace.visualstudio.com/items?itemName=nrwl.angular-console)**
Most of the time developers want to concentrate on delivering top notch Angular applications instead of trying to remember the syntax of every CLI command they want to use so Nx Console is an interactive UI for the Angular CLI that aims to assist developers that are not very comfortable with the command-line interface (CLI) or do not want to use it at all.To used the extension all you have to do is click at **Nx console icon** at the vs code menu and select your workspace and your good to go.
![Alt Text](https://dev-to-uploads.s3.amazonaws.com/i/kpha3t9jsqgfjqqynmvx.png)
4.**[Material icon theme](https://marketplace.visualstudio.com/items?itemName=pkief.material-icon-theme&wt.mc_id=angularessentials-github-jopapa)**
   VS Code initially comes with some built-in set of icons that it uses to display different types of files in a project. This extension provides additional icons that conform to the Material Design guidelines by Google.
Using this extension, you can easily spot the type of Angular files in a project, such as components and modules, and increase developer productivity, especially in large projects with lots of files.
![Alt Text](https://dev-to-uploads.s3.amazonaws.com/i/yxkzafw2u20bwj2bjj3p.png)
 **NB**
You need to reload VS Code after this extension is installed for the icon changes to take effect.

5.**[TSLint](https://marketplace.visualstudio.com/items?itemName=ms-vscode.vscode-typescript-tslint-plugin)**
TSLint is an extensible static analysis tool that checks TypeScript code for readability, maintainability, and functionality errors by applying a set of rules. These rules are defined in the **tslint.json** configuration file, which can be found in the root folder of an Angular CLI project. It is maintained by Microsoft and must be installed separately since its not part of the essential pack.
![Alt Text](https://dev-to-uploads.s3.amazonaws.com/i/witl72syb8hv0czw7g91.png)
 6.**[Peacock](https://marketplace.visualstudio.com/items?itemName=johnpapa.vscode-peacock)**
        Peacock vs code extension helps you to Quickly identify each of your Visual Studio Code instances using your favorite colors and its part of the Essential extensions for Angular developers as seen below.its very import when your working with multiple code instances (separate vs code windows with different part of the projects)
![Alt Text](https://dev-to-uploads.s3.amazonaws.com/i/yj78334760v5d3g2ijjd.jpg)

7.**[EditorConfig](https://marketplace.visualstudio.com/items?itemName=EditorConfig.EditorConfig)**
    VS Code editor settings, such as indentation or spacing, can be set at a user or project level. EditorConfig can override these settings using a configuration file called .**editorconfig**, which can be found in the root folder of an Angular CLI project. You can define unique settings in this file according to your project requirement and all your team Members can follow this configuration to ensure the consistency of the coding style across your team.
![Alt Text](https://dev-to-uploads.s3.amazonaws.com/i/gj0h71tcbal85hwltycb.png)
8.**[npm](https://marketplace.visualstudio.com/items?itemName=eg2.vscode-npm-script&wt.mc_id=angularessentials-github-jopapa)**
   This extension supports running npm scripts defined in the package.json file and validating the installed modules against the dependencies defined in the package.json.
**Notice** The validation is done by running npm and it is not run when the modules are managed by yarn.
![Alt Text](https://dev-to-uploads.s3.amazonaws.com/i/fa7qo3b7g4snl4sxg2i8.png)
           Other extensions in the pack include
[Debugger for Chrome](https://marketplace.visualstudio.com/items?itemName=msjsdiag.debugger-for-chrome&wt.mc_id=angularessentials-github-jopapa)
Debug your JavaScript code running in Google Chrome from VS Code.
[ESLint](https://marketplace.visualstudio.com/items?itemName=dbaeumer.vscode-eslint&wt.mc_id=angularessentials-github-jopapa)
[Prettier - Code formatter](https://marketplace.visualstudio.com/items?itemName=esbenp.prettier-vscode&wt.mc_id=angularessentials-github-jopapa)
[Winter is Coming Theme](https://marketplace.visualstudio.com/items?itemName=johnpapa.winteriscoming&ssr=false)
        I hope you found this helpful, if you have any questions comment below or reach out to me on [twitter](https://twitter.com/thalhatou) or [facebook](https://www.facebook.com/thalhatouyahya).