Four Useful VSCode Extensions For Web Developers
Inline Parameters
Which param
is the array and which is the callback in PHP functions array_map
and array_filter
? I can never get it right. To avoid this confusion we can use Inline Parameters, which prints inline the names of the function parameters (for JavaScript, TypeScript, PHP, and Lua).
![Inline Parameters VSCode extension](https://res.cloudinary.com/indysigner/image/fetch/f_auto,q_80/w_400/https://archive.smashing.media/assets/344dbf88-fdf9-42bb-adb4-46f01eedd629/c82dbb79-64df-4f04-85db-1a225a08f882/1-useful-vscode-extensions-web-developers.png)
HTML End Tag Labels
With deeply nested <div>
tags we can easily get lost, not knowing which is their ending </div>
. HTML End Tag Labels helps us understand the structure of the HTML code, by having the class names of the opening tag be displayed next to its closing tag.
![HTML End Tag Labels VSCode extension](https://res.cloudinary.com/indysigner/image/fetch/f_auto,q_80/w_400/https://archive.smashing.media/assets/344dbf88-fdf9-42bb-adb4-46f01eedd629/ba35f5bf-791f-4e4f-91a9-82af4d3aeae3/2-useful-vscode-extensions-web-developers.png)
TO-DO Tree
You have something to do in your code, but you don’t have time for it now. Better do it later. Quick and easy reminder: add a “TODO” in your code. Fast forward 6 months, and you’ve accumulated 150 TODOs, and you need to take care of them. The Todo Tree will help you find all TODOs in your code.
![Todo Tree VSCode extension](https://res.cloudinary.com/indysigner/image/fetch/f_auto,q_80/w_400/https://archive.smashing.media/assets/344dbf88-fdf9-42bb-adb4-46f01eedd629/2f984846-0510-48f5-a415-326027d14a88/3-useful-vscode-extensions-web-developers.png)
Code Snippet Screenshots
You created some really beautiful code, and you want to share it with the world? You can take a screenshot, download it, go to Twitter, upload it and send it. Or you can select the code right within the editor, and have Snipped generate a beautiful image of it and send it straight to Twitter.
![Code screenshot taken with the Snipped VSCode extension](https://res.cloudinary.com/indysigner/image/fetch/f_auto,q_80/w_400/https://archive.smashing.media/assets/344dbf88-fdf9-42bb-adb4-46f01eedd629/bdda62e5-fe54-44eb-903b-c1c6771f34b1/4-useful-vscode-extensions-web-developers.png)
These four extensions have proven very handy for my work with web development. What other useful extensions do you use? Let me know in the comments.
Further Reading
- Open-Source Meets Design Tooling With Penpot
- Mastering SVG Arcs
- Three Approaches To Amplify Your Design Projects
- The Hype Around Signals
![Smashing Editorial](https://www.smashingmagazine.com/images/logo/logo--red.png)