10 Amazing VS Code extensions for Web Developers 🔖

10 Amazing VS Code extensions for Web Developers 🔖

            VS CODE extensions will make your coding journey easier.

✨VS code extensions are the add-ons that allow you to add, customize and increase your work experience in VS Code by adding new features.

Table of Contents

  1. Auto Rename Tag
  2. Quokka.js
  3. Bookmarks
  4. CodeSnap
  5. colorize
  6. CSS Snippets
  7. indent-rainbow
  8. Live server
  9. Tailwind CSS IntelliSense
  10. Thunder Client

1. Auto Rename Tag

Auto rename tags automatically rename the paired tags. ( It will automatically rename the closing tag if we are editing the opening tag. ) autorenametag.png

A little demo on how auto rename tag works autorenametag.gif

2. Quokka.js

This extension is really helpful for those who are new to JavaScript. This extension runs your javascript code and displays the result inline in vs code. quokka.png

This is how quokka works:

Here: 🟩-> green square means your line of code has no error and it has been executed successfully. 🟥 -> red square means your source line has an error. ⬜ -> gray square means it hasn't been executed and if the box is 🟨 -> this means it's been partially executed. quokka.gif

3. Bookmarks

Add this extension on your vs code to add bookmarks to your code.

bookmarks.png

A little demo on how this extension works

bookmark.gif

4. CodeSnap

This is an amazing extension of vs code which helps you to take a screenshot of your code.

codesnap.png

A little demo on how codesnap works

codesnap.gif

5. colorize

colorize helps you to find out the CSS colors in your CSS file itself. This generates colored background for css variables, hsl/hsla colors, hexa color, rgb/rgba color etc.

colorize.png

See how colorize works

colorize.gif

6. CSS Snippets

This extension provides you the shorthand CSS snippets for vs code.

snippets.png

Below is the list of CSS snippets for fast and better coding. You can download the image by -> right click on the image -> open image in new tab -> save image as

Untitled design (1).png

7. indent-rainbow

This extension is very simple and one of the most useful extensions for web developers (especially for those who are new to web dev). This is used to make the indentation more readable. This extension colorizes the indentation in front of your text with different colors.

rainbow.png

A little demo of how this works

intendation.png

8. Live server

Live server is one of the most useful extensions when you are working on any website using HTML, CSS & JavaScript. It helps you to watch live every little change you made on your website. Screenshot_20221107_120218.png

A little demo on how live server works

liveserver.gif There are two ways to open a live server after installation

a. Either you click on "Go live"

golive.png

b. Or you can right click on your HTML page and click open with live server.

liveserver1.png

9. Tailwind CSS IntelliSense

This extension increases the tailwind development experience by providing the user with various advanced features such as autocomplete, syntax highlighting, linting, hover previews.

tailwind.png

This is how tailwind IntelliSense works If the autocomplete option doesn't work press [ CTRL + space bar] tailwind.gif

10. Thunder Client

Thunder Client is a lightweight Rest API Client Extension for Visual Studio Code. It is similar to Postman but there is one advantage of using thunder client is that you can use thunder client to test APIs within your code editor.

thunderclient.png

That's it for now. 😇

I hope the list of extensions will increase your productivity😍. Let me know your favorite VS Code extensions in the comment section🙂.

Feel free to connect with me 👉 Tweeter handler: Sneha Purkayastha