10 Awesome VS Code Extensions
Do you use VS Code for Ionic and Angular development? Chances are good that you do. It’s a little app from the unlikeliest of companies that is becoming a big deal.
At its core, VS Code (Code from here on), is a code editor that is free, open source, runs on multiple platforms, and has wide support for most major programming languages and environments.
It goes beyond a simple editor, though, and starts to blur the line between a lightweight editor and a full-blown integrated development environment (IDE). Code is super fast, takes seconds to install, and provides key development features most commonly found in large, commercial IDEs.
One of my favorite features of Code is its vast extension ecosystem. There are thousands of extensions out there built by the community that enhances functionality.
In this post, I’m going to share some of my favorite extensions that can help increase productivity when building Ionic and Angular apps.
Extensions for Teams
First, let’s talk about a few that will help out development teams. It is important when coding on a team that you maintain consistent coding styles and patterns. These extensions will help teams stay consistent on the really important decisions like tabs vs spaces, and if semicolons should or shouldn’t be used.
Prettier
Prettier is a library that provides consistent formatting and style choices in code. The Prettier extension for Code will read a common configuration file (.prettierrc) and apply these rules to code whenever you use Code’s built-in formatting. The rules available in Prettier aren’t numerous, but they are beneficial. Below is a sample .prettierrc file:
{
"printWidth": 80,
"semi": true,
"singleQuote": true,
"tabWidth": 2
}
This fairly common ruleset will provide some practical code formatting that your entire team will adopt. Setup Code to format on save, then formatting will always be applied, with no need to run some task to do it later!
TSLint
Where Prettier is mainly concerned with the formatting of code, TSLint rules can help enforce certain coding conventions like making sure triple equals is always used for equality checking. This helps make sure code complies with best practices decided by the team (as configured in the tslint.json file). TSLint can also fix common problems automatically:
Installing the TSLint extension shows lint errors in Code immediately, versus waiting for the build system to report them.
Note: It was recently announced by the TSLint team that they plan on deprecating TSLint and focus on making TypeScript work better for ESLint. TSLint is still a good choice, though, until the work on ESLint for TypeScript is complete.
GitLens
GitLens surfaces data from git history directly into the editing surface of Code. With it, you can easily see who last edited a particular line of code, view differences, and easily browse repos on a particular commit. There are so many features here and I only use a small subset of them (much like git itself), but it saves a ton of time when needing to view commit history.
Extensions for Development in Ionic & Angular
This next set of extensions will help in your day-to-day coding activities by streamlining development.
Peacock
If you ever work with multiple copies of Code open it can be confusing which project you are currently looking that. Peacock aims to fix that by letting you assign toolbar colors for a particular project. For instance, you can assign your Ionic project a red toolbar, and your backend Node project a blue toolbar, making it much easier to see what project you are working on in a particular window.
Auto Rename Tag
This extension is so simple it’s a wonder that it isn’t included in the default version of Code yet. With the below extension enabled, you can now rename a tag in HTML and have the closing tag rename with it:
It also works great on Ionic component tags as well.
Angular Language Service
The Angular Language Service extension is maintained by the Angular team and gives code completion and go-to definition support inside of HTML templates. No more wondering what you named that model object when trying to write our HTML!
Angular Snippets
This set of Angular snippets has long been maintained by the great John Papa from Microsoft. Updated with each version of Angular, you will find dozens of snippets (bits of code that can quickly generate by typing a simple command) for the most common Angular tasks.
Ionic 4 Snippets
Much like the Angular snippets, this gem will complete Ionic component tags in your HTML quickly as well as some special snippets for code and CSS files. This extension saves on having to go back and forth on the docs so much. If you are still on Ionic 3, search for Ionic 3 snippets.
Angular2 Switcher
Of all the Angular based extensions, this one is perhaps my favorite. It allows you to quickly switch back and forth between the HTML, code, and CSS files that make up your component with quick keystrokes.
While the switching between files is a nice time saver, another feature this extension has is the ability to either cmd/ctrl+click (or hit f12) on variables and functions in HTML to quickly take you to the definition for them in the code file.
Code Spell Checker
This one is self-explanatory but extremely helpful: It catches spelling mistakes in code files. Often I find this helps catch unintended bugs by making a typo in a variable name that TypeScript wouldn’t otherwise catch (like in templates).
Wrapping Up
Code is a great editor for any development project. With a vast ecosystem of extensions and plugins, you can greatly customize your development environment. Have any favorite extensions that I didn’t cover here? Post them in the comments down below!
If you are looking for a more full-featured app builder for working on Ionic apps, then you might be interested in Ionic Studio. It shares many similarities with Code but offers a deeper integration into Ionic with a drag and drop interface, a properties editor, and on-device testing for quickly building out Ionic apps.
Happy coding!