DEV Community

loading...
Cover image for 21 Amazing VS Code extensions for maximum productivity 2021

21 Amazing VS Code extensions for maximum productivity 2021

coderwatchHQ
Just an Average Coder.
Originally published at coderwatch.com ・5 min read

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

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

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

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

Toggle Quotes

Simple quote toggler that cycle through " ' and `.

Bookmarks

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

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

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

Thunder Client

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

Gitlens

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

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://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

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

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

Turbo Console Log

Automating the process of writing meaningful log messages.

Open in Browser

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

Auto Rename Tag

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

TO-DO highlight

Highlight TODO, FIXME and other annotations within your code.

Polacode

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

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

Prettier

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)

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.

Discussion (4)

Collapse
miguelsmuller profile image
Miguel Müller

Debugger for Chrome and Setting Sync are they really necessary? VSCode is no longer doing natively?

Collapse
trekki03 profile image
Trekki03

I would maybe recommend to use ToDo-Tree instead of Todo Highlighter.

Collapse
cavo789 profile image
Christophe Avonture

Hi. Setting Sync is no more needed since one year, that feature is built in in vscode like auto rename; same thing.