My VS Code Setup

My VS Code Setup

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

1. Theme

2. Icons

3. Extensions

4. 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

 

Highlight Matching Tag

Highlight starting and ending of tags. it is provided by vincaslt.

Download Link : Highlight Matching Tag

Demo :

 

indent-rainbow

Showing indentation in a colored way.

Download Link : indent-rainbow

Demo :

 

IntelliSense for CSS class names in HTML

Auto-suggest CSS class names according to our definitions

Download Link : IntelliSense for CSS class names in HTML

Demo :

 

Live Share

Collaborate with your teammate in real time. You can share a live window, terminal, and server as well.

Download Link : Live Share

 

Live Server

It provides live reload functionality in the local server

Download Link : Live Server

 

Polacode

One of the handy tools that are used in daily life to capture your code in an amazing way

Download Link : Polacode

Demo :

 

4) BONUS EXTENSIONS

 

Code Runner

 

ES Lint

 

Icons

 

Icon Fonts

 

JavaScript (ES6) code snippets

 

One Dark Pro ( Theme )

 

Power Mode

 

React Icons

 

More From Author :-

**Useful Extensions for Ruby on Rails : **COMING SOON

My settings.json (user) of VS Code : COMING SOON