7 Best Visual Studio Code Extensions Every Web Developer Should Have.
Tags: productivity, vscode, webdev, tutorial
Published: 2021-02-13 05:35:10

As we all know Visual Studio Code is the most popular editor for web development. It is a free and open-source editor.   
One of the most impressive parts of Visual Studio Code is the customizability, especially via extensions. The fact that It supports a number of extensions that can be used for web application development is absolutely amazing.  
In this article, we are going to talk about 7 of these extensions that are used in developing a web application:  
### The Extensions Are: 
#### 1. [Live Server](https://marketplace.visualstudio.com/items?itemName=ritwickdey.LiveServer)  
This extension is used for launching a development local server with a live reload feature for static and dynamic pages. This saves times for previewing the changes made to your source code by just making the changes in the VS code and saving the file, this will automatically refresh the browser and reflect the changes you have made in it, instead of us manually refreshing the browser page.  

![Live-Server-1024x576.png](https://cdn.hashnode.com/res/hashnode/image/upload/v1613191464842/eIwcquUj7.png)  
#### 2. [Prettier](https://marketplace.visualstudio.com/items?itemName=esbenp.prettier-vscode)  
It is an opinionated code formatter. It enforces a consistent style by parsing your code and reprinting it with its own rules that take the maximum length into account.  
![czyb5upqyrai8ves2snj.png](https://cdn.hashnode.com/res/hashnode/image/upload/v1613191941763/Vpwuv_J5K.png)  
#### 3. [Live Share](https://marketplace.visualstudio.com/items?itemName=MS-vsliveshare.vsliveshare)  
It is an extension that enables real time collaboration between developers. It allows you to instantly (and securely) share your current project, and then as needed, share debugging sessions, terminal instances, localhost web apps, voice calls, and more!  
#### 4. [Live SASS Compiler](https://marketplace.visualstudio.com/items?itemName=ritwickdey.live-sass)  
This VS Code extension is used for compiling SCSS files to CSS files quickly compared to the other compilers like Visual Studio extensions.  
![Live-Sass-compiler-1024x556.png](https://cdn.hashnode.com/res/hashnode/image/upload/v1613192419986/PjSf7WfFL.png)  
#### 5. [Git Lens](https://marketplace.visualstudio.com/items?itemName=eamodio.gitlens)  
This extension is used for getting information from a Git source that can be edited in the VS environment. With this it's so easy to view code Authorship, check commit number, view changes between last and latest commit, and so on..  
#### 6. [Bracket Pair Colorizer](https://marketplace.visualstudio.com/items?itemName=CoenraadS.bracket-pair-colorizer)  
This extension allows matching brackets to be identified with colors. The user can define which characters to match and which colors to use.  
Screenshot: 
![example.png](https://cdn.hashnode.com/res/hashnode/image/upload/v1613192856731/UW7yxm7MU.png)  
#### 7. [JavaScript (ES6) code snippets](https://marketplace.visualstudio.com/items?itemName=xabikos.JavaScriptSnippets)   
This extension is used for setting shortcut triggers for JavaScript code that can be used to invoke a full code instead of typing out code on each instance. This will be useful while working on projects with a large amount of codes.  
#### Conclusion  
I hope you’re eager to use these 7 most amazing VS Code Extensions to develop your web application.
The above listed extensions are by far the most preferred, they were selected by comparing the number of downloads, which most have over 2 million downloads, this means most developer use them on daily basis.  

If You have read this far I really appreciate, Help me to grow my community:  

Check out my other Blogs too:   
- [Understanding Permissions On Linux](https://larymak.hashnode.dev/understanding-permissions-on-linux)
- [Administrative Access Commands On Linux](https://larymak.hashnode.dev/administrative-access-commands-on-linux) 
- [Why You Should Learn Linux](https://larymak.hashnode.dev/why-you-should-learn-linux-getting-set-for-linux)
- [Choosing The Right Python Framework for Web Development](https://larymak.hashnode.dev/choosing-the-right-python-framework-for-web-development)
- [How To Get Started With Open Source Project Contribution](https://larymak.hashnode.dev/how-to-get-started-with-open-source-project-contribution)
- [Build A Random Name Generator Using Python](https://larymak.hashnode.dev/build-a-random-name-generator-using-python)
- [How To Write A Good README File](https://larymak.hashnode.dev/how-to-write-a-good-readme-file)


Connect With me at [Twitter](https://twitter.com/larymak1) | [Insta](https://www.instagram.com/nextgencoders/) | [YouTube](https://www.youtube.com/channel/UCrT1ARRZfLOuf6nc_97eXEg) | [LinkedIn](https://www.linkedin.com/in/hillary-nyakundi-3a64b11ab/)  | [GitHub](https://github.com/larymak)

Do share your valuable opinion, I appreciate your honest feedback!