Since the release of VSCode a few years ago, it has become very popular among developers. VSCode is my favorite text editor and use it every day for almost all my projects. The only exception are projects related to Machine Learning where Notebook Style IDEs’ are more suitable.
In my previous post, I wrote about tips to improve the angular development experience. In this post, I am going to look at the VSCode extensions that are a must have for Angular Developers. So, without further ado:
Angular Language Service Extension
This one is a must for any Angular Developer. Angular language service is a way to get completions, errors, hints, and navigation inside your Angular templates. It doesn’t matter whether they are external, in an HTML file or embedded in annotations/decorators in a string.
This extension will use Angular Language Service to provide Intellisense, AOT (Ahead of Time) Compilation Diagnostic Information, Quick Information and Go to Definition. These are useful features that make your life as a developer easier.
Visit the extension page for more information.
Angular-2 Inline
I don’t use inline templates that often, but when I do, I find that lack of Intellisense makes my work that more difficult. This extension has alleviated that problem since I started using it. It provides code autocompletion, syntax highlighting and quick information for inline templates.
Visit the extension page here for more information.
IntelliSense for CSS class names in HTML
This extension does one simple Job, scan your current workspace looking for CSS Classes and then provide autocompletion for the same classes inside your angular html templates. Whether the classes are bootstrap classes or your own custom classes, this extension will find them and provide autocompletion for them under the class attribute of your html elements. It is simple, neat and works out of the box.
You can learn more about this extension here.
Debuggers for Chrome, Firefox and Edge
These are three extensions that basically do the same thing but on different browsers. They enable you to test your Angular/JavaScript application. The neat trick is that debug information is sent directly back to visual studio code console instead of the browsers console.
On top of that, you can add break points to your Angular components, and step through the execution of your code. These are important tools to allow you to test your app compatibility with multiple browsers.
You can learn more about the extensions in the links provided below:
- Google Chrome (Debugger for Google Chrome)
- Mozilla FireFox (Debugger for Mozilla Firefox)
- Microsoft Edge (Debugger for Edge)
TSLint Extension (Typescript Lint)
This extension integrates TSLint into VSCode. TSLint is an extensible static analysis tool that checks TypeScript code for readability, maintainability, and functionality errors. This extension brings all this goodness to VSCode.
For more information about TSLint, visit the official github repo here. The extension also provides some important VSCode commands such as Auto-Fixing of problems highlighted by TSLint among others.
You can learn more about this extension here.
Prettier – Code Formatter
Every developer wants their code to look clean, organized and be consistently formatted. Clean, organized and consistent code makes it easy to read and follow and even prettier to look at. That’s the goal of this extension.
This extension also comes with a host of configuration options such as where to add line break, format on save/paste or type, whether to automatically add semicolons at the end of a statement etc. It works well with JavaScript/TypeScript and CSS. For html, VSCode seems to do a fine job on its own – no extension required.
You can learn more about this extension here.
NPM
This is a simple extension that I find extremely useful. In your package.json file, if you select or hover on a package version number, it will automatically pull the latest version of the package from NPM.
This gives you an option to easily know whether you are using the latest version of an NPM package. That’s what I use it for mainly, but it can do more than that. The extension will validate your package.json file for errors, quickly run NPM scripts and stop a running script. For those of you who use yarn, some of the features may be unavailable.
You can learn more about this extension here.
Git History
This is another essential extension for anyone who uses Git in their projects. It provides a nice UI for you to interact with your Git repo. With a click of button, you can get all your git history for your current VSCode Workspace. You can search, view previous copy of a file, compare, revert, merge and do a lot of git operations with this extension. Right click on a file inside the explorer and you can view its git history and previous versions easily. And with over 3 Million install, you can see why a lot of developers love this extension.
You can learn more about this extension here.
Angular 6 Snippets
I don’t use this extension that much, but it would be criminal not to include it. It is developed by John Papa, a prominent member of the Angular Community. It adds snippets for Angular for both TypeScript and HTML.
In a single command, it will generate boilerplate code for an angular service, component etc. or boilerplate code for your html element. On top of html and typescript, this extension also supports docker file and JavaScript.
You can learn more about this extension here.
Path Intellisense
This is a simple yet useful extension whose goal is to provide filename Intellisense inside your code. It relies on the TsConfig Base URL to map the root of your project. It enables you to navigate through your directories in your project until you get to the file you want. There isn’t much to say about this extension considering the name is quite self-explanatory.
You can learn more about this plugin here.
Conclusion
Those are some of the VSCode extensions I use to improve my Angular Development Workflow. If I left any extension from this post, you can suggest it in the comment below and I will be happy to add it to this list. Thank you for getting this far, don’t forget to share if you found this helpful.