8 VSCode Extensions for Fullstack Developers

Visual studio code is an extendable editor for building and debugging modern web applications. It's minimal but yet can feel like a featured-packed IDE with the right extensions.

Extensions

If I open my visual studio code, you'll notice I have over 50 extensions installed. We won't have time to go through all of them, so today we'll look at the top extensions that help me in my day-to-day tasks as a full-stack developer.

Thunder Client

To start, we'll take a look at Thunder Client. It's a lightweight Rest Client for testing APIs. For me, it replaced postman because it offers a whole bunch of features.

It provides support for different authentication options, auto-completes headers, different request bodies including GraphQL, and you can save requestions into collections for later users.

This extension is really awesome and feature-packed for being a vs code extension.

Paste JSON as Code

However, one of the downsides to working with JSON doesn't work well with IntelliSense.

That's why I use Paste JSON as Code, which infers types from sample JSON, then outputs strongly typed models and serializers for working with that data in your desired programming language.

This works for many languages but I mostly use it for Typescript since I can copy the response of a JSON and paste it to generate the typings. This makes it really easier to know which properties are available when working with the response.

Quokka.js

While testing APIs is great, sometimes you need to rapidly prototype in JavaScript or Typescript. For this I use Quokka.js. Quokka allows you to execute a section of javascript within VSCode and view its results inline.

Once you install Quokka, everything just works right out of the box. We can open the command palette and create a new javascript file. As I type in this new file, it will show squares beside each line to show if it has been successfully executed.

If I create a simple example... I am able to print out the value of t and see its value right beside it.

I mostly use it as a scratchpad to implement algorithms, data structures or quickly play around with new libraries.

Live share

Live share allows you to connect visual studio code with your GitHub account and then allows you to collaborate with others in real-time. It's like to google docs of writing code. With everything being remote lately, this is useful for pair programming or collaborating to solve problems. It's like the google docs of writing code.

I've used this many members of my team to explain concepts and help others learn how to code with a more realtime teach approach.

Once you install the extension you'll need to connect a GitHub or Microsoft account. After that, you can add people as friends which you can then invite to a programming session or you can simply share a link with someone.

Once the user clicks it will load all the project files. It even excludes files in the git ignore file to save bandwidth.

Now you can edit update or change code in realtime.

Better Comments

While collaboration is a great way to communicate with members of your team. You might not be able to share the information with everyone on the team, which is why many software developers leave comments in their code.

The code may tell you what is being done and how, but it doesn’t tell you why.

To make comments more human-friendly I use Better Comments. It allows you to categorize comments which can make them more visible depending on their importance. Some of the most common ones I use are alerts and todos to have information popout for other team members.

VSCode icons

While we are on the topic of making things look better, I would also like to mention adding an icon package to vs code. Personal I use VSCode-icons, it supports 100's different file types and without the editor feels empty.

I've surprisingly become so dependent on using this package as I actually use it as a way to navigate around since I can recognize icons quicker than a reading folder or file names.

Framework Snippets

For the next one I'm going to group all of them under one as I would suggest you get yourself a snippet extension for the frontend framework, you are working with.

This is not a single extension but a collection of extensions with various snippets for different programming languages.

Each frontend framework has there owned, since I work with React and Vue, I mostly use the ES7 React extension and Vue 3 Snippets.

Snippets are a great way to be more productive since it removes the need to type out all the boilerplate code. Install these extensions gives you a whole bunch of predefined snippets.

You can simply type the snippet shortcut and then tab through each section to fill it out.

If these are not good enough for you, VSCode also allows you to create your own snippets. This is really useful for other pieces of code you find yourself writing frequently.

You can create custom snippets using VSCode which requires creating some JSON files. For custom snippets I find myself using https://snippet-generator.app/ which makes it really easier to do. All you can do is fill out the information and paste it into the JSON file for that language.

Remote Containers

And for my last extension is remote Containers. This extension has helped me so much when setting up your development environment. It lets you run Vscode instead of a Docker container so the environment is isolated and easy to reproduce.

When it comes to formatting code I highly suggest you get yourself set up with prettier.

The extension starts a development container running where the workspace files can be mounted into the container from the local file system. Extensions are installed and run inside the container where they have full access to the tools, platform, and file system.

You then work with VS Code as if everything were running locally on your machine, except now they are isolated inside a container.

Installation is a little more work, especially when working on windows, but once you get it installed I love using it.

Conculsion

I hope these extensions were helpful to you. I could have converted even more extensions give how extendable visual studio code is.

I also have a growing community over on discord if you'd like to check it out.