What Are The Top 12+ Visual Studio Code Plugins/Extension in 2022?
Are You using Visual studio code to write code? If your answer is yes then wait for moments. In this article, you will learn Top 12+ visual studio code extension in 2022.
These all are completely free and use for your VS code. I use this extension for my web development project that easy and effective way to write the right code.
Some Other Tips
You can find all these plugins and documentation in Visualstudio.com or directly install from vs code editor.
If you are following my article then you should know about I provide graphic design, Programming, and Blogging Tips and trick in my blog. now, In this article, you can find I share my useful plugins.
1. Material theme
The material theme is one of the best popular themes in visual studio code. With the help of a material theme, your dev experience will get a boost and your eye will be always grateful to you. This extension is available in vs code, Jetbrains, Nova, Item, Bear notes, and many more.
Using these plugins helps to increase your coding speed, suitable for those who coding at night, and protects your eyes. This extension comes from 5 variation themes.
Features of material theme
- File and folder icons
- Available for many tools
- Distractions free
- It provides five different variants
- Curated color palettes
- Constant updates
These plugins also work with other programming languages such as JSX, ANgular, CSS, HTML, JSON, Vue, Typescript, and many more. It removes all the original styling and ensures that all the outputted code conforms to a consistent style.
What usually happens once people are using Prettier is that they realize that they actually spend a lot of time and mental energy formatting their code.
Features of Prettier
- Buiding and enforcing a style guide
- Easy to adopts
- Clean up an existing codebase
- Ride the hype train
- Helping Newcomers
- Writing code
3. Live Server
The live server is the most popular and useful extension in visual studio code. Every web developers use this plugin to see your website live when you save code. The live server was developed by Ritwick Dey and more than 11,634,090 people install this plugin.
When you install the live server you can automatically start your browser by clicking the Go live button. It provides a Port name and easy to customize your port number, server root, and default browser.
Features of Live server
- Quickly start your website in the live browser reload.
- Hotkey control
- Support for chrome debugging Attachments
- Stop or start the live server in one click
- Support for excluding file for change detection
- Use preferable hostname
- HTTPS supports
- Support for any browser like Firefox, Chrome, and Opera browser
- The customizable port number, server root, and defaults browser
4. Auto Rename Tags
The auto rename tags is another important extension in vs code. Now, First, you install this plugin in your visual studies code then it is simple to use. This extension automatically renames paired HTML/XML tags.
Use of these auto rename tags, If your change any tags in HTML then it automatically renames the end tags. Like If you write <H1> Tags in Vs code, It automatically creates end tags of </H1> Tags. If your want to updates <H1> tags then likely also rename end tags </H1>
Features of Auto Rename Tags
- Auto rename your tags
- Increase your Coding Speed
- many more.
I run this and it's saying all right where are you importing stuff from in this case react and then I tab over and I might want to get something like use effect now this is already up here so I don't need it but that's what that extension would be used for and they have code snippets for imports and exports and functions and classes.
All kinds of stuff so these are really really useful now if you are a react developer this is the extension you should have the es7 react-redux graphic react native snippets
6. Git lens
Git lens is an open-source extension for Visual Studio Code. It was created, maintained, and developed by Eric Amodio. Git Lens simple helps to better understand your code. Over 8 million Developers use this plugin to increase productivity.
Git lens Supercharges the capabilities builts into visual studio code. It assists you with picturing code initiation initially through Git fault comments and code focal point, consistently explore a lot Git stores, acquire important bits of knowledge utilizing amazing examination orders, thus considerably more.
Git lens is by far the most powerful extension that you can get pun intended I guess for working with source control for working with git and for working with Github.
Initial commit that is saying who wrote this code or how long ago was it checked in and then what was the commit message so blame information if you're familiar with that I get the same information down on this toolbar.
Basically adapts based on what line of code you're on and then if you saw if I hover on this now I get a lot more information or at At least I have the ability to go and click on that commit if I do that now I get a ton of different commands I can show the commit and the search commits history.
Bitbucket or whatever you should be you absolutely should be then you should have this extension installed and take advantage of how powerful it is in supercharging your git workflow.
Features of Git lens
- Effortless revision navigation
- It helps you to better understand code
- It is the open-source vs code extension
- It helps you to visualize code authorship at glance vai git blame annotation and code lens
- Over more than 8 million developers use this plugin
- Highlight any local charges or lines changed by the most recent commit.
- Commit view to visualize, explore, and manage git commits
Quokka.js is a rapid prototyping playground in your editor, with access to your project’s files, inline reporting, code coverage, and rich output formatting. Quokka 'community' edition is free to everyone.
Features of Quokkajs
- Live Executive and results
- Quick package install
- Live Feedback
- Project file import
- CPU profiler
- Live code coverage
- Live comments and valves
8. Live share
All right next up is the live share extension and this is a little less specific again to web development but super useful for developers in general and what this allows me to do is I can share a real-time collaborative development environment for other people to work.
In other words, "Live share is also a useful extension in visual studio code. The main features of this plugin that help to enable real-time collaboration between developers. It allows the user the ability to share sessions with someone else, allow them to edit code."
Someone or a group of people and can then join that session so what they will see is the same code that I am working on they'll also be able to see my cursor as I move around so.
A GitHub or an outlook account when I do that I can go I can turn on the live share. I get a unique link that can send you
I wanted to kind of teach say hey like line by line this is what this does this is what this says instead of sharing my screen on zoom or something now inside of live share.
I could just give them access to the code directly and we could walk through stuff line by line you can also show or share your like localhost so they could run it on their machine as well you can share your terminal
If you want to this is really mind-blowingly powerful and it's great for code reviews it's great for teaching it's great for learning so you have any of those scenarios that you think make sense definitely check out vs code live to share.
Features of Live Share
- It allows to user to collaborate with developers
- It gives users to ability to share sessions with someone else.
- Users can easily see and edit the code.
- It helps to share a server and debugging session
Polacode is the most popular visual studio code extension that use to take nice screenshots of a particular code. It creates unique and sharable screenshots of your code. IT retains your existing theme and fonts and renders them into an awesome layout.
If you are a developer you a lot of you are probably already sharing code snippets or pictures of code snippets and polar code is the way to go if you're not already using it what this allows you to do is let's say I want to grab a little snippet here this piece of code.
Let's grab it all the way over to the left side and then open up the command palette with command shift p and then open the polar code app
I would recommend making this full screen so now I get this really nice looking screenshot here or this image and it's just a simple button to export this thing.
I can share on Twitter or Instagram or anything like that and it's got a nice style it's got a nice format to it and it's just really nice it's really easy to do and it's a great way to share your code with other people who might be interested.
Features of Polacode
- Easy to take particular code picture
- It retains theme and fonts
- It helps to make shareable screenshots
- It creates the unique and awesome layout
10. CSS Peek
CSS Peek is also an important extension in Visual studio code. CSS peak and this one allows you to peak your CSS definition from your HTML file. This is very helpful if you have a large CSS file and it's hard to search.
We can actually hit control and hover over a class. It automatically Peaks the definition for us shows us what it is? Then if we click it it will take us directly to the CSS file. The actual class so very helpful speeds up the process.
Features of CSS Peek
- Help to speed up your process
- Easy find CSS class, Tags, and Id
- Easy to open the CSS file
- It popup all the Definition CSS file with your class.
11. Live Sass Compiler
Live sass compiler is the vs code plugins that help you to compile Your SASS/SCSS file to CSS file in real-time. Live sass compiler is a Visual Studio code extension created by Ritwik Dey.
If you are using SCSS or Sass and vs code to write CSS this extension. It features live SCSS compile when you save it customizable CSS output location to anywhere you want to live to reload the browsers immediately.
Features of Live SASS compiler
- Live SASS and SCSS compiler
- The customizable File location of exported CSS
- Quick status bar control
- Customizable extension name
- Customizable export CSS style
- Exclude specific folders by settings.
- Auto prefix support
12. Rest Client
Rest client extension is very helpful for a front-end developer or even a full-stack developer. When you're working with a back-end API so if you want to see what that API is response. We can get that response from within vs code. Now, this extension is very similar to a program called postman which is an external program.
The main benefit of using this extension is that it's all in vs code. You don't have to go to another program so the way this extension works. It helps to Send/Cancel/Rerun HTTP requests in the editor and view responses in a separate pane with syntax highlight.
Features of Rest Client
- Send/cancel HTTP requests in the editor
- Send the GraphQL query and author GraphQL variable in the editor
- Fold and unfold Response body
- Autosave and clear request history
- View image response directly in pane
- The customized font in response preview
13. HTML CSS support
HTML CSS support is also important plugins in visual studio code. HTML CSS support extension for code, If you do anything with CSS I think you're gonna like this as it brings IntelliSense for CSS classes.
HTML CSS support which has quite a few numbers of installs. It works pretty great now there's another pretty popular extension that does something very similar called IntelliSense for CSS class names.
However, this one does not support less. So if that's a problem for you then don't use this one either one seems to be a really good solution they both have their pros and cons.
Features of HTML CSS support
- It Supports linked and embedded style sheets.
- additional style sheets.
- template inheritance.
- Supports other HTML-like languages.
- HTML id and class attribute completion.