5 Visual Studio Code Extensions to Boost Your Productivity

Today’s Community Contributor is Joel Tanzi, Software Engineer at Engaged Technologies.  Joel has been working as a web and application developer with substantial experience building out APIs, front-end websites scaled for mobile use across a variety of frameworks and technologies. He has written several detailed reviews on TrustRadius of the tools he uses at work. Here, Joel shares with us his favorite VS Code extensions.

---

If you are a software engineer, or manage a software engineering team, there’s a very good chance you are interacting with Microsoft’s Visual Studio Code on a daily basis.

Despite its namesake, VS Code is not related to Microsoft’s premier development product, Visual Studio. It is focused on being a code editor rather than a full-featured software development product, so it comes as a surprise to some that software engineers will often use it to the exclusion of most everything else in their development toolbox. One reason for this is VS Code’s rich and densely-populated marketplace of extensions that add on many powerful features to VS Code and integrate it with many other services. 

These extensions:

• make the coding experience much more efficient
• aid in preventing coding errors
• facilitate collaboration amidst teams 
• offer bright and colorful themes 

In this article, I’d like to share with you a few of the extensions I’ve found most useful in my work as a software developer:

1. Faker
2. Prettier
3. GitLens
4. Bracket Pair Colorizer
5. NPM Intellisense

Read Joel’s review of Microsoft Visual Studio Code

How to Install VS Code Extensions

A quick note on installing these extensions (and any other extensions for Visual Studio Code). There’s multiple ways to install these, but the simplest is to: 

1. open Visual Studio Code and click on the Extensions menu icon in the side menu, or select **View –> Extensions** from the main menu, or press *Ctrl-Shift-X* on Windows or *Shift-Command-X* on a Mac.
2. all of which take you to the Extensions view
3. then enter the name of the extension you want in the search bar
4. click on the extension you want in the search results list
5. click **Install** on the next screen. 

Alternatively, you can browse to any of the links supplied at the end of each of the descriptions below and click on the **Install** button.

Faker

Faker gives you a quick and easy way to generate fake data. One of the most tedious parts of setting up tests for your coding projects is coming up with suitable fake data to test against. My work involves working on the code for a transport management system, which involves lots of unit tests that rely on address data. I can tell you it can be mentally tiring to have to keep coming up with unique and reasonable sounding addresses all the time. Faker takes the burden off your brain and generates this kind of data on the fly as you type. 

Just type in *cmd + Shift + p* and select the category of fake data you want. Faker supports a number of fake data types, including (but not limited to) addresses, companies, names of people, phone numbers, and dates. Select what you need and Faker inserts the generated data wherever your cursor is. Stop wasting brain power trying to come up with fake data and let Faker handle it for you. 

Prettier

Prettier is a code formatter, and by its own admission, an opinionated one. By that I mean that it basically decides that its way is best and reformats your code accordingly. We’re talking about rearranging your run-on lines into neatly-spaced and indented code that wraps where appropriate to fit within the standard 80 character line length, adding a line return to create white space where it is easier on the eyes, and collapsing whitespace that is questionable. 

Prettier ensures that your code will always be consistent in appearance, with neatly arranged code blocks and indentation that will allow you and others to review your code without straining to find all the parts. You may be familiar with linters, which can suggest or enforce changes to your code to fit within certain conventions around whitespace, indentation and the like. Prettier takes this a step further and just reformats your code on demand. 

You might be saying to yourself that you don’t want to give up that much control over how your code is laid out. But really, after you’ve minified it for production (you are minifying your code, aren’t you?) it’s not going to resemble anything like how you typed it in, and do you really want to have that endless argument with your teammates about whether to use tabs or spaces? Add Prettier to your development process and put those code formatting disagreements to rest once and for all (well, for once, anyway). 

GitLens

Chances are, if you work on a software development team, you are using Git. Git is the most popular version control system by far and VS Code already has considerable Git integration features built into it, but GitLens takes those and kicks them up to a whole new level. 

With GitLens, you’ll be able to see annotations to your code that detail who authored it, when it was last changed, how it has changed, and who changed it. You can literally jump “back in time” to earlier commits to attain insights into how the code has matured. The side bar will be populated with a wealth of info about your codebase, including data on the repository, history, the ability to search commits, and compare code changes. This is just scratching the surface of what GitLens can do, but you will definitely want it if you work with Git. 

Bracket Pair Colorizer

I realize that a tool that does nothing but apply highlighting to matching pairs of brackets in your code may not sound like the most exciting tool to be pitching. But seriously, Bracket Pair Colorizer offers a really useful feature considering how many parentheses, square brackets and curly braces are sprinkled liberally throughout your code. Yes, there are languages for which this will be less useful (looking at you, Python) but for those of us whom spend most of our time coding in JavaScript, C#, or Java, this is a godsend. 

The extension does just what it says it does, it applies a matching color to each opening and closing set of brackets in your code, allowing you at a glance to understand what code they are enclosing. This can really speed up code review comprehension and save you more time. And yes, you can customize which colors are used, and even which types of brackets are colorized.

NPM Intellisense

NPM is well-known to developers as the open-source software library resource that provides critical packages that help run applications across the Internet. Once you’ve installed these packages in your application, though, you need to tell your code modules where to find them. Generally this means importing the modules where you need to use them. It can be irritating to have to correct misspelled import paths and so Npm Intellisense wants to help you. 

Install this extension into VS Code. When you type in an import statement, Npm Intellisense will display suggestions as you type in the name or path of the npm module you are importing, greatly speeding up this process and helping you avoid annoying mistakes you have to correct later. 

Need a Different Visual Studio Code Extension?

By no means is this list comprehensive. There are many other great extensions out there, but these are some of the ones that will certainly boost your productivity if you decide to use them. You can see many other great extensions to add powerful features to Visual Studio Code at the Visual Studio Marketplace.

---

Want to share your professional expertise on the TrustRadius blog? Join the TrustRadius community, then contact us to become a Community Contributor today.