Top Most Used VS Code Extensions to Boost Your Productivity in 2021

697 VIEWS

·

Visual Studio Code is a lightweight code editor that includes features for debugging, task execution, and version management. It seeks to give developers only the tools they need for a rapid code-build-debug cycle, leaving more sophisticated workflows to full-featured IDEs like Visual Studio IDE. Visual Studio Code extensions can be used to add new features, themes, and other customizations.

In this article, I’ll show you how to use some of the most popular VS code extensions to increase your productivity and make your work easier in a variety of ways.

Let’s have a look at some VS Code extensions we will cover in this article:

  • Prettier
  • Brackets Colorizer
  • Live Server
  • Git Lens
  • Javascript ES6 Code Snippets
  • TabNine
  • Vetur
  • Code Spell Checker
  • Auto Rename Tag
  • Git History
  • Markdown All in One
  • Import Cost

Prettier

Prettier ensures that you don’t have to bother about retyping your code. It’s a powerful, opinionated code formatter that lets you format your code in a logical manner. It saves time and energy because the code is formatted. By using CTRL+SHIFT+P, you can customize your formatting.

You can checkout the extension in the marketplace Prettier

VS Code Extension - Prettier

Brackets Colorizer

With so much nested code, brackets are a developer’s worst nightmare. It’s nearly impossible to see which brackets match up with which other bracket pair colorizer colors matching brackets to make your code a lot easier to understand.

You can checkout the extension in the marketplace Brackets Colorizer 

VS Code Extension - Brackets Colorizer

Live Server

When writing code, we frequently switch between our IDE and the browser to inspect the results of our most recent code changes. Your browser updates when it needs to with the help of a live server. Every time you save your code, the changes are immediately visible in the browser. It starts a local development server that supports both static and dynamic page reloading.

You can checkout the extension in the marketplace Live Server 

VS Code Extension - Live Server

Git Lens

Eric Amodio invented, developed, and maintains GitLens, an open-source addon for Visual Studio Code.

It’s a fantastic git management add-on that allows you to do a lot of things.You look at the git history, line, and commit logs.

You can checkout the extension in the marketplace Git Lens 

VS Code Extension - Git Lens

JavaScript ES6 Code Snippets

 Es6 code snippets is a little library addition that gives the idle developer a useful sample of javascript code. It just converts ordinary javascript functions into hotkeys. It has the potential to boost your present productivity significantly.

VS Code Extension - JavaScript ES6

TabNine

TabNine is a code autocomplete application that anticipates the rest of the code programmers are typing, similar to how Google search autocomplete predicts words or phrases. It is more than simply an extension; it’s a fantastic experience that I hope to use frequently in the future. I would recommend TabNine for JavaScript or any other language you might write in your editor to any developers who use one of the supported editors. It also aids in the acceleration of your coding.

You can checkout the extension in the marketplace TabNine 

VS Code Extension - TabNine

Vetur

For all of your Vue source code files, Vetur provides syntax highlighting. Single File Component allows you to blend multiple forms of code, such as CSS, JavaScript, and HTML, in the same file.

You can checkout the extension in the marketplace Vetur 

Vetur

Code Spell Checker

This spell checker’s purpose is to help you catch common spelling mistakes while minimizing false positives. It, like Grammarly for word documents, highlights misspelled technical terms or variables within comments and strings. Hit F1 in VS Code and type ext select install, then code-spell-checker. To enable, press enter and reload the window.

You can check out the extension in the marketplace.

VS Code Extension - Code Spell Checker

Auto Rename Tag

By default, whenever you rename an opening tag in HTML, you must also replace the closing tag manually. However, with this tool, your open and close tags are renamed automatically.

You can checkout the extension in the marketplace Auto Rename Tag 

Auto Rename Tag

Git History

This program allows you to see line-by-line commit history as well as prior versions of the file. To get started, simply import the result of your git-log.

You can checkout the extension in the marketplace Git History 

VS Code Extension - Git History

Quokka

Quokka.js is a developer productivity tool for prototyping JavaScript and TypeScript in a short amount of time. As you type, runtime values are updated and shown in your IDE next to your code.

 You can checkout the extension in the marketplace Quokka 

Quokka.js

Markdown All in One

Markdown All in One is a simple extension that handles all of your markdown requirements, including auto-preview, shortcuts, and autocomplete. When it comes to dealing with markdown files, many companies have started utilizing markdown as one of their document editors, therefore markdown extension is the ideal when it comes to working with markdown files.

You can get the extension here Markdown All in One

VS Code Extension - Markdown All in One

Import Cost

Import Cost is an extension that displays the size of the import package in your code as an estimate. It’s critical not to jeopardize the user experience by importing hefty packages when working on a project. Keeping track of the size of additional dependencies in your code is one method to avoid this.

 You can checkout the extension the marketplace Import Cost 

Import Cost

Conclusion

In this article, we have reviewed some VS Code extensions that can help in boosting your productivity as a developer and also save time. Thanks for reading and don’t forget to try out these extensions.


I am a software developer with development experience in frontend building responsive website sites using these web technologies like Javascript, VueJs, HTML and CSS, Bootstrap Tailwind CSS. I specialize in converting designs to Code, and I love teaching and sharing my technical ideas through an article.


Discussion

Click on a tab to select how you'd like to leave your comment

Leave a Comment

Your email address will not be published. Required fields are marked *