One of the keys to VS Code’s popularity is the extension ecosystem, which provides additional functionality and improves the overall coding experience. Have you used the performance enhancing Extensions in VSCode?
In this article, I will share the top 10 VS Code extensions that will increase your productivity and make you more productive. I’ll dive into what these extensions do, how they work, and why they make coding easier.
10 Extensions to Boost Performance in VSCode
GitLens
GitLens is a very popular extension but is always worth mentioning due to its convenience for any developer. Usually, as developers, we want to know who wrote a line of code or the author of a file, and GitLens allows you to visualize git context right in your VS Code file. My favorite use case is when I need to find the right people to tag PR. With GitLens, I get a preview of all the authors of each file, and I use this information to tag colleagues.
Besides basic functions like viewing git context around lines and files, GitLens also gives you the ability to perform various Git operations in the editor instead of using the terminal. With GitLens, you have access to revert, merge, and even rollback commits. If you want to learn about all the features that GitLens has, then you can read more document.
Pieces
Pieces is an AI assistant that gives you the ability to save automatically categorized code snippets, convert screenshots of code to text, and automatically save frequently used code based on patterns. Pieces allows you to manage and import all stored code straight into the editor.
However, the real power of Pieces is when you integrate other Pieces applications, such as its Chrome extension. With just VS Code and the Chrome extension, you can save a block of code on any site like Stack Overflow and import it directly into a VS Code file or import using Pieces’ code autocomplete function.
To start using Pieces, download the Pieces engine, Pieces OS, which supports all the built-in tools and VS Code extensions that you can also find on the web.
Better Comments gives developers the ability to better comment on their own code using a fully customizable tag system. With this extension you can filter different types of comments. For example, with Better Comments you can make all comments todo appears as blue. I use Better Comments for popular comments like bug, todo, queryand question.
Turbo Console Log
When writing JavaScript code, most people 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 them all with a single command. It is really important in speeding up JavaScript development and debugging.
LiveShare
LiveShare allows us to simulate live pair programming 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 the permissions you grant, and talk to you if you have a LiveShare plan.
Code Runner
Optimizing and refactoring code is an important part of the development process, and Code Runner can be an indispensable tool in that process. Whenever you want to test a piece of code, Code Runner gives you the ability to highlight the code and execute it to check if it works or not.
Prettier
Prettier is a very popular code formatter. Although Prettier is also a standalone JavaScript package, the strength of this extension is that it can be customized to reformat the code in a more beautiful structure when saved. The only caveat with Prettier is that it is very stubborn and will force reformatting of the code structure. If this isn’t what you want, then it might not be for you, but I’m sure it will help beginner developers.
Docker
Docker extension helps to perform Docker operations without leaving VS Code. Most of the developers working on modern applications already use Docker to house their applications and with this extension any developer can interact with Docker containers, volumes , networks, etc. Along with performing all Docker-related local operations, developers can also push images onto containers. This extension really supports all levels of Docker development from beginner to advanced.
Import Cost
When writing web applications, there will always be discussions about the performance and package size of the application. While these discussions are warranted, the best time to take some basic action for this is while you’re coding. Import Cost makes it easy for us to do exactly that by showing the size of imports. In a nutshell, Import Cost is using webpack and it gives immediate feedback when you change your imports statements. If you are a front end developer working on web applications such as application performance, which can affect user experience, SEO ranking and conversion rate then you should use this extension.
ESLint
Like Prettier, ESLint is also a standalone JavaScript package with the included VS Code Extension. ESLint, which is both a code formatter and a linter is often started with many JavaScript projects. Using this extension will make recommendations on how to improve your code in real time based on the configuration rules you have set up.
If you have any extensions that you find useful beyond these, please comment below to let everyone know.
In addition, you can also see 24 best Visual Studio Code Extensions to use when programming here.