Learn More

Try out the world’s first micro-repo!

Learn More

The Best VS Code Extensions

The Best VS Code Extensions

Visual Studio Code continues to be the most popular IDE for modern web development due to its wealth of features, but the best part about VS Code is that it’s open source, which makes it highly extensible.

It is supported by a large community of developers, companies, and contributors who continuously add new features and utilities to enhance its capabilities through a plethora of extensions, which are available through Visual Studio Marketplace.

If you find the number of extensions available to be overwhelming, though, read on. This guide will go through fifteen of the best VS Code extensions every developer should have installed in their dev environment.

Why Do You Need These Extensions?

Although VS Code is already a robust code editor, extensions allow you to customize it with features that better suit your needs and help increase your productivity.

Extensions can help you properly format code, make debugging easier, improve readability and accessibility, and generate snapshots of code snippets, among other tasks. There are extensions for basically anything and everything. Simply put, extensions give you superpowers.

What Types of Extensions Are Included?

This article will focus on the following types of extensions:

  • Formatters
  • Auto-completion tools
  • Snippet managers
  • Code tracking tools
  • Spell checkers
  • Time management tools
  • Collaboration tools
  • General productivity tools
1. Colorize

When you’re working with colors in your stylesheet, it can be frustrating to write the color code or name without seeing what the color looks like.

The Colorize extension fixes this problem by highlighting the text’s background with the exact color as it would be rendered in your application.

Colorize demo
2. CSS Peek

CSS Peek allows you to expand your HTML and EJS files to display CSS/SCSS/LESS code within the original HTML code and to jump quickly to the right CSS code if you know the CSS class name or ID.

CSS Peek demo

This is especially helpful when you want to make quick edits to your CSS from your current source file without having to jump to the actual CSS file or if you want to look at the current style associated with a class or an ID.

3. Tabnine

Tabnine is a deep learning AI-based extension that uses machine learning to assist you in writing your code faster by auto-completing it. This extension supports all the popular languages and provides relevant hints.

Tabnine is powered by a machine learning model that was trained on analyzing open source GitHub code.

4. Pieces

The daily routine of any software developer usually involves writing a lot of code. Along with that comes the mundane task of having to write the same lines of code over and over again.

Pieces is an advanced snippet manager extension that provides a fast way to save code snippets without having to break your workflow or leave your workspace. Pieces also supports all the popular programming languages and integrates with other platforms to make saving and accessing snippets a breeze.

Pieces demo

By storing code snippets that can be accessed anywhere and anytime, Pieces boosts your productivity. You won’t have to focus on rewriting the same code twice.

5. Prettier

Prettier is a code formatter that fixes sloppy coding structure. It parses your code and adds proper formatting rules, including wrapping and indenting code when necessary, and enforces a consistent style so that it’s easier to read.

When it comes to formatting your code and maintaining style consistency, no extension does it better than Prettier.

6. Live Server

With over 19 million installations, Live Server is one of the most popular extensions available in the VS Code marketplace. It allows you to launch a local development server with live reload functionality for developing both static and dynamic web pages.

Live Server demo

In addition to allowing you to test your code, it enables remote connections, Chrome debugging, and handy hotkeys for starting and stopping the server, turning your VS Code editor into a full-fledged IDE.

7. Auto Rename Tag

As the name suggests, Auto Rename Tag automates renaming or modifying HTML/XML tags by reflecting whatever changes are made to the opening tag in the corresponding closing tag.

Auto Rename Tag demo

With this extension, you won’t have to go through the hassle of searching for the corresponding closing tag of an element when you make changes to the opening tag.

8. Live Share

Live Share is a collaborative tool that lets you collaborate with others in real time to edit and debug code, regardless of the programming language you’re using. In this age of remote work, Live Share makes pair programming and debugging immediate, easy, and accessible.

Live Share demo

The process is simple. You create a session and send the link to colleagues so that they can join your session. When they do, they get a copy of your environment and code in their editor without having to install anything.

9. Peacock

Peacock allows you to assign different colors to different instances of your VS Code workspace.

Peacock demo

With this extension, you can easily identify your editor when you have multiple VS Code instances or when you’re using VS Live Share or VS Code’s remote features.

10. WakaTime

WakaTime helps you keep track of the time you spend on each project. It automatically generates dashboard metrics and insights on your coding activity and provides you with weekly and monthly reports as well.

WakaTime is smart enough to know when you are actually coding — it doesn’t just track time spent in your editor; it also supports cross-platform integration like direct integration to GitHub.

WakaTime dashboard

WakaTime comes in handy when you want to know how much time you spend coding on a project. This is especially important when freelancing, so you can more accurately charge your clients based on the time you worked.

11. GitLens

GitLens is an open source extension that helps you better understand changes made to your code. It supercharges the current VS Code Git functionalities with the ability to perform side-by-side code comparisons from your previous commits and changes, along with other features.

GitLens demo

You can explore the history of a codebase to gain a better understanding of its evolution and find out when and why a line or code block was altered.

12. Code Spell Checker

Everyone makes typos at some point, then spends precious time looking for them. Code Spell Checker checks your code for typos and spelling mistakes before they become problematic in your workflow.

Code Spell Checker demo

As you type comments, variables, strings, and plain text, the extension highlights common spelling errors. It also works well with CamelCase.

13. Bookmarks

As the name suggests, Bookmarks helps you mark and name specific positions or sections in your code for easy navigation. It also offers dedicated sidebar and selection commands, which allow you to select lines and regions between lines that have been bookmarked. It’s really useful for log file analysis.

Bookmarks demo
14. Better Comments

Have you ever wanted something more powerful than the default comments in VS Code? Better Comments helps you write more readable, human-friendly comments by allowing you to highlight comments based on types of annotations.

Better Comments demo

Each annotation type has a different color for different purposes, making comments more instantly readable and easy to organize. Types supported include alerts, queries, to-dos, and highlights. Additionally, you can customize highlighting based on the comments that you may need for other things.

15. JavaScript (ES6) Code Snippets

With JavaScript (ES6) code snippets, you can reduce the time you spend repeatedly typing the same code and instead focus on the real work at hand.

This extension comes with a multitude of helpful code snippets for JavaScript ES6 syntax, which you can basically use as code shortcuts. When triggered, the snippet simply replaces the text and inserts it directly into the document. For example, typing “clg” would quickly yield console.log().

Conclusion

The most valuable thing about using Visual Studio Code may be the wide variety of extensions available from the large, supportive VS Code community. This guide introduced you to the fifteen best VS Code extensions to incorporate into your workflows. Using these extensions can boost your programming productivity and help you become a better developer.

In all cases, these extensions should only take a few minutes to install and run. Considering what they can do for your projects, that time will be well spent.

Interested in becoming a Pieces Content Partner?

Learn More

Get our latest blog posts and product updates by signing up for our monthly newsletter! 

Thank you! Your submission has been received!
Oops! Something went wrong while submitting the form.

Table of Contents

No items found.
More from Pieces