Productive VSCode extensions for Web Dev 2021

Extension make a developer life easy by providing some quick solution for a problem. Here are my top 7 VSCode extensions that will surely make your life easy.

  1. ToDo Tree
    In our code generally we add some todos in for comments. With time generally we forgot them to address and also we can categories them based on priority. With this extension we can have a dedicated section of ToDos which is easily manageable.

The best part we can have our custom keywords like FIXTHIS, HIGH, SHOWSTOPPER.
To do this press shift + command + p and select todo Add Tag.
Enter your desired tag and press enter.

2. Sort2
This extension will help you to sort your CSS, props, function arguments and imports alphabetically. Sorted things will make debugging easy.
To sort, just select the things which you want to sort and press option + S

3. SCSS IntelliSense
This extension will provide the ability to show SCSS variables in autocomplete list. You don’t have to open the scss file and copy the name once you’ve this extension.

4. Pola Code
Share your code like a pro.

5. Indent Rainbow
This extension will show the indentation in different colors.

6. Colorize
Make CSS hex code and rgb visually differentiable, without running it.

7. Bracket Pair Colorizer
Different color of brackets for each level of indentation.

8. JSON to Typescript
This extension allows us to convert a JSON to its TS equivalent. It gives us the interface for a JSON.
Select the JSON or Copy the JSON, Open the Extension selection drop down by using Shift+Command+P, And then select the JSON to TS.

9. JS/TS function parameter hints — This will show function actual parameter name which help us to know in which variable the passed value will go.

Honourable Mentions



A passionate iOS Developer since 2014.