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.
