Awesome vscode extensions for web development in just 5 minutes
Tags: webdev, vscode, programming, news
Published: 2022-11-20 17:33:36

Vs code is one of the most popular, lightweight, open-sourced, and fully customizable code editors used by millions of devs all over the world. 
In this article, we will discuss some of the most useful vs- code extensions which will increase development by 3 times faster helping you become a pro-level developer.

## Introducing  vs code extensions
Extensions enable you to some superpowers to your editor also you have the option to choose which one you want to you.  It's like superman can have the capabilities of spiderman or batman when needed. 

## A bit about web development 
Web development is a domain of computer science that includes the internet, the APIs, and all those super cool websites and apps like google, Instagram, Netflix, and so on.  Now it's time to know about those superpowers in vs code.

## The extensions
### 1. Prettier
An automatic code formatter for vs code having 2.6 million downloads. It's easy to use and helps you to code in organized ways with proper indentation & clicks in just a couple of clicks. It also works with other popular IDEs and code editors like web storm, vim, atom, sublime, etc &  supports almost all the popular programming languages & frameworks commonly used for web development. [Check it out here](https://marketplace.visualstudio.com/items?itemName=esbenp.prettier-vscode).  
![Prettier](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/xde4jnbh2x3ybmxdthah.png)

### 2. Documatic 
Are you looking for a particular line within a large codebase or don't know how to connect a database to your app? Documatic vscode extension can help you with this! [Check it out here.](https://marketplace.visualstudio.com/items?itemName=Documatic.documatic)

![Documatic](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/78mhrlrh7xx19dwhqvz6.png)


### 3. Github Repositories

GitHub is one of the most popular code-hosting platforms used by developers and enterprises. Often you need to search, commit minor changes and look at a repository while developing a complex app. The GitHub repositories vs code extension with over 900K downloads can help you out with these things directly from your vs code and no need to open GitHub in your browser. [Check it out here](https://marketplace.visualstudio.com/items?itemName=GitHub.remotehub). 
![Github Repositories](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/6gxpqhr5ajfi1q1lwbcf.png)

### 4. Git lens
Check out the recent changes made to your code directly from vs code without even committing the changes. Git lens is a  wonderful vs code extension that helps you to keep track of your recent changes to your code base. Having 18.7 million downloads and is used by software developers from big tech companies. [Check it out here](https://marketplace.visualstudio.com/items?itemName=eamodio.gitlens).

![Git Lens](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/fsqjuttynuamj9qyshxm.png)


### 5. EsLint 
Working on a production-ready project and looking for a linter then make sure to use Eslint vs code extension developed by Microsoft corporation having over 23.4 million downloads used by developers to ship production-ready projects. So if you don't want to reply to slack notifications regarding your broken code then make sure to use this extension next time. [Check it out here](https://marketplace.visualstudio.com/items?itemName=dbaeumer.vscode-eslint).

![Es lint](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/w6dg7yfxjar1wt6wjscx.png)

### 6. Better comments 
Code comments help us to understand what is going on in the code base. Imagine a situation where you are working on a production-level project having a large code base there only comments can be a live saver to understand where you need to fix a bug. Better comments are vs code extension can help you out writing better comments,  alerts, and a lot more. Having 3.9 million downloads and amazing customizable features. [Check it out here](https://marketplace.visualstudio.com/items?itemName=aaron-bond.better-comments).
 
![Better Comments](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/l6k1wacx55pohli10ziq.png)

### 7. JavaScript (ES6) code snippets
Working with JavaScript lets make development faster.JavaScript (ES6) code snippets is a vs code extension that helps you write javascript 3x faster just type 3 characters and the full code will be on the screen. Having over 10.1  million downloads and is super easy to use [check it out here](https://marketplace.visualstudio.com/items?itemName=xabikos.JavaScriptSnippets).

![JavaScript Snippets](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/x261eqrktyxj6xveym4b.png)

### 8. Simple React Snippets
React js is one of the most popular javascript libraries used for building beautiful UI components and single-page applications. Almost all the big tech companies use react having massive community support and highly paid skills. Simple React Snippets is a vs code extension with over 2.2 million downloads and can help you to raise your react development 5 times faster. Check it out here.

![Simple React Snippets](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/p2p843fvskyvmsnv4afv.png)


### 9. json
JavaScript Object Notation or simply JSON is a type of data you always 
have to deal with as a web developer. It is just like an object having some keys along with some values. Sometimes it becomes very difficult to work with raw JSON data so next time when you work with JSON make sure to use this vs code extension named JSON having 1.4 million downloads and helps you to organize your raw data. [Check it out here](https://marketplace.visualstudio.com/items?itemName=ZainChen.json).
![json](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/f4gw7gcuqm2o2yge0q1a.png)


### 10. Live Server
Are you building a website but getting stuck every time opening the index.html file? The live server can help you out with this. Install the extension and instantly set up a development server within your vs code. Having 2.7 million downloads and is used by many pro-level devs. [Check it out here](https://marketplace.visualstudio.com/items?itemName=ritwickdey.LiveServer).
![Live server](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/3cy69cuj4oe6m6zse48e.png)

## Conclusion 

Congrats you reached the end, this was all you need to know about the most useful vs code extensions for web development. Feel free to share this with your peers and make sure you hit a reaction to show some love.
Stay tuned for the next Happy Coding :).