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.
Top comments (3)
Debugger for Chrome and Setting Sync are they really necessary? VSCode is no longer doing natively?
I would maybe recommend to use ToDo-Tree instead of Todo Highlighter.
Hi. Setting Sync is no more needed since one year, that feature is built in in vscode like auto rename; same thing.