9 Essential VS Code Extensions (and The Problems They Solve)

Problem #1: Tracking context

My first problem requires some context to explain. It is related to my long-time work on a website that uses PHP and React and is connected to a MySQL database.

At any given moment, I’m working on one of four very different tasks: long-term development, quick fixes, pushing code out in the wild, or running scripts in the production environment.

To do these tasks, I have different folders, each containing a copy of the code: the FIX, DEV, RELEASE, and PROD folders.

But there have been times when I’ve started working in a VS Code window and suddenly realised I’d been working in the wrong folder or, worse, running code on the production database instead of on my local database.

I need to be able to tell at first glance what folder I’m working in.

That is where Peacock steps in. It has over 3 million installs. It assigns a unique colour to each project. I use Red for the PROD folder, which tells me to tread carefully. “DEV” is in blue, which is safe.

Problem #2: Switching between projects

My Second problem: I often have to maintain old projects and waste time trying to find where I stored my code.

This is where Project Manager steps in**.** It has 4.7 million installs. It allows me to manage where my projects. I can tag projects, allowing me to group my projects. Most importantly, I can quickly switch between them without navigating my filesystem.

Problem #3 : Managing GitHub Actions

Third problem: We use GitHub actions to prepare our code for release and to check that everything is fine. But they take time. To check their status, I head to GitHub’s website. But I have ADHD, and switching between contexts is counterproductive.

This is where “GitHub Actions” comes in. It has 2 million downloads. This extension shows me the status of my GitHub actions within the VS Code editor. It can see which runs have succeeded and, if not, which step has failed.

And talking of Git…

Problem #4: Exploring Git History

Fourth problem: I sometimes encounter code I don’t understand, where it is unclear what the person was trying to accomplish. I could use “git blame” or GitHub’s interface to work out the code’s history, but that requires changing context.

This is where GitLens steps up. This extension has 32 million downloads. It allows us to see, in VS Code, when we hover our cursor over a line of code, who wrote the code, when, and in which commit.

Problem #5: Differentiating Comments

Fifth problem: Documenting your code using comments is essential. But we use comments to communicate very different things: to warn people a function will be deprecated, to ask a question, or to note a task that needs to be done later.

But by default, all comments are formatted the same in the editor. When you’re scrolling through the code, it’s difficult to see whether a comment is vitally important, a TODO, or just a joke.

This is where Better Comments steps in. It has 6.8 million downloads. It highlights comments in different colours based on how they are formatted. A comment that starts with an exclamation mark is a warning. One that starts with a question mark is a question. One that starts with a TODO is … well, I’m sure you can guess!

And that brings me to our sixth problem.

Problem #6: Tracking TODOs

How can you track the TODOs that have been left throughout your code? This is where TODO Tree steps in. TODO Tree has over 4.4 million downloads and was created by “Gruntfuggly” (And with a name like that, you know they’re British). TODO tree allows you to browse your project folder tree to see all your project’s TODOs. And to take action where needed.

Problem #7: Bundle Creep

Our seventh problem is “bundle creep”. There is a temptation to solve problems by using other people’s code. That is a good idea if the problem is complex and outside our skillset. However, in client-side JavaScript, adding modules means increasing the bundle size and slowing down the page. It is difficult to closely monitor how much your imports weigh.

This is where Import Cost comes in.  It has 3.7 million downloads. It displays the size of any third-party bundles in your JavaScript code. In this EtApp.tsx file, “Import Cost” shows that Axios adds 13 kilobytes when zipped, and i18next adds 15 kilobytes. There aren’t any native alternatives to i18next. But do I really need Axios now that [caniuse] the “fetch” API is widely available? Probably not. The Import Cost allows me to see the problem directly within my code.

Now, talking about fetching data…

Problem #8: Testing APIs

Our eighth problem is testing APIs.

What I like about web and game development is that you interact directly with the result of your work. When you’re building web APIs, that is more complicated.

Programs like Postman allow you to interact with APIs. But that takes me out of the context of Visual Studio Code. The Rest Client extension solves this. It has 4.6 million downloads. Let me show you.

Here, [login.http] I create a login request. It pulls sensitive information from my environment file. I can store the response in a variable and use it to authenticate queries. Because GraphQL uses a POST request to an endpoint, I can run GraphQL requests from here, too. I can also use the extension to run requests against third-party APIs, such as OpenAI’s ChatGPT API.

And now to our ninth problem.

Problem #9: Converting JSON to Types

When we interact with REST APIs, the data's shape depends on how the API has been implemented. It is tedious to go through a JSON response and convert it to the correct type. This is where our next extension steps in. Paste JSON as Code has 2.2 million downloads and supports TypeScript, Go, Rust, C++, Python, and more.

So, for example, let’s open a JSON file and copy its contents. Now, if I open the command palette and select “Paste JSON as Types,” I will have a very good starting point for defining the type of my JSON response.

And while we are here, it’s not an extension but…

My Theme

I’ve had several questions from people inquiring about the theme I use in VS Code. And that makes sense because I love the style and the colours. The theme is called Luvia.  It is clean and simple, making it easy to focus on the code. And the colouring makes sense to me. Let me know what you think in the comments or if there are any other extensions worth highlighting.