Top 14 VS Code Extensions to learn Web Development in a better way!!
Tags: beginners, vscode, webdev, productivity
Published: 2021-01-05 18:54:04

####Here are the Top 14 **VS Code** Extensions that I personally use and recommend to Developers who are just starting their journey in the **Web Development**.

#####Click on the Extension to get more information and working of a particular Extension.
---
1. [**HTML5 Snippets**](https://marketplace.visualstudio.com/items?itemName=abusaidm.html-snippets) `4,535,923 installs`

![HTML5 Snippets](https://dev-to-uploads.s3.amazonaws.com/i/v0um0larjwota7qumtj5.png)
---
2.[**HTML Boilerplate**](https://marketplace.visualstudio.com/items?itemName=sidthesloth.html5-boilerplate) ` 849,643 installs`

![HTML Boilerplate](https://dev-to-uploads.s3.amazonaws.com/i/ic5chealbhubo8tydwxk.png)
---
3.[**Color Highlight**](https://marketplace.visualstudio.com/items?itemName=naumovs.color-highlight)` 2,233,163 installs`

![Color Highlight](https://dev-to-uploads.s3.amazonaws.com/i/wgjykujvee62tenicay1.png) 
---
4.[**CSS Peek**](https://marketplace.visualstudio.com/items?itemName=pranaygp.vscode-css-peek) ` 1,513,705 installs`

![CSS Peek](https://dev-to-uploads.s3.amazonaws.com/i/bukafnseixbbrc1luvd6.png)
---
5.[**Debugger for Chrome**](https://marketplace.visualstudio.com/items?itemName=msjsdiag.debugger-for-chrome)` 7,033,864 installs`

![Debugger for Chrome](https://dev-to-uploads.s3.amazonaws.com/i/bp9aau29tf9t66dsi1gp.png)
---
6.[**ES7 React/Redux/GraphQL/React-Native Snippets**](https://marketplace.visualstudio.com/items?itemName=dsznajder.es7-react-js-snippets)` 2,199,645 installs`

![ES7 React/Redux/GraphQL/React-Native Snippets](https://dev-to-uploads.s3.amazonaws.com/i/mwauol95ulhs5fl6o8ct.png)
---
7.[**ES Lint**](https://marketplace.visualstudio.com/items?itemName=dbaeumer.vscode-eslint)` 12,333,000 installs`

![ES Lint](https://dev-to-uploads.s3.amazonaws.com/i/604z9b62qmf6qq820cgq.png)
---
8.[**Github Pull Requests and Issues**](https://marketplace.visualstudio.com/items?itemName=GitHub.vscode-pull-request-github)`  1,262,205 installs`

![Github Pull Requests and Issues](https://dev-to-uploads.s3.amazonaws.com/i/vcwxvdo0ao6lejqmga1n.png)
---
9.[**HTML CSS Support**](https://marketplace.visualstudio.com/items?itemName=ecmel.vscode-html-css) ` 4,745,626 installs`

![HTML CSS Support](https://dev-to-uploads.s3.amazonaws.com/i/kxj70eawesltuwcvjoam.png)
---
10.[**Intellisense for CSS class names in HTML**](https://marketplace.visualstudio.com/items?itemName=Zignd.html-css-class-completion) ` 2,894,808 installs`

![Intellisense for CSS class names in HTML](https://dev-to-uploads.s3.amazonaws.com/i/uf19a4ubnn0fc6glkzih.png)
---
11.[**Javascript (ES6) Code Snippets**](https://marketplace.visualstudio.com/items?itemName=xabikos.JavaScriptSnippets) ` 4,619,178 installs`

![Javascript (ES6) Code Snippets](https://dev-to-uploads.s3.amazonaws.com/i/0cc92xqqohpr6hcepro4.png)
---
12.[**Live Server**](https://marketplace.visualstudio.com/items?itemName=ritwickdey.LiveServer) ` 9,068,898 installs`

![Live Server](https://dev-to-uploads.s3.amazonaws.com/i/di8vkwpyvo83ld1753fi.png)
---
13.[**Prettier - Code Formatter**](https://marketplace.visualstudio.com/items?itemName=esbenp.prettier-vscode) ` 10,035,184 installs`

![Prettier - Code Formatter](https://dev-to-uploads.s3.amazonaws.com/i/95co2jlhoz5yaclur998.png)
---
14.[**Emoji Snippets**](https://marketplace.visualstudio.com/items?itemName=devzstudio.emoji-snippets) ` 24,747 installs`

![Emoji Snippets](https://dev-to-uploads.s3.amazonaws.com/i/5zf0adgn9w4ukll2lhpl.png)
---
15.[**Beautify**](https://marketplace.visualstudio.com/items?itemName=HookyQR.beautify) `  5,967,980 installs`

![Beautify](https://dev-to-uploads.s3.amazonaws.com/i/271hp6dujw7vl6efzh46.png)
---


###Do not forget to mention your favourite Extension in the comment section and do let me know if you know any important and amazing Extension other than mentioned above.