5 cool vs code extensions for web developers

Hi all, today is this blog I am going to show 5 vs code extensions which I use that boosts my productivity.

1. Inline Fold

If you have been using Tailwind css(which you definitely should) then you might want to hide the styles you have applied once you are done with the styling. Using this extension the classNames collapses to three dots and help us focus more on the code.

before

after

Inline Fold

2. Tailwind CSS IntelliSense

The second extension is also on Tailwind CSS 😛 . As it is clear from the name, this extension provides auto-complete suggestions for Tailwind CSS. I can't emphasis how slick it makes writing CSS. See below for yourself.

Tailwind CSS IntelliSense

3. Peacock

Peacock gives different colors to different instances of Vs code. This helps in quick identification of which project we are currently working on

Peacock

4. Rainbow Brackets

Rainbow Brackets gives different colors of nested brackets in Vs code, by which you can distinguish easily closing and opening of the brackets it can be parenthesis, square bracket, curly bracket .

Rainbow Brackets

5. CodeSnap

When you have writing a blog or make documentation of your projects and want to give your code with cool looking then this extension is best for you. You can easily install this extension on Vs code then three steps you have to follow.

• Select the code you want to take snap.
• Right click, choose CodeSnap📸.
• After you get an snap of your code, click the image and press the copy keyboard shortcut (defaults are Ctrl+C on Windows and Linux, Cmd+C on OS X)

CodeSnap📸

Comments

[Dennis Tobar]

Hello Shailesh,

Just to say: you could use a native option in VSCode to colorize brackets:

"editor.bracketPairColorization.enabled": true

(and fix your links: they are generating 404 en dev.to)

[Zeeshan Safdar]

Great. I learnt something useful today. Specially the extensions for Tailwind CSS.

Thanks for sharing 👍