15+ VS Code Extensions For Web Developers 🤯

15+ VS Code Extensions For Web Developers 🤯

Written by Souptik Debnath on Jun 14th, 2022 ・ Views ・ Report Post

Souptik Debnath Visit User Profile

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

🤩 Our Amazing Sponsors 👇
DigitalOcean View Website
DigitalOcean offers a simple and reliable cloud hosting solution that enables developers to get their website or application up and running quickly.
Laravel News View Website
Laravel News keeps you up to date with everything Laravel. Everything from framework news to new community packages, Laravel tutorials, and more.
Genesis View Website
A Laravel Starter Kit that includes Authentication, User Dashboard, Edit Profile, and a set of UI Components.

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! unknown.png

Comments (0)