The ultimate VS code setup

How to configure an astonishing IDE in less than 5 minutes

5 min readMay 19, 2022

VS Code has become the defacto standard editor for many frontend developers. One of the most extraordinary things about VS code is that it's extendable. Countless plugins help improve your development experience.

But, precisely, this insane amount of plugins makes it hard to configure your VS code the right way. In this blog post will describe how I set up my editor to save you some research.

We will mainly focus on the look & feel because that's the part that is the same for all developers. Productivity plugins strongly depend on your programming language and workflow.

Some think that the look & feel of your editor is not important. I think it is! As programmers, we spend countless hours looking at a screen. So why not look at some pleasant UI that is nice to look at and fun to use.

So let’s jump right into it and install the first plugin.

Material Icon Theme

Once your project grows, it becomes harder to scan the file tree visually. That’s where Material Icons come into play. This plugin adds a nice-looking icon in front of every file.

The material icons help you quickly identify if a file is a test file, a configuration file, or a plain JavaScript file.

Rainbow brackets 🌈

Rainbow brackets colorize round brackets, square brackets, and squiggly brackets. They are accommodating when writing callback functions in JavaScript, for example.

Every bracket pair (opening bracket and closing bracket) get the same color. This plugin becomes so handy when you try to identify if you missed a closing bracket or not.