One of the keys to VS Code’s popularity is its unbeatable ecosystem of extensions that provide additional functionality and improve the overall coding experience.
In this article, I am going to share a curated list of my top ten VS Code extensions that will supercharge your productivity and make you more effective as a developer. We will dive into what these extensions do, how they work, and why they make coding more effortless.
GitLens is a very popular extension but is always worth mentioning due to its convenience for any developer’s workflow. Often, as developers, we want to know who wrote a line of code or the authors of a file, and GitLens allows you to visualize git context straight in your VS Code files. My favorite use case for the extension is when I need to find the appropriate people to tag on a PR. With GitLens, I get a preview of all of the authors of each file, and I use this information to then tag peers. Authors of files are especially good for PR reviews since they have the necessary context to give valuable feedback.
Besides basic functionalities such as viewing git context around lines and files, GitLens also gives you the ability to perform various Git operations in your editor opposed to using your terminal. With GitLens, you have access to reverting, merging, and even rebasing commits. If you are interested in learning about all the features GitLens has, the documentation is extensive and covers each one.
Pieces is an AI assistant that gives you the ability to save auto-classified code snippets, convert screenshots of code to text, and autosave frequently used code based on coding patterns. Pieces’ VS Code extension lets you manage and import all your stored code snippets straight into your editor. However, the real power of Pieces comes when you integrate Pieces’ other applications, such as its Chrome extension. With just the VS Code and the Chrome extension, you can save a code block on any web page like Stack Overflow and import it directly into a VS Code file or import it using Pieces’ autocomplete functionality.
To get started with Pieces, download the Pieces engine, Pieces OS, which powers all of its integrations, and the VS Code extension which you can also find on the website link above.
Better Comments gives developers the ability to better document their code using a fully customizable system of tags. With the extension, you get semantic context through custom styling of different comment types. For example, with Better Comments, you can make all todo comments appear as a blue color if you would like in your config, and immediately, after you look at a file with any todo, it will appear as blue. I use Better Comments for common comments like bug, todo, query, and question.
When writing JavaScript, most people would love to say that they use a debugger all the time, but that’s certainly not always the case. Sometimes, console logging is just a necessary part of the development process, and Turbo Console Log makes it incredibly easy. With Turbo Console Log, you can highlight variables, use keyboard shortcuts to insert multiple console logs, and delete all of them with a single command as well. It truly is critical in speeding up JavaScript development and debugging.
Over time remote and hybrid work has become increasingly common, but this has not mitigated the importance of collaboration and pair programming. LiveShare enables us to simulate pair programming in person through VS Code sessions. With LiveShare, you can invite up to 30 people to your pair programming sessions. Others can also follow you as you work through files, edit or write code depending on permissions you grant, and talk to you through audio if you have the LiveShare extension pack.
Optimizing and refactoring code is a significant part of the development process, and Code Runner can be an indispensable tool in that process. Whenever you want to test a code snippet, Code Runner gives you the ability to highlight your code and execute it to check if it works or not. Gone are the days of writing many lines of code without knowing if your code is working.
Prettier is a highly opinionated code formatter that enforces JavaScript best practices during development. Although Prettier is also a standalone JavaScript package, the power of the extension is that it can be customized to reformat your code according to your prettier config upon saving. The only caveat with Prettier is that it is very opinionated and will forcibly reformat and structure the code. If this isn’t the desired behavior for you, it may not be a good fit, but I firmly believe it helps enforce best practices for beginner developers.
The Docker extension helps with performing Docker operations without leaving VS Code. Most developers working on modern applications have used Docker for containerizing their applications, and with the extension, any developer can interact with their Docker containers, volumes, networks, etc. Along with performing all local operations involving Docker, developers can also push images to their container registry. This extension truly supports any level of Docker development from beginner to advanced.
When writing web applications, there are always discussions about an application’s bundle size and performance. Although these discussions are warranted and important, the best time to take some basic action around these concerns is when you are writing code. Import Cost helps us do exactly that with ease by showing us the size of imports inline next to an import statement. Under the hood, import cost is utilizing webpack, and it gives immediate feedback as you change your import statements. It is straightforward and a must, if you are a frontend developer working on web applications as application performance, can affect user experience, SEO ranking, and conversion rates.
Like Prettier, ESLint is also a standalone JavaScript package with a VS Code extension accompanying it. ESLint, the package, is both a linter and code formatter that often gets bootstrapped with many JavaScript projects. Using the extension will offer suggestions on ways to improve your code in real-time based on the config rules you have set up. Again, this helps enforce the practice of writing well-written code with best practices as you are working on your project opposed to thinking about these things later.
If you have any extensions you find helpful outside of the ones described here, please comment them below and give this article a share or like if you learned about any new or useful ones!