Best Tools for Visual Studio Code

Visual Studio Code is free and open source, and comes with a huge amount of features right out-of-the-box. However, there are some excellent additional plugins and extensions available in the marketplace that will enhance the functionality and extend its capabilities in a multitude of ways. Here’s a look at 9 essential tools every VSC user should consider adding to their arsenal.

Visual Studio Code is a great tool to extend and customize your coding experience. In this article I will give my top picks for the best third-party extensions for VS Code.

Settings Sync

Before you start installing extensions left and right, it’s good to know of the existence of Settings Sync. It allows you to sync pretty much everything you customize on VSCode to Github, from settings to keyboard shortcuts to other VSCode extensions.

This way, you’ll have access to your preferred IDE from whichever device you want, instead of having to program from a vanilla VSCode environment on new devices or having to manually set up everything again.

Remote – SSH

The Remote – SSH extension lets you use any remote machine with an SSH server as your development environment. This makes it much easier to develop and/or troubleshoot in a wide variety of scenarios.

You also don’t need any source code on your local machine, because the extension runs commands and other extensions directly on the remote machine.

Prettier

Prettier is an opinionated code formatter that works particularly well if you have multiple people working on a single project, because the extension enforces a consistent style.

You can set it up so it formats your code every time you save it, significantly reducing the amount of time you need to spend formatting your code.

Auto Rename Tag

While VSCode inherently highlights matching tags and immediately adds closing tags whenever you type an opening tag, Auto Rename Tag automatically renames tags that you change.

The extension works for HTML, XML, PHP, and JavaScript, and removes the need to change your tag names twice.

edit: a few people in the comments have mentioned that Auto Rename Tag is quite buggy, so proceed with care.

GitLens

GitLens supercharges the Git capabilities of Visual Studio Code. This is a powerful extension that allows you to see who, why, and how lines of code have changed over time (among lots of other features).

GitLens is a highly customizable extension. If you don’t like a particular setting, you can easily turn it off in settings.

CSS Peek

Extend your HTML file to see your CSS code

This extension is invaluable for front-end developers. Inspired by a similar feature in the IDE Brackets, CSS Peek allows you to extend your HTML and ejs file to show CSS/SCSS/LESS code within the source code.

It also allows you to quickly jump to the right CSS code if you know the class or ID name.

JavaScript Code Snippets

While VSCode includes built-in JS IntelliSense, JS Code Snippets enhances that experience by adding a slew of import/export triggers, class helpers, and method triggers.

The extension supports JS, TypeScript, JS React, TS React, HTML, and Vue. In the VSCode Marketplace, code snippets for other flavors, such as Angular, are also readily available.

Peacock

Change the color of your VSCode instance

Here’s a cute one. Peacock allows you to change the color of your Visual Studio Code environment, so you can quickly identify which instance you’ve just switched to.

Quokka.js

If your language of choice is JavaScript or TypeScript, then you’ll love Quokka.js. This extension aims to speed up development by displaying runtime values in your IDE as you code, so you can focus on writing code instead of building custom configs simply to try something new.

It’s a simple, lightweight extension, and one that’s perfect for both seasoned developers and newbies alike. It’s also free for community use, but if you’re a JavaScript/TypeScript professional, you can also buy a Pro license that lets you modify your runtime values without having to change your code.

Tabnine

Tabnine is a massively popular AI assistant for VSCode that works with all major programming languages, so there’s no doubt you’ll find it useful no matter what your skillset is.

By studying publicly shared codebases, Tabnine uses deep learning algorithms to predict what you need and offers one-click code completion so you can work through your project quickly and efficiently. For newbie coders, this makes learning a breeze, as it gives you the space to play with ideas without needing to remember coding syntax or search StackOverflow.

And, if you’re a seasoned dev, then you’ll find that Tabnine saves you oodles of time on whatever you’re working on by giving you the building blocks you need to get things running.

Snippets

Snippets are the best way to save time and increase your productivity. This is not a single extension but a collection of extensions with various snippets for different programming languages.

Below are some popular code snippets extensions:

For example, it can be quite tedious to repeat the syntax for functional components in React every time you create a new component. Using the ES7 React/Redux/GraphQL/React-Native snippets extension, you can use the shorthand rfc for functional components and hit enter.

Markdown All in One

Markdown All in One is a single extension that takes care of all your markdown needs, such as auto-preview, shortcuts, autocomplete, etc.

Since its release in 2004, Markdown has become one of the most popular and preferred markup languages. Technical writers worldwide widely use Markdown for articles, blogs, documentation, etc., because of its lightweight simplicity and cross-platform usage. Its popularity has given rise to other variants of Markdown, such as GitHub Flavored Markdown, MDX, etc.

For example, to bold some text in Markdown, you can select that text and use the shortcut Ctrl + B to increase your productivity.

Conclusion

Visual Studio Code has an amazing plugin repository and thousands of plugins available for any type of development workflow. If you’re not careful, it’s easy to get lost in the sea of options and waste a ton of your time determining which plugins are worth installing.