DEV Community πŸ‘©β€πŸ’»πŸ‘¨β€πŸ’»

DEV Community πŸ‘©β€πŸ’»πŸ‘¨β€πŸ’» is a community of 966,904 amazing developers

We're a place where coders share, stay up-to-date and grow their careers.

Create account Log in
Cover image for 15+ VS Code Extensions For Web Developers 🀯
Souptik Debnath ⚑
Souptik Debnath ⚑

Posted on • Updated on • Originally published at devdojo.com

15+ VS Code Extensions For Web Developers 🀯

Interested in some great extensions for Visual Studio Code that will make your web development life easier? In this article, I'll discuss the top 15+ extensions for VS Code.

So, let's get started!

1. JavaScript (ES6) Code Snippets

It provides java script, Vue, React and HTML code snippets. It is a must-have extension for web development.
0_xi6NDiISPHdsRvXe (1).png

2. Live Server

Live server extension provides the live preview of your web application right within the editor. This is a handy and useful for the frontend developers.
nvOmX (1).png

3. Prettier

This extension performs the formatting of the javascript, CSS and HTML code.
0__4CiJ6mmnYah7RWk.png

4. Better Comments

This extension helps you to create more human-friendly and easy-to-read comments.
better-comments.png

5. Path Intellisense

This extension makes the development time faster by autocompleting file names. You type the name name of the files in statements and it will search and give you suggestions.
iaHeUiDeTUZuo.gif

6. GitLens

We use Git almost evey day of our life. Gitlens is the visual studio code plugin to supercharge git capabilities.
739c080a5e5fb60a015fa6fafd8307cf4b2aef5e-3356x2096.png

7. Code Time

This extension tracks your development time and provides you with useful stats such as how many hours you have code today
It’s pretty useful to keep track and see the progress (anyone can use this extension)
best-visual-studio-code-extensions-bracket-pair-code-time.jpg

8. ESLint

It is the linting utility for JavaScript. It checks your code for common errors and lets you know in the editor itself. It’s like a virtual peer who is validating your code while you are writing it.
Screen-Shot-2020-04-24-at-1.39.42-AM (1).png

9. Polacode

Like code snippet like this? We can use this extension to create a beautiful code polaroid and share it.
2.png
1.png

10. CSS Peek

This directly peeks CSS ID and class from HTML files and goes to the respective CSS definition.
1_BQv_eAI2cDOknvTjD_J2EQ.jpeg

11. Project Manager

Working on multiple projects and switching between them is a common
occurrence in Visual Studio Code. The project manager makes managing multiple projects in VS Code a breeze.
SPn1w.png

12. Rest Client

REST Client allows you to send HTTP request and view the response in Visual Studio Code directly. Using this extension, we can test APIs and view their response directly in the VS Code.rest-install.png

13. Auto Close Tag

This extension automatically adds the closing tag of HTML and XML.
e906ee0d0acb62a02d7aafc2c3cc48ec13345ef1.jpg

14. Bracket Pair Colorizer 2

With this VS Code extension, you can color code the matching pairs to help ease that pain point and work on the making the code itself work β€” not the editor.
1_ioGOnjNJMLidmnWWmIADHw.png

15. Paste JSON as Code

Interactively generate types and (de-)serialization code from JSON, JSON Schema, and TypeScript. Paste JSON/JSON Schema/TypeScript as code.JSON To Code For SPFx Solutions2.png

16. Quokka.js

Quokka.js is a developer productivity tool for rapid JavaScript/TypeScript prototyping. Runtime values are updated and displayed in your IDE next to your code, as you type.quokka.png

Conclusion

Thanks for reading, and please do share this article if you enjoyed it πŸ€žπŸ’œ

Check out my twitter & linkedin for more amazing content.


Create your Fueler profile today!
Image description

Top comments (6)

Collapse
 
dennistobar profile image
Dennis Tobar

Hi, the number 14 is deprecated because VSCode includes a native way to colorize brackets.

In settings.json, you must add

{
    "editor.bracketPairColorization.enabled": true,
    "editor.guides.bracketPairs":"active"
}
Enter fullscreen mode Exit fullscreen mode

to use native coloring.

Collapse
 
yxsh profile image
Yash • Edited on

I kinda feel bad for the extension's dev

they probably worked hard

Collapse
 
dennistobar profile image
Dennis Tobar • Edited on

Sure, it worked in a lot VSCode installations, computers, laptops...., he/she changed the world for everyone who uses the extension.
I feel proud if my extension is listed as "the most useful extension to have"

Collapse
 
souptikdn profile image
Souptik Debnath ⚑ Author

I know Sir, but I created this mainly for beginners πŸ™Œ

Collapse
 
lukeshiru profile image
Luke Shiru

What does being a beginner has to do with a extension being deprecated? That functionality comes with VSCode nowadays, no need for an extension.

Collapse
 
thomasbnt profile image
Thomas Bnt

Hello !
Probably better if you share this on VSCodeTips, part of the Forem network of communities dedicated to this IDE. You could find interesting topics, sharing about plugins and themes, and any other kind of topic around this software.

What image format should you use in your next project? πŸ€”