After I had discovered the increasing popularity of Angular, I have been increasing my knowledge in this framework. Especially when it is combined with Visual Studio Code which is a favorite editor of mine.
I found a couple of extensions for VS Code that helped me a lot. In this article, I will share 7 Visual Studio Code extensions for Angular.
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 |
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.
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.
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.
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.
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.
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.
LiveServer
This extension launches a local development server to enable live reload features for static and dynamic pages. You can configure it to automatically reload pages as soon as you save your current work.
TabNine
TabNine is your polyglot AI coding assistant. Based on a GPT-2 model, TabNine uses machine learning to help you write code faster and better. There’s no configuration necessary just install and start typing. The AI will typically auto-complete your code in under 10ms.
Live Share
If you tend to work collaboratively on your code, this official Microsoft extension for VS Code is one you need. It allows instant sharing of current projects alongside debugging sessions, terminal instances, web apps using localhost, and more.
Quokka.js
Quokka.js is a live scratchpad for JavaScript. It checks your JavaScript code in real-time and lets you know which blocks have already executed and which have not.
Code Spell Checker
Typos make for particularly annoying bugs. This extension can prevent this particular type of annoyances by underlining spelling errors in your code. Code Spell Checker works well with camelCase code while keeping the number of false positives low.
Auto-Close Tag
Another particularly unpleasant type of bug common in web development are open tags. Auto-Close Tag, as the name suggests, closes your tags automatically. When you open a tag like <p>, the </p> is instantly added and your cursor is placed between the two.
GitLens
VS Code comes with Git support baked in. However, if you want to supercharge it, GitLens help adds several features that help you visualize, navigate, and better understand a project’s Git history.
GitHub Extension
If you tend to work a lot with GitHub, Microsoft has got you covered. With the GitHub extension you can clone, create, or publish repos without ever exiting VS Code.
Prettier
You think you’re opinionated?! Check out Prettier as it most likely has some critique about your code. It enforces a consistent style by refactoring your code with its own rules that take the maximum line length into account, wrapping code when necessary. It is recommended that you use it in conjunction with ESLint to ensure it follows your own linting configuration.
Beautify
An alternative to Prettier, Beautify will reformat code written in Javascript, JSON, Sass, CSS, and HTML.
Material Icon Theme
Add the Material Design icons to your VS Code with this helpful extension.
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.
ESLint
Another extension to keep your code clean and consistent is ESLint. Covering both code quality and coding style issues, ESLint is a static code analysis tool for identifying problematic patterns in your code.
Bracket Pair Colorizer
Does exactly as the name says and colors pairs of brackets for easier recognition of nested component bracket pairs. It also looks fun and colorful on your screen and can be fully customized.
Better Comments
Good comments often make the difference between maintainable code and a huge mess. This extension does exactly what the name claims – it makes your comments more human-friendly by letting you categorize your annotations into alerts, queries, TODOs, highlights and more.
Remote – Containers
Containers have gained popularity in development and if you make use of remote containers, this extension is for you. It provides a full-fledged tool and a well-defined runtime stack to be used for containerizing your programs directly from the VS Code UI.
Path Intellisense
Path Intellisense is a Visual Studio Code plugin that autocompletes filenames. It adds Intellisense-style completion to filenames, letting you easily type long path names.
Path Autocomplete
Similar to Path Intellisense, this extension provides path completion for VS Code so you don’t have to memorize those long paths.
Settings Sync
If you work on multiple machines or simply want to have your VS Code settings and preferences backed-up, the Settings Sync extension is one you should install. It lets you synchronize settings, snippets, themes, file icons, keybindings, workspaces and extensions across machines by using a simple Gist.
Debugger for Chrome
This extension is a must-have for front-end developers. It lets you debug front-end code in the Google Chrome browser (or other targets that support the Chrome DevTools Protocol) directly in your VS Code environment.
Browser Preview
Launching numerous different browsers manually to preview changes across platforms can be a drag. Browser Preview might help. This extension creates a debuggable real browser preview inside your editor.
JavaScript (ES6) Code Snippets
Code snippets are a great way to save keystrokes. This extension contains code snippets for JavaScript in ES6 syntax for VS Code editor (supporting both JavaScript and TypeScript).
ES7, React, Redux & GraphQL Snippets
This extension provides you with another collection of JavaScript and React/Redux snippets in ES7 with Babel plugin features.
Reactjs Code Snippets
A collection of code snippets for Reactjs development in ES6 syntax, sourced from a collection originally created for the Sublime text editor.
TSLint
ext install tslint
If you aren not linting your code yet, start now.
If you already are, seeing linter those errors alongside the code is far more convenient than having to look for them in your terminal. That’s what TSLint extension enables.
It will draw squiggly lines under the code where you have a problem and display a list of warnings & errors on hovering it. You can also see the list of all detected problems in… well, the Problems panel.
Auto Import
ext install autoimport
We’re not living in the global world anymore… well, I mean as far as our scripts are concerned. Nowadays everything has to be imported. When working with Angular you’ll often be writing several of those import { Something } from './somewhere'. This guy will do it automatically for you.
Angular 2 TypeScript Snippets
ext install Angular2
How many times have you written the code for a component or, say, even things like a code for getting data from url and mapping the response to JSON object?
return this.http.get('http://someurl')
.map((response: Response) => response.json());
If you feel like there are more fun things to do with your time, you’re right. That is why it’s good to have some Angular code snippets at hand. Angular 2 TypeScript Snippets has several code pieces that cover the typical scenarios:
- In the TypeScript land you’ll be able to choose from 10 things to generate, such as component, service or subscription.
- In HTML there are additional 7, like ngFor or ngModel.
It is actually the most popular Angular-related VS Code extension by far and it probably didn’t hurt that it is written by the John Papa.
Conclusion
VSCode extension’s are very useful for Angular development. Whether it is project management, code beautification, code analysis or just code management, there is always something that will help improve your experience. If you are looking for Visual Studio Code extension that can boost your Angular development then this article is for you.