If you are using Visual Studio Code, you probably know by now that VS Code comes with probably thousands of Extensions that can boost your productivity and workflow. Some of those Extensions can be essential for web developers. In this article, I am going to give you a list of the 20 Best Visual Studio Code Extensions for Web Development.
The live server extension is one of the most commonly used VS Code extensions for Web Development. The live server can boost your workflow exponentially. The Live Server is one of the best Visual Studio Code Extensions.
Live server extension eliminates the problem of refreshing the browser/page each time you save a new change. Once the live server has started, the live server will detect the changes (once saved) and the page will reload.
With the live server, you get a real-time preview of the website. The live server is quite useful for frontend developers.
Download – Live Server
2.Bracket Pair Colorizer
If you are working on a big project with hundreds or thousands of lines of code, then it can be a difficult task to find the closing bracket or bracket at the beginning, and this where the Bracket Pair Colorizer extension comes in.
Download – Bracket Pair Colorizer
If you write code that looks messy, then you are not alone. Fortunately, we have extensions like Prettier.
Prettier lets you organize your code pretty easily. All need to do is to install that extension and activate it. Now each time you save your code it will get formatted automatically.
Download – Prettier
Would you like to have something better than the live server extension (mentioned above)? then this one is for you. Browser Preview lets live reloading preview inside of VS code itself.
Download – Browser Preview
6.Debugger for Chrome
This is where Debugger for chrome comes in. With Debugger for chrome, you can open up debugging tools right inside of VS Code!
Download – Debugger for Chrome
Colorize is one of the Best Visual Studio Code Extensions for UI developers or Web developers. Colorize lets you visualize CSS colors in your CSS, SASS, Less, etc. You can always take a look and verify if you’re using the right color or proper HEX code.
Download – Colorize
Download – Quokka
With vscode-icons, you can easily give each file a fancy look (relevant to their extension). It also makes the files very easy to navigate.
Download – vscode-icons
As the name suggests, the Better comments extension gives each comment an extra value with various color codes. With Better Comments, You can easily spot any important comment such as errors, warnings, and queries out of many comments.
Download – Better Comments
Also Read: Best Programming Languages To Learn In 2021
Polacode is the perfect extension for taking a fancy screenshot of your code. Most of the code screenshots are taken with Polacode.
Download – Polacode
TODO Highlight extension is one of the best VS code extensions that can help you keep and to-do list of the important things.
Download – TODO Highlight
13. Sublime Text Keymap
Did you use Sublime Text before switching to Visual Studio Code?
Then this extension can help you. Sublime Text Keymap can change all of the shortcuts and make them similar to Sublime Text.
Download – Sublime Text Keymap
14.Live Sass compiler
Live Sass Compiler can easily compile SCSS files to CSS files. If you are using Sass this is a must have extension for VS Code.
Download – Live Sass compiler
15.Code Spell Checker
Download – Code Spell Checker
With GitLens, One can easily get information from a Git source that can be viewed and edited from the VS code itself. Commit logs, file history, etc from the Git repository can also be view using Gitlens.
Download – GitLens
If you do a lot of validations, then I bet you use Regular expression but using Regular Expression can be tricky (whether you’re validating an email or doing something else), therefore using an extension like Regex Previewer can make your job a lot easier.
Download – Regex Previewer
If you are tired of the old color of the Visual Studio, then you can use the Peacock extension to change the color of the Visual Studio code environment.
Download – Peacock
Just like the Peacock extension, Material Theme offers many types of themes that you can choose from.
You can choose any kind of theme( dark theme or light theme). If you’re going to use VS code daily, then it should look appealing to you :).
Download – Material Theme
20.Web Dev Suite
To boost your workflow and productivity, You should use at least some of the best Visual Studio Code Extensions from this list.
Images : Unsplash, VS Code