21 Amazing VS Code extensions for maximum productivity 2021
Tags: productivity, programming, webdev, coding
Published: 2021-07-30 05:52:45

Visual Studio Code is a source code editor for building current web applications. It is a free and open-source manager. It upholds various augmentations that can be utilized for web application advancement. In this blog, we will discuss 21 of these extensions that are utilized in fostering a web application. 

---


### [Markdown All in One](https://marketplace.visualstudio.com/items?itemName=yzhang.markdown-all-in-one)

![ ](https://cdn.hashnode.com/res/hashnode/image/upload/v1626969791427/6WcVCprBM.png?auto=compress)

All you need for Markdown (keyboard shortcuts, table of contents, auto preview and more). One of my fav VS Code extensions as I write in makrdown format inside VS Code. 

### [Code Spell Checker](https://marketplace.visualstudio.com/items?itemName=streetsidesoftware.code-spell-checker)

![ ](https://cdn.hashnode.com/res/hashnode/image/upload/v1626969893440/GZ8lABiIM.png?auto=compress)

A basic spell checker that works well with camelCase code.

The goal of this spell checker is to help catch common spelling errors while keeping the number of false positives low.

### [Debugger for Chrome](https://marketplace.visualstudio.com/items?itemName=msjsdiag.debugger-for-chrome)

![ ](https://github.com/Microsoft/vscode-chrome-debug/blob/master/images/demo.gif?raw=true)

Debug your JavaScript code in the Chrome browser, or any other target that supports the Chrome Debugger protocol.


### [Toggle Quotes](https://marketplace.visualstudio.com/items?itemName=BriteSnow.vscode-toggle-quotes)

![ ](https://cdn.hashnode.com/res/hashnode/image/upload/v1627280170449/hX82s8Kar.png?auto=compress)

Simple quote toggler that cycle through ` " ' and ` `. 

### [Bookmarks](https://marketplace.visualstudio.com/items?itemName=alefragnani.Bookmarks)

![ ](https://cdn.hashnode.com/res/hashnode/image/upload/v1627280204046/vhb2g3Tyx.png?auto=compress)

Essentially this extension permits you to add bookmarks in explicit lines in a record. You can likewise add a note why you have added this bookmark. Furthermore, you can likewise investigate the bookmarks in the bookmarks tab. Which will show you every one of the bookmarks in a specific venture.

### [Better Comments](https://marketplace.visualstudio.com/items?itemName=aaron-bond.better-comments)

![ ](https://cdn.hashnode.com/res/hashnode/image/upload/v1627280220807/NSvGfZC_9.png?auto=compress)

The Better Comments extension will assist you with making human-accommodating remarks in your code.
With this extension, you will be able to categorise your annotations into:

- Alerts
- Queries
- TODOs
- Highlights

### [Clipboard History](https://marketplace.visualstudio.com/items?itemName=Anjali.clipboard-history)

![ ](https://cdn.hashnode.com/res/hashnode/image/upload/v1627280244577/5W36nHUfS.png?auto=compress)

Keep a history of your copied items and re-paste if needed.

### [Thunder Client](https://marketplace.visualstudio.com/items?itemName=rangav.vscode-thunder-client)

![ ](https://cdn.hashnode.com/res/hashnode/image/upload/v1627280259237/LbhHuj2g_u.png?auto=compress)

Rest API Client for VS Code, GUI based Http Client.

### [Gitlens](https://marketplace.visualstudio.com/items?itemName=eamodio.gitlens)

![ ](https://cdn.hashnode.com/res/hashnode/image/upload/v1627280287010/EEW9b1g3G.png?auto=compress)

Supercharge the Git capabilities built into Visual Studio Code — Visualize code authorship at a glance via Git blame annotations and code lens, seamlessly navigate and explore Git repositories, gain valuable insights via powerful comparison commands, and so much more


### [Error Lens](https://marketplace.visualstudio.com/items?itemName=usernamehw.errorlens)

![ ](https://cdn.hashnode.com/res/hashnode/image/upload/v1627280314977/V7TsyeJzD.png?auto=compress)

ErrorLens super charges language demonstrative highlights by making diagnostics stand apart more noticeably, featuring the whole line any place an indicative is produced by the language and furthermore prints the message inline.

### [Setting Sync](https://marketplace.visualstudio.com/items?itemName=Shan.code-settings-sync)

![ ]( https://cdn.hashnode.com/res/hashnode/image/upload/v1627280345474/HpAx2zEem.png?auto=compress

Synchronize Settings, Snippets, Themes, File Icons, Launch, Keybindings, Workspaces and Extensions Across Multiple Machines Using GitHub Gist.


### [Import Cost](https://marketplace.visualstudio.com/items?itemName=wix.vscode-import-cost)

![ ](https://cdn.hashnode.com/res/hashnode/image/upload/v1627280360511/GiT8IdxT8.png?auto=compress)

This extension will show inline in the supervisor the size of the imported bundle. The extension uses webpack with 'babel-webpack-module' to identify the imported size.

### [CSS Peek](https://marketplace.visualstudio.com/items?itemName=pranaygp.vscode-css-peek)

![ ](https://cdn.hashnode.com/res/hashnode/image/upload/v1627280509836/jmNLuIM3f.png?auto=compress)

Allow peeking to css ID and class strings as definitions from html files to respective CSS. Allows peek and goto definition.


### [Turbo Console Log](https://marketplace.visualstudio.com/items?itemName=ChakrounAnas.turbo-console-log)

![ ](https://cdn.hashnode.com/res/hashnode/image/upload/v1627280528402/i6yPmRmAQ.png?auto=compress)

Automating the process of writing meaningful log messages.

### [Open in Browser](https://marketplace.visualstudio.com/items?itemName=techer.open-in-browser)

![ ](https://cdn.hashnode.com/res/hashnode/image/upload/v1627280548540/6rjxpX7as.png?auto=compress)

This allows you to open the current file in your default browser or application.


### [Auto Rename Tag](https://marketplace.visualstudio.com/items?itemName=formulahendry.auto-rename-tag)

![ ](https://cdn.hashnode.com/res/hashnode/image/upload/v1626967104800/QMkulcz3s.png?auto=compress)

Automatically rename paired HTML/XML tag, same as Visual Studio IDE does.

### [TO-DO highlight](https://marketplace.visualstudio.com/items?itemName=wayou.vscode-todo-highlight)

![ ](https://cdn.hashnode.com/res/hashnode/image/upload/v1627280573856/DOmfgHJad.png?auto=compress)

Highlight `TODO`, `FIXME` and other annotations within your code.

### [Polacode](https://marketplace.visualstudio.com/items?itemName=pnp.polacode)

![ ](https://github.com/octref/polacode/raw/master/demo/usage.gif)

This extension is utilized for taking code bit screen captures. It tends to be utilized to reorder the code you need in piece screen captures effectively and save them in the wake of introducing the extension. You can track down the itemized data with respect to the extension in the accompanying connection.

### [Git History](https://marketplace.visualstudio.com/items?itemName=donjayamanne.githistory)

![ ](https://cdn.hashnode.com/res/hashnode/image/upload/v1627280619702/X_l2XGhEX.png?auto=compress)

View git log, file history, compare branches or commits. 

### [Prettier](https://marketplace.visualstudio.com/items?itemName=esbenp.prettier-vscode)

![ ](https://cdn.hashnode.com/res/hashnode/image/upload/v1627280647762/gcJHpbo10.png?auto=compress)

Prettier is an obstinate code formatter. It implements a predictable style by parsing your code and re-printing it with its own guidelines that consider the greatest line length, wrapping code when essential.

### Profile Switcher](https://marketplace.visualstudio.com/items?itemName=aaronpowell.vscode-profile-switcher)

![ ](https://cdn.hashnode.com/res/hashnode/image/upload/v1627280677207/isPjYdLFs.png?auto=compress)

Allows you to switch between different profiles you have created. This Extension permits you to characterize various settings profiles that you can without much of a stretch switch between. 

The first thought for this extension came from my longing to have a simple way for me to switch my VS Code to an arrangement that was better streamlined for introducing. 


---

These were 21 VSCode extension to further develop your programming efficiency without impinging on quality. In the event that you partook in this article and figure others can profit with it too, go ahead and share it via online media utilizing the catches at the highest point of the page.