VS Code extensions every web dev needs to know
Tags: webdev, javascript, beginners, vscode
Published: 2022-12-27 18:48:17

VS Code is a pretty popular code editor. In my oppinion that popularity is completely earned. But on it's own VS Code is kinda bland and not great to work with. The bread and butter of VS Code are countless free extensions that you can install, and make your experience better and workflow faster. If you use VS Code for frontend development than it might be beneficial to you to look into these extensions and incorporate them into your workspace.

Here are some of the essential VS Code extensions for web development.

![Prettier](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/uxq8324erkw9k3198esf.png)

## [1. Prettier](https://marketplace.visualstudio.com/items?itemName=esbenp.prettier-vscode)

A code formatter that enforses a consistent style across your project. It makes the code look better and more readable, and also saves time, because there is no time lost on manually formatting the code.




![ESLint](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/3x1h24oe50yb1n5vzsvk.png)


## [2. ESLint](https://marketplace.visualstudio.com/items?itemName=dbaeumer.vscode-eslint)

A must have extension for any Javascript project that finds and fixes problems in your code. You can reade the documentation [here](https://eslint.org/)





![GitLens](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/bl8fbat040bmxihj7men.png)

## [3. GitLens](https://marketplace.visualstudio.com/items?itemName=eamodio.gitlens)

GitLens simply helps you better understand code. Quickly glimpse into whom, why, and when a line or code block was changed. Jump back through history to gain further insights as to how and why the code evolved. Effortlessly explore the history and evolution of a codebase.





![Live Server](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/h083xzax990x1p7z0kq5.png)

## [4. Live Server](https://marketplace.visualstudio.com/items?itemName=ritwickdey.LiveServer)

A local development server with live reload feature for static and dynamic pages.




![Better Comments](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/36fqslfrjqmmyquwne4k.png)

## [5. Better Comments](https://marketplace.visualstudio.com/items?itemName=aaron-bond.better-comments)

This extension helps you to create different coloured comments,  making your code more readable and comments easyer to find.





![Brackets](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/j0q3kgu6hixd8h62dvja.png)

## [6. Bracket Pair Colorization Toggler](https://marketplace.visualstudio.com/items?itemName=dzhavat.bracket-pair-toggler)

A VS Code extension that gives you a simple command to quickly toggle the global “Bracket Pair Colorization”





![rename tags](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/mp4s598bijaaunb2lasz.png)

## [7. Auto Rename Tag](https://marketplace.visualstudio.com/items?itemName=formulahendry.auto-rename-tag)

If you start renaming one tag the other tag in the pair renames automatically. This is great, because you do not have to search for closing tags, if you need to rename the tag.




![close tags](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/j632iklqdzph2y1f4ikv.png)

## [8. Auto Close Tag](https://marketplace.visualstudio.com/items?itemName=formulahendry.auto-close-tag)

Automatically add HTML/XML close tag, same as Visual Studio IDE or Sublime Text

### Conclusion 

These are some of the extensions that I find essential in my day to day code writing. I hope this list is helpfull to you in finding more extensions that will boost your productivity and code readability.