Angular is a popular JavaScript library for building web application user interfaces developed by Google. The Angular CLI makes it easy to create an application that already works, right out of the box.
It comes with everything you need to get started building your Angular app. In this blog post, I will cover the ten best Visual Studio Code extensions for Angular development.
Table of Contents
Best Visual Studio Code Extensions For Angular
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.
- 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.
angular extensions for chrome
1) Augury
Augury is an application inspection tool for Angular that runs in the Web browser. It runs as a Chrome browser extension for the Developer Tools (DevTools) panel, aiding in analysis and debugging during development.
Overview of Augury
Augury provides insight into the application structure for an Angular application and the relationship between these building blocks:
- Components
- Services
- Routes
- Modules
- Dependencies
- Injectors
- Data bindings
- Events
- Object properties
Augury compliments DevTools during a debugging session, making it easy to modify state and emit events.
Click the below link to install Augury.
Install Augury
2) Redux DevTools Extension
Redux DevTools for debugging application’s state changes.
If you are using Redux to manage your application state, there is a Chrome extension called Redux DevTools which lets us see all the actions dispatched, state of the application after each action and the difference in states.
It also gives us the ability to rewind the actions and see the corresponding changes on the page.
Redux DevTools needs a bit of setup to be used in Dev environments but once setup, it is well worth the effort. Check out this blog to find out about how to use it in Production. It is recommended that the full-featured version be used for development and the restricted one for production.
Click the below link to install this extension.
Redux DevTools
3) Angular state inspector
Helps you debug Angular component state, inside the Elements tab of the DevTools.
A Chrome extension that lets you inspect the state of components. The extension works even with the hybrid application with UpgradeModule. So it can show state from angular 2+ and scope from AngularJs.
Click the below link to install this chrome extension.
Angular State Inspector
4) AngularJS Inspect Watchers
Inspect the scope watchers of an Angular app
A Chrome extension that lets the user inspect the number of Angular watchers that exist on any element of an Angular app. Once installed, navigate to your Angular app and click the Page Action in the address bar to activate the extension. Then, hover your mouse over different sections of your Angular application to see the scopes and watchers highlighted in red. Click the Page Action again to deactivate.
Click the below link to install this chrome extension.
AngularJS Inspect Watchers
5) Angular watchers
Angular watchers is the ultimate AngularJS tool which tells you how many active watchers you currently have. It automatically updates so you can see live how many watcher a page have. This is perfect to debug any performance issues.
Features
- Total number of watcher on the current page
- Difference from the last total number of watchers
- Visual graph that plots the number of watchers in time (max 25 plots)
- Choose Iframe where you want to count the watchers
- Expose Angular Modules in a global variable window.$$am
- Graph/Counter view toggle
- Dark/Light theme toggle
- Bootstrapped element input – in case your app is manually bootstrapped
Click the below link to install this chrome extension.
Conclusion
Let us know your thoughts in the comment section below.
Check out other publications to gain access to more digital resources if you are just starting out with Flux Resource.
Also contact us today to optimize your business(s)/Brand(s) for Search Engines