DEV Community

Cover image for VS Code extensions every web dev needs to know
zuzexx
zuzexx

Posted on

VS Code extensions every web dev needs to know

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

1. Prettier

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

2. ESLint

A must have extension for any Javascript project that finds and fixes problems in your code. You can reade the documentation here

GitLens

3. 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

4. Live Server

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

Better Comments

5. Better Comments

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

Brackets

6. Bracket Pair Colorization Toggler

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

rename tags

7. 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

8. 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.

Top comments (2)

Collapse
 
kachiic profile image
Kachi Cheong

This is a solid list! I have most these.

I think one that you didn't include which I find helpful is "Code Spell Checker".

Collapse
 
zuzexx profile image
zuzexx

Thank you for your comment. It is the first time I heard of this extension. I will definitely look into it. 😀