VSCode also known as Visual Studio Code, is certainly one of the popular and lightweight code editor you’ll find. It take things that you’ll find from other popular code editors such as Atom and Sublime Text.

Its success essentially comes from the power to provide better performance and stability you won’t find in other editors. It provides other features like IntelliSense, which you could only found available in fullsized IDEs such like Eclipse.

The power you find in VSCode no doubt comes directly from its marketplace which is all thanks to the incredible opensource community. Editors can now provide virtually any programming language, framework, and development service. Support for a library or framework is done in a number of ways. Snippets and syntax highlighting are included by default. There are also To Emmet and IntelliSense features for specific languages ​​or technologies.

In today’s post, I will introduce various extensions that can help developers to improve their productivity within VS Code.

1. Blox

blox for VS Code is an extension that helps increase productivity by allowing you to remove code snippets with one click. It is designed to help you quickly track a developer’s workflow by easily adding out-of-the-box UI components without leaving the VS Code window. Its supported in React, Angular, Vue, and TailwindCSS.

2. Better Comments

Better comments is an extension that can help you create “Human-friendly” comments within your code.

Using this extension you can categorise your annotations into queries, alerts, highlights and to-dos. This extension gives you an option for comment style other than the default comment style that can be selected through settings.

3. Tabnine

A VSCode extension that has been installed over 3 million times, Tabnine AI studies your code using deep learning to predict and create customised suggestions depending on how you write your code.

Using this extension can cut your coding time down to half. It can minimise the chances of errors. It supports most of the popular libraries, frameworks and languages including Javascript, Java, React, Python, Vue, PHP, Kotlin, Angular, C / C++/ C# Rust & Typescript.

4. Live Server

With this extension, Live Server allows you to see cod changes that is reflected within the browser. It launches a local development server with a live reload feature for both static and dynamic pages.

Each time you save your code. You will instantly see the changes in the browser. So, you’ll be much quicker at spotting errors. And it is much easier to do some experiments with your code.

5. Code Spell Checker

The goal of this extension is to help you catch the most common spelling errors. While keeping the number of false positives low.

The extension shows misspelled words that are technical terms or variables within your comments and strings.

6. Stepsize

Stepsize helps you to bookmark your code. Report technical debt and code to refactor. So, if you find an issue while coding that needs to be fixed. But time is a factor you can bookmark code and create TODOs in your IDE. Without compromising on your work. Or affecting your workflow. Also, allows you to collaborate with your teammates on maintenance and refactoring work.

7. Peacock

Peacock, allows you to change the colour of your Visual Studio Code environment. So you can identify which instance you have just switched to.

8. Bookmarks

Although VSCode has line numbers. Bookmarks allow you to add bookmarks to your code. Which helps you fastly navigate and jump back and forth. Also, it allows you to select regions of code between bookmarked code, which is useful for something like log file analysis.

9. GitLens

GitLens supercharges the Git capabilities of VS Code. This is a powerful extension that allows you to see who, why, and how lines of code have changed over time. It’s a highly customisable extension. So, if you don’t like a certain setting, you can turn it off within settings.

10. Quokka.js

Quokka.js is a productivity tool that lets you rapidly create JavaScript/TypeScript prototypes. With the help of runtime values. What Quokka do is to tell you how you are making an error as you code. Its great for learning and testing through live execution and results.

11. Auto Rename Tag

Auto Rename Tag extension renames the second tag as the first one is updated and vice versa. Having this extension is not only helpful for HTML. But also for React since it comes with JSX.

12. Music Time for Spotify

Music Time for Spotify is a VS Code extension that discovers the most productive music to listen to as you code. It’s built on the Code Time extension and performs machine learning against a range of music metrics plus productivity data from over 150,000 developers to determine song recommendations.