Must have VSCode extensions for Web Dev 2022
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.
- 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.
10. Better Comments: Create more human friendly comments in your workspace.
https://marketplace.visualstudio.com/items?itemName=aaron-bond.better-comments
11. Prettier: The best code formatter available for VS Code
https://marketplace.visualstudio.com/items?itemName=esbenp.prettier-vscode
12. Auto Rename Tag: Saves minutes of your life. You don’t have to search for ending of a tag to rename it.
https://marketplace.visualstudio.com/items?itemName=formulahendry.auto-rename-tag
13. CSS Peek: Jump straight to the CSS code by clicking on the class name.
https://marketplace.visualstudio.com/items?itemName=pranaygp.vscode-css-peek
14. Spell Checker: Must have extension. Saves a lot of time and catches the typos before pushing them into production.
https://marketplace.visualstudio.com/items?itemName=streetsidesoftware.code-spell-checker
15. Git Lense — Get commit info of each line, like who committed the code, branch name, time etc. right in the VS code.
https://marketplace.visualstudio.com/items?itemName=eamodio.gitlens
16. Live Server: Create local server to serve static files immediatley directly from VS Code.
https://marketplace.visualstudio.com/items?itemName=ritwickdey.LiveServer
