My VS Code Setup

5 min readFeb 8, 2023

--

Visual Code, commonly known as VS Code, is a famous IDE used by so many programmers for doing their daily programming-related tasks. I am also one of them. So in this article, I am going to share the setup that I have done for the coding in my system with all themes, icons, and extensions.

Points to be discussed

Theme
Icons
Extensions
Bonus

1) Theme

My all-time favourite and currently set theme is the jellyfish theme.

Download Link : JellyFish Theme

Demo :

Apart from that, before applying this jellyfish theme, I used

Cobalt 2 Theme Official

Download Link : Cobalt 2

Demo :

Dark Visual Studio Default Theme

Demo :

2) Icons

It is simple to recognise the file type using the icon. I am using the Material Icons theme, which provides a user-friendly interface.

Material Icon Theme

It is a collection of material design icons.

Download Link : Material Icon Theme

Demo :

3) Extensions

Extensions made our task easy by providing some snippets, showing live changes, collaborating with others, and much more.

Here is the list of the extensions that I use in my day-to-day life.

Auto Close Tag

It automatically adds HTML and XML close tags. It is provided by Jun Han.

Download Link : Auto Close Tag

Auto Rename Tag

It renames the paired HTML/XML tag automatically. It is provided by Jun Han.

Download Link : Auto Rename Tag

colorize

With the help of this extension, it is easy to visualize CSS colors in your styling files.

This extension adds a background color for each of the written colors.

Download Link : colorize

Demo :

CSS Peek

To see the CSS styling code behind any class, div, or tag.

Download Link : CSS Peek

Demo :

GitLens — Git supercharged

Using this, we can quickly see who wrote a piece of code, easily navigate and explore Git repositories, obtain insightful knowledge through rich visualizations and robust comparison tools, and much more.

Download Link : GitLens — Git supercharged