DEV Community

Shailesh Kumar
Shailesh Kumar

Posted on

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
before

after
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.

auto complete in tailwind

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

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 .
Image description

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)

Image description

CodeSnap📸

Oldest comments (2)

Collapse
 
dennistobar profile image
Dennis Tobar

Hello Shailesh,

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

"editor.bracketPairColorization.enabled": true
Enter fullscreen mode Exit fullscreen mode

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

Collapse
 
zeeshansafdar48 profile image
Zeeshan Safdar

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

Thanks for sharing 👍