Table of contents
- ✨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
- That's it for now. 😇
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
- Auto Rename Tag
- CSS Snippets
- Live server
- Tailwind CSS IntelliSense
- 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. )
A little demo on how auto rename tag works
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.
Add this extension on your vs code to add bookmarks to your code.
A little demo on how this extension works
This is an amazing extension of vs code which helps you to take a screenshot of your code.
A little demo on how codesnap works
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.
See how colorize works
6. CSS Snippets
This extension provides you the shorthand CSS snippets for vs code.
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
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.
A little demo of how this works
8. Live server
A little demo on how live server works
There are two ways to open a live server after installation
a. Either you click on "Go live"
b. Or you can right click on your HTML page and click open with live server.
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.
This is how tailwind IntelliSense works
If the autocomplete option doesn't work press [ CTRL + space bar]
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.
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