To speed up your coding skills you need install these plugins on Visual Studio code. You can find thousands of free extensions in visual studio. Which one is best for web development or building app and software?
Well, looking for useful and must download plugins in the visual studio then wait for a moment. In this article, you will learn the best visual studio plugins that you directly install from your code editor.
You may be like
You can find all these plugins and documentation in Visualstudio.com or directly install from vs code editor.
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, is 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
2. Prettier
Prettier is the best code formatted plugins use in visual studio code. JavaScript developers are spending too much time formatting their code and even more back and forth in code review fixing small nits.
It turns out that machines are really good at doing this kind of task. Christopher will walk us through the technical and people challenges of bringing a JavaScript code formatted to reality.
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.
Prettier is usually introduced by people with experience in the current codebase and JavaScript but the people that disproportionally benefit from it are newcomers to the codebase.
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.
The live server generates some javascript code to start your website live. You don't need to click the HTML file to open it in the browser. Let discuss the features of the live server. Many Programming Youtube channels use this extension to make the website live.
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 files 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 are 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.
5. Javascript(ES6) snippets
All right and then next up this is actually a twofer I guess is either the es6 code snippets javascript es6 code snippets or the es7 react-redux react-native snippets.
Let's start with just the vanilla javascript one so these are just snippets es6 snippets modern javascript snippets that you can leverage inside of your code and a good example of this is an important command so imp is short for import make sure and go to grab one or make sure to go and grab the right one.
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
I wonder how fast I can say that this one is really nice because not only does it have es7 javascript snippets in it also have stuff specific to react-redux graphic react-native so this is almost like an all-encompassing snippets library.
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
7. QuokkaJs
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's' community' edition is free to everyone.
Quokka extension and this is for me the easiest way to test out a very simple piece of javascript this is a javascript scratchpad. I think a lot of times what you might do are you might come into your console inside of not sources but inside of the console and you might say something like all right what does the new date actually return?
What it gives me or that's not a very great experience for writing code what would be a lot easier is if you could do this right inside of vs code and you can so if I come down to the quokka extensions a new javascript file.
If I can log out the same thing so the new date and then my parentheses shows me a line what the output is and then it also shows me those logs down here so anytime you just want to test out a new piece of javascript make sure to check out the quokka extension.
Features of Quokkajs
- Quokka hs help to makes prototype, learning, and testing javascript
- 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.
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
9. Polacode
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 and you 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 plugin 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 an important plugin 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 has quite a few 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.