SETTING UP VISUAL STUDIO CODE FOR WEB DEVELOPMENT IN 2021💻
Tags: vscode, webdev, productivity
Published: 2021-01-04 10:09:51

[Visual Studio Code](https://code.visualstudio.com/) is a streamlined code editor with support for development operations like debugging, task running, and version control. It aims to provide just the tools a developer needs for a quick code-build-debug cycle.
 
VS Code also has a build-in git integration and terminal, so you don’t have to jump from one window to another and it supports a large number of extensions that can be used for faster development.

So, here are some of the best and trending vs code extensions for you to start your development journey in 2021.

###• [How to install and browse extensions in VS Code.](https://code.visualstudio.com/learn/get-started/extensions)
![Alt Text](https://dev-to-uploads.s3.amazonaws.com/i/pgcgg6lxcm3ifwzd88hl.png)
You can browse and install extensions from within VS Code. Bring up the Extensions view by clicking on the Extensions icon in the Activity Bar on the side of the VS Code.
 
**1. [Live Server](https://marketplace.visualstudio.com/items?itemName=ritwickdey.LiveServer)**
![Alt Text](https://dev-to-uploads.s3.amazonaws.com/i/n0zy55svlka0xwllply7.png)

Launch a local development server with live reload feature for static & dynamic pages.

**2. [Prettier](https://marketplace.visualstudio.com/items?itemName=esbenp.prettier-vscode)**
![Alt Text](https://dev-to-uploads.s3.amazonaws.com/i/zx0uy8z1a44jrtwc4ctm.JPG)

Prettier is an opinionated code formatter. It enforces a consistent style by parsing your code and re-printing it with its own rules that take the maximum line length into account, wrapping code when necessary.

**3. [CSS Peek](https://marketplace.visualstudio.com/items?itemName=pranaygp.vscode-css-peek)**
![Alt Text](https://dev-to-uploads.s3.amazonaws.com/i/xndp85n1z2aw1ikoi10i.JPG)
Allow peeking to CSS ID and class strings as definitions from HTML files to respective CSS. Allows peek and goto definition.

**4. [Bracket Pair Colorizer](https://marketplace.visualstudio.com/items?itemName=CoenraadS.bracket-pair-colorizer)**
![Alt Text](https://dev-to-uploads.s3.amazonaws.com/i/pd59kbm8p962tcw9bkid.JPG)
This extension allows matching brackets to be identified with colours. The user can define which characters to match, and which colours to use.

**5. [Debugger for Chrome](https://marketplace.visualstudio.com/items?itemName=msjsdiag.debugger-for-chrome)**
![Alt Text](https://dev-to-uploads.s3.amazonaws.com/i/ci4jcu8hl9e5hlziidr4.JPG)
Debug your JavaScript code in the Chrome browser or any other target that supports the Chrome Debugger protocol.

**6. [Visual Studio IntelliCode](https://marketplace.visualstudio.com/items?itemName=VisualStudioExptTeam.vscodeintellicode)**
![Alt Text](https://dev-to-uploads.s3.amazonaws.com/i/dc0zc4svt02pgvmfna4w.JPG)
The Visual Studio IntelliCode extension provides AI-assisted development features for Python, TypeScript/JavaScript and Java developers in Visual Studio Code, with insights based on understanding your code context combined with machine learning.

**7. [Project Manager](https://marketplace.visualstudio.com/items?itemName=alefragnani.project-manager)**
![Alt Text](https://dev-to-uploads.s3.amazonaws.com/i/5jsypnspxl4omn9un799.JPG)
Helps to easily switch between projects.

**8. [Better Comments](https://marketplace.visualstudio.com/items?itemName=aaron-bond.better-comments)**
![Alt Text](https://dev-to-uploads.s3.amazonaws.com/i/xj7hw9km6mh5njrbmt7c.JPG)
Improve your code commenting by annotating with an alert, informational, TODOs, and more!

**9. [Advanced New File](https://marketplace.visualstudio.com/items?itemName=patbenatar.advanced-new-file)**
![Alt Text](https://dev-to-uploads.s3.amazonaws.com/i/katng24vsuwhty7bvuto.JPG)
Helps to create files anywhere in your workspace from the keyboard.

**10. [Auto Rename Tag](https://marketplace.visualstudio.com/items?itemName=formulahendry.auto-rename-tag)**
![Alt Text](https://dev-to-uploads.s3.amazonaws.com/i/125hugqnj5mtt859zbtn.JPG)
Auto rename paired HTML/XML tags.

**11. [Better Align](https://marketplace.visualstudio.com/items?itemName=wwm.better-align)**
![Alt Text](https://dev-to-uploads.s3.amazonaws.com/i/heqkromej8qhdayacdvq.JPG)
Align your code by a colon(:), assignment(=,+=,-=,*=,/=) and arrow(=>). It has additional support for comma-first coding style and trailing comment.

And it doesn't require you to select what to be aligned, the extension will figure it out by itself.

**12. [Bookmarks](https://marketplace.visualstudio.com/items?itemName=alefragnani.Bookmarks)**
![Alt Text](https://dev-to-uploads.s3.amazonaws.com/i/sd027025ygt0tenc9bix.JPG)
Mark lines and jumps to them.

**13. [CodeSnap](https://marketplace.visualstudio.com/items?itemName=adpyke.codesnap)**
![Alt Text](https://dev-to-uploads.s3.amazonaws.com/i/4sdem4i5o3fwkn1tl1cj.JPG)
Take beautiful screenshots of your code.📷

**14. [GitLens](https://marketplace.visualstudio.com/items?itemName=eamodio.gitlens)**
![Alt Text](https://dev-to-uploads.s3.amazonaws.com/i/tjipe6e7jfijz82iyiac.JPG)
Supercharge the Git capabilities built into Visual Studio Code — Visualize code authorship at a glance via Git blame annotations and code lens, seamlessly navigate and explore Git repositories, gain valuable insights via powerful comparison commands, and so much more.

**15. [JavaScript (ES6) Code Snippets](https://marketplace.visualstudio.com/items?itemName=xabikos.JavaScriptSnippets)**
![Alt Text](https://dev-to-uploads.s3.amazonaws.com/i/zdjl2zo727psfuvk5lcc.JPG)
Code snippets for JavaScript in ES6 syntax.


#**Conclusion**

In this article, I have shared with you my favourite extensions for Visual Studio Code which will help you to improve your performance of your development. Also, if you are a beginner, it may help you to focus on learning programming then on looking for an opening or closing bracket:)

Did I miss something? Please comment down below!

**Happy coding!**