My VS Code Setup
Tags: showdev, productivity, design, vscode
Published: 2023-02-08 21:32:44


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

![Created By [Author](https://rutikkpatel.medium.com/) ( [Rutik Patel](https://rutikkpatel.medium.com/) )](https://cdn-images-1.medium.com/max/3280/1*szQrtBA5zE_B9Rc3jrFQKQ.png)

&nbsp;

**Points to be discussed**

 1. Theme

 2. Icons

 3. Extensions

 4. Bonus

&nbsp;

## 1) Theme

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

**Download Link :** [JellyFish Theme](https://marketplace.visualstudio.com/items?itemName=PawelBorkar.jellyfish)

![JellyFish Theme](https://cdn-images-1.medium.com/max/2000/1*OJNKUYjUKUsdYnmplwf2AA.png)

**Demo :**

![JellyFish Theme VS Code](https://cdn-images-1.medium.com/max/3840/1*M6gsb4uliZX2jhER03f3kA.png)

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

&nbsp;

### **Cobalt 2 Theme Official**

**Download Link :** [Cobalt 2](https://marketplace.visualstudio.com/items?itemName=wesbos.theme-cobalt2)

**Demo :**

![Cobalt 2 Theme VS Code](https://cdn-images-1.medium.com/max/3840/1*Dgl29OiWzP88qQZSNqGhlw.png)

&nbsp;

### Dark Visual Studio Default Theme

**Demo :**

![Dark Visual Studio Default Theme](https://cdn-images-1.medium.com/max/3840/1*8EP4aNR3I9MEkWcSm1j7FA.png)

&nbsp;

## 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](https://marketplace.visualstudio.com/items?itemName=PKief.material-icon-theme)

![[Material Icon Theme](https://marketplace.visualstudio.com/items?itemName=PKief.material-icon-theme)](https://cdn-images-1.medium.com/max/2000/1*oIRCaF90lbUEIrHD9BjHdw.png)

**Demo :**

![[Material Icon Theme](https://marketplace.visualstudio.com/items?itemName=PKief.material-icon-theme)](https://cdn-images-1.medium.com/max/2000/1*Fur0m7eMfFW7DdhRhgdsBw.png)

&nbsp;

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

&nbsp;

## **Auto Close Tag**

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

**Download Link :** [Auto Close Tag](https://marketplace.visualstudio.com/items?itemName=formulahendry.auto-close-tag)

![Auto Close Tag](https://cdn-images-1.medium.com/max/2000/1*qxmHWZrYkvCe3ILAa6NXqg.png)

&nbsp;

## **Auto Rename Tag**

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

Download Link : [Auto Rename Tag](https://marketplace.visualstudio.com/items?itemName=formulahendry.auto-rename-tag)

![Auto Rename Tag](https://cdn-images-1.medium.com/max/2000/1*PYnN3p8kkKvABrGQ8wrYfg.png)

&nbsp;

## **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](https://marketplace.visualstudio.com/items?itemName=kamikillerto.vscode-colorize)

![colorize](https://cdn-images-1.medium.com/max/2000/1*y3FfLKnYnQz0yBqGT1Fsnw.png)

**Demo :**

![[colorize](https://marketplace.visualstudio.com/items?itemName=kamikillerto.vscode-colorize)](https://cdn-images-1.medium.com/max/2248/1*tJBamiP13N4MEgtUWS98dg.gif)

&nbsp;

## CSS Peek

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

**Download Link :** [CSS Peek](https://marketplace.visualstudio.com/items?itemName=pranaygp.vscode-css-peek)

![CSS Peek](https://cdn-images-1.medium.com/max/2000/1*fWbuBMgaOOfEZkVJ1Rx2Yw.png)

**Demo :**

![](https://cdn-images-1.medium.com/max/2000/1*JHJxrnRar_7mSXYk4zW3uQ.gif)

&nbsp;

## **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](https://marketplace.visualstudio.com/items?itemName=eamodio.gitlens)

![GitLens — Git supercharged](https://cdn-images-1.medium.com/max/2000/1*57MAooX-VgjVEzwRmQV71Q.png)

&nbsp;

## **Highlight Matching Tag**

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

**Download Link :** [Highlight Matching Tag](https://marketplace.visualstudio.com/items?itemName=vincaslt.highlight-matching-tag)

![Highlight Matching Tag](https://cdn-images-1.medium.com/max/2000/1*SdF8f4nwxuANnRZAc-pbJw.png)

**Demo :**

![Demo for Highlight Matching Tags](https://cdn-images-1.medium.com/max/3840/1*CWFkOCMnLDF87RXQ0Jij-g.gif)

&nbsp;

## **indent-rainbow**

Showing indentation in a colored way.

**Download Link :** [indent-rainbow](https://marketplace.visualstudio.com/items?itemName=oderwat.indent-rainbow)

![indent-rainbow](https://cdn-images-1.medium.com/max/2000/1*MnGQgKQJcjCGZC_9LBpIeg.png)

**Demo :**

![[indent-rainbow](https://marketplace.visualstudio.com/items?itemName=oderwat.indent-rainbow)](https://cdn-images-1.medium.com/max/2000/1*GqnS-V_GLePmdNzcQOcWBg.png)

&nbsp;

## 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](https://marketplace.visualstudio.com/items?itemName=Zignd.html-css-class-completion)

![](https://cdn-images-1.medium.com/max/2000/1*4WP5ETaOfKveypxgWRju1g.png)

**Demo :**

![[IntelliSense for CSS class names in HTML](https://marketplace.visualstudio.com/items?itemName=Zignd.html-css-class-completion)](https://cdn-images-1.medium.com/max/2000/1*f-jJmKCwYjz4uAfV9s5mog.gif)

&nbsp;

## Live Share

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

**Download Link :** [Live Share](https://marketplace.visualstudio.com/items?itemName=MS-vsliveshare.vsliveshare)

![Live Share](https://cdn-images-1.medium.com/max/2000/1*zm2x3tr13koX_u0hvqUXOg.png)

&nbsp;

## **Live Server**

It provides live reload functionality in the local server

**Download Link :** [Live Server](https://marketplace.visualstudio.com/items?itemName=ritwickdey.LiveServer)

![Live Server](https://cdn-images-1.medium.com/max/2000/1*sW18-IUgHQBoXTEt2u-s2w.png)

&nbsp;

## **Polacode**

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

**Download Link :** [Polacode](https://marketplace.visualstudio.com/items?itemName=pnp.polacode)

![Polacode](https://cdn-images-1.medium.com/max/2000/1*9sabWvDJ4iaP4fnUnfZKkg.png)

**Demo :**

![Captured Code using Polacode](https://cdn-images-1.medium.com/max/2640/1*cmXkdIs7T2UlnmHfb6pTJA.png)

&nbsp;

## 4) BONUS EXTENSIONS

&nbsp;

### [Code Runner](https://marketplace.visualstudio.com/items?itemName=formulahendry.code-runner)

![Code Runner](https://cdn-images-1.medium.com/max/2000/1*aiz20WUzV6rPmmXjlQdGFw.png)

&nbsp;

### [ES Lint](https://marketplace.visualstudio.com/items?itemName=dbaeumer.vscode-eslint)

![ES Lint](https://cdn-images-1.medium.com/max/2000/1*Tks7niA94Gar7SdyqclQ5g.png)

&nbsp;

### [Icons](https://marketplace.visualstudio.com/items?itemName=tal7aouy.icons)

![Icons](https://cdn-images-1.medium.com/max/2000/1*UII-VmlpKN8Mn-V0n-ROBQ.png)

&nbsp;

### [Icon Fonts](https://marketplace.visualstudio.com/items?itemName=idleberg.icon-fonts)

![Icon Fonts](https://cdn-images-1.medium.com/max/2000/1*A9J8m2WYfBtcHc_H-Ua98g.png)

&nbsp;

### [JavaScript (ES6) code snippets](https://marketplace.visualstudio.com/items?itemName=xabikos.JavaScriptSnippets)

![JavaScript (ES6) code snippets](https://cdn-images-1.medium.com/max/2000/1*e0GztWNcTYiugygMJRPeyw.png)

&nbsp;

### [One Dark Pro](https://marketplace.visualstudio.com/items?itemName=zhuangtongfa.Material-theme) ( Theme )

![One Dark Pro](https://cdn-images-1.medium.com/max/2000/1*6AHLuGjJUdgqBcYYRLvtgA.png)

&nbsp;

### [Power Mode](https://marketplace.visualstudio.com/items?itemName=hoovercj.vscode-power-mode)

![](https://cdn-images-1.medium.com/max/2000/1*mwnr5sdNIEXSieX4lEobvA.png)

![[Power Mode](https://marketplace.visualstudio.com/items?itemName=hoovercj.vscode-power-mode)](https://cdn-images-1.medium.com/max/2000/1*PT15wR6oV72D9maMGqhTCA.gif)

&nbsp;

### [React Icons](https://marketplace.visualstudio.com/items?itemName=afzalsayed96.reacticons)

![React Icons](https://cdn-images-1.medium.com/max/2000/1*hdv_rHTYRI455WnZumH6ag.png)

&nbsp;

More From Author :-

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

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