5 Hidden VS Code Extensions for Web Developers

5 Hidden VS Code Extensions for Web Developers

ยท

4 min read

Visual Studio Code has a powerful extension system that lets you add features and customize the editor to your desires. It's what makes VS Code so versatile. You've probably seen lists of favorite extensions ranging from ESLint and Prettier to the official Python one by Microsoft. Here I'm going to tell you about five fantastic extensions I use in everyday work that you may not have encountered.

Toggle Quotes

Link

Toggle Quotes extension animation

If you write in JavaScript, you have the dubious pleasure of choosing single and double quotes for all your strings. Add in some HTML which requires double quotes, and JSX, which lets you write HTML in your JS, and things start to get interesting. Oh, and let's not forget string template literals, those things that use the backticks. The Toggle Quotes extension enables you to assign a keybind to rotate through all three of those styles. Perfect for when you want to insert a variable into your React component's className prop, Then wrap in it curly braces, and boom, you're done. Changing React props from double quote strings to string literals inside objects was the frequent issue that drove me to seek out an extension like this in the first place.

Remote-Containers

Link

VS Code remote-containers extension command palette options

"It works on my machine" is the classic phrase. You can picture the shrug and hands raised hands that go along with it. Whether you or another developer speaking to you, it's a problem. A mystery that is going to require time and effort to solve. Containers can help prevent this issue by making the same development environment available to everyone. VS Code's Remote-Containers extensions make this even easier by helping you use Docker containers without learning Docker. You have to install Docker, but you shouldn't need to touch the Docker CLI after installation. Through VS Code's command palette, you can add a .devcontainer folder and configuration to your repository. Then clone that repository into the container image you chose (I like to use the default GitHub Codespaces image, it has all the tools you need). Now your files live within the container. When you open the project in VS Code, it automatically starts the container image. When you close VS Code, the container image stops running. Brilliant! As seamless as you can get.

Surround

Link

Demo 1 of Surround extension

It turns out this large chunk of code you wrote needs to be in a try/catch block or maybe an if/else block if you're into that sort of thing. The Surround extension makes this easy with the Ctrl+Shift+T shortcut, providing you a list of options to wrap your selected code. A delightful feature. One that I missed when moving from JetBrains' IntelliJ IDEs to VS Code for most of my work.

TS QuickFixes

Link

Declare missing interface members

Since you're using TypeScript (I suppose you don't have to ๐Ÿ˜ฎ) and painstakingly creating helpful interfaces that tell you and other developers what properties your functions require, wouldn't it be nice if you could automatically fill in those 13+ props all at once? This feature is one provided out-of-the-box by IntelliJ, and I sorely missed it. With the TS QuickFixes extension, you get a declare missing members option within VS Code's quick fixes contextual menu. It's not perfect, but it saves you from a significant amount of boilerplate writing or hunting down a previous example to copy/paste.

Bookmarks

Link

Bookmarks extension in use

Modern IDEs and code editors have metric boatloads (you know, for those metric boats) of ways to navigate around your codebase. Find the thing you most desire by searching by files, symbols, keywords, regex (dear God ๐Ÿ˜ฑ). But sometimes, you want to get back to a couple of precise spots relevant to your current task. Enter the Bookmarks extension. Perhaps not the most hidden extension, but by placing a few bookmarks in the locations I'm working, I can hop back and forth between interfaces, models, functions, and variables that pertain to what I'm doing, giving the bookmarks descriptive names if I wish. They show up in the scroll bar, and the extension adds a convenient navigation menu. I find I seldom use old bookmarks (I forget they're there), but it works great to speed up the current day's work.

Thanks for reading this far. I hope this article made your developer life a little bit easier.

If you enjoyed the article, consider giving it a thumbs up. Subscribe to the newsletter or follow me on social media to get more helpful content:

If you need consulting, web, or mobile development services, consider hiring me at Rugged Software

See you next time ๐Ÿ‘‹

ย