Best Angular Plugin For VS Code

You’re getting started with your first Angular plugin, and want to keep it simple. There are thousands of options out there marketed as the “best” Angular plugin for VSCode. How do you choose?

Whenever I start a new Angular project there are only a few plugins I miss from the get go. The two main ones are Karma and Protractor, which can be tested in an Angular application. Luckily, a VS Code user (and tool enthusiast) by the name of Félix Rotsaert created SourceTree-Angular.

While developing Angular applications with Visual Studio Code, it may be a good idea to have a list of plugins that you can use for better productivity.

Best Angular Plugin For VS Code

Visual Studio Code Editor has lots of extensions which can be used for faster angular app development and reduce the errors.

Best Visual Studio Code Extensions makes application development faster.

Here Is The List Of 10 Best VSCode Extensions For Angular Development.

1. Angular V6 Snippets By John Papa
   This VSCode extension adds different Angular 6 snippets for TypeScript (Snippets like Component, Module, Service) and Template Snippets.

It is very useful for generating Typescript Snippets like Components, Modules, Services, Directives, Pipes, Router Paths, Events and much more.

also provides useful Template Snippets like [ngClass], [(ngModal)], *ngFor, *ngSwitch, *ngIf and much more.

So instead of writing each code manually, you can use this extension to generate a code snippet

Angular v5 Snippets
Angular v6 Component Snippet
Angular v5 Snippets by John Papa

Angular v6 Snippet

2. Angular Language Service
   This extension provides a rich editing experience for Angular templates, both inline and external templates including:

Completions lists
AOT Diagnostic messages
Quick info
Go to definition
This extension uses @angular/[email protected] [email protected].

Angular Language Service

Angular Language Service

3. TSLint By Egamma
   During the code development probably the difficult task is to remember quotes, brackets, semicolons, and syntax.

This extension helps to reduce the development time errors and formatting the code. By showing the error messages at a specific line, in addition to this, it also provides the solution to remove that error.

TSLint Code Snippet

4. Path Intellisense By Christian Kohler
   It is a very boring task to remember the path of any file. Path Intellisense helps you in finding the path of any file.

You can use it in the TypeScript file for templateUrl, styleUrl etc, also in the HTML file for the src path of image.

PathIntellisense Extension

Path Intellisense Code Snippet

5. Bootstrap 4 & Font Awesome Snippets By Ashok Koyi
   This VSCode extension adds Bootstrap and Font awesome snippets. Due to this, you can make your Bootstrap UI Development faster. You just need to write the command and it will generate whole code with specific bootstrap classes.

Different components snippets generated using this extention are : Alert, Badge, Breadcrumb, Button, Card, Carousel, Collapse, Dropdown, Form Components, Jumbotron, List, Nav, Pagination and much more.

In addition to this, You can also generate Font Awesome Icon Snipptet using this extension.

Bootstrap v4 Snippets

Bootstrap 4 Snippet
Bootstrap Font Awsome

Font Awesome Snippet

6. Angular2-Switcher By Infinity1207
   In Angular One Component have related .html, .css and .ts file. During the development, you need move between this files many times.

This extension can be really very helpful for this purpose. You just need to press 2 keys, like

alt+o(Windows) shift+alt+o(macOS)

if on ts: go to html

if on css: go to html

if on html: go to previous (ts or css)

Angular Switcher Extension

Angular2 Switcher Snippet

7. Debugger For Chrome By Microsoft
   This extension helps you to debug your javascript and typescript code in chrome browser at runtime.

Features :

Setting breakpoints, including in source files when source maps are enabled
Stepping, including with the buttons on the Chrome page
The Locals pane
Debugging eval scripts, script tags, and scripts that are added dynamically
Watches
Console

8. VSCode-Icons By Roberto Huertas
   This extension provides different icons for different files, which can be very helpful in identifying the files

VSCode Icons Extension

VSCode-Icons Snippet

9. Git History (Git Log) By Don Jayamanne
   If you are using GIT as a remote repository then this extension can be really very helpful.

Features :

Git History with graph and details (latest feature)
You can see the details of a commit, such as author name, email, date, committer name, email, date and comments.
View a previous copy of the file or compare it against the local workspace version or a previous version.
You can also see the changes to the active line in the editor (Git Blame).
Configure the information displayed in the list
Use keyboard shortcuts to view history of a file or line
Compare commits/branches
View commit information in a treeview (snapshot of all changes)
Git History Extension

Git History Snippet

10. GitLens — Git Supercharged By Eric Amodio
    GitLens is powerful, feature rich, and also highly customizable to meet your specific needs to manage Git Repository. It provides more advanced features than Git History extension.

Some of the features that GitLens provides :

a GitLens explorer to navigate and explore repositories
a GitLens History explorer to navigate and explore file histories
an on-demand GitLens Results explorer to navigate and explore commit searches, visualize comparisons between branches, tags, commits, and more
authorship code lens showing the most recent commit and # of authors to the top of files and/or on code blocks
an unobtrusive current line blame annotation at the end of the line
on-demand gutter blame annotations, including a heatmap, for the whole file
detailed blame information accessible via hovers
on-demand recent changes annotations to highlight lines changed by the most recent commit
a status bar blame annotation showing author and date for the current line
commit search — by message, author, filename, commit id, or code changes
many powerful commands for exploring commits and histories, comparing and navigating revisions, stash access, repository status, etc

GitLens
Git History Snippet

Other Beneficial Extension.
Angular2-Inline By Nate Wallace
This extension can be helpful for inline css and html of component.

Features provided by this extension :

Syntax highlighting of inline html and css.
Code completion, highlighting, and hover information for inline html.
Angular Inline Extension

VS Code is the most commonly used code editor which provides a bunch of features that are very helpful for developers in writing code. Visual Studio Code extensions helps to do the development with ease and support the development workflow. This article enlists some of the important Visual Studio Code extensions for Angular or while working on Angular.

Top-10-VS-Code-Extensions-For-Angular-Developers

Path Intellisense
Angular Snippets
Angular2-Switcher
Angular Files
REST Client
JSON to TS
Angular Language Service
Angular2-Inline
TSLint
Material Icon Theme

1. Path Intellisense

We have to manage multiple files while working on a project. Many times it is not easy to remember the file names especially when the file name is having hyphens. In order to avoid this problem, we have Path Intellisense extension in VS Code. It autocompletes the file name. As you start typing, it suggests file paths helping you to easily add the intended file. If there are any hidden files, path intellisense can also help to make them visible.

2. Angular Snippets

It is the most popular Angular-related VS Code extension. This extension for Visual Studio Code saves a lot of time by adding snippets for Angular for TypeScript and HTML. It can be used with vs code 0.10.1 version or higher. We can use the keyboard shortcut to directly activate the snippets from within the editor thus making the work much easier.

3. Angular2-Switcher

This extension helps to navigate between CSS, ts, and HTML files of a particular component in angular. Using some shortcut keys after installing Angular Switcher, you can switch from one file to another quickly. The key combination for switching is given below for both Windows and MAC os.

 Windows macOS

Switch to HTML Alt+O Shift+Alt+O
Switch to CSS Alt+I Shift+Alt+I
Switch to ts Alt+U Shift+Alt+U
Switch to spec.ts Alt+P Shift+Alt+P

4. Angular Files

When you create a component in your project, this extension will create the boilerplate code for all the files within the component. So there is no need to write the code from scratch for all those newly created files.

5. REST Client

As a developer, while working on Angular, we have to frequently hit some backend API to get or send some data through the HTTP request. Rather than using any third-party tool (like postman), we can do all those stuff here in VS Code itself. It allows you to send HTTP requests. You can view the response directly in Visual Studio Code. It prevents you from switching between a third party tool and the code editor.

6. JSON to TS

It converts JSON object to typescript interfaces. Cases where you have some API at the backend and it returns JSON objects and you need to cast them in response to POJOs in the front end, then this extension is a boon to everyone. It will parse the whole JSON and create POJOs out of it.

7. Angular Language Service

This is actually a very important extension for angular developers. It requires a minimum of 16.5.0 version of Visual Studio Code editor and provides some useful features like Angular code completion, Angular Diagnostic Messages, Quick info, and Go to definition.

8. Angular2-Inline

This extension is helpful in the CSS and HTML files of the component while working with Angular. It provides syntax highlighting and thus improving the code readability. It also helps in code completion and gives information about the inline HTML on hovering over it. When we use the backtick character(`) to define an inline template or inline style sheet then this extension is used to process the content.

9. TSLint

TSLint helps to improve code readability, maintainability and rectify functional errors. Once you install it, it will create a wavy line under the section of code where there are some problems and display warnings and errors on hovering over it. You will be able to see a list of errors detected and fix them.

10. Material Icon Theme

This extension is optional but very aesthetic though. It provides different icons for both files and folders. You can customize the colors of these icons, according to your requirement. it uses Google’s Material Design library to insert icons.