My Visual Studio Code Setup
Tags: vscode, productivity, webdev
Published: 2020-06-14 07:57:53

I love the text editor setup I've been using for the past year and a half, so I want to show off my setup! Visual Studio Code has far surpassed my experiences with Spyder, Sublime Text, and Idle (the built-in Python editor) which I used for the years before it.
I thought I would do a quick write up on my setup and the extensions I love!
Today I'm going to share my favorite Code Editor settings, using for my web development. And I'm going to start with my Code Editor looks. After all, look matters.

**Theme**
My most used VS Code theme is [Material Theme](https://marketplace.visualstudio.com/items?itemName=Equinusocio.vsc-material-theme), currently, I'm using this.

![Alt Text](https://dev-to-uploads.s3.amazonaws.com/i/60pjiw4swpf2o6353nsk.png)

There are many color themes available in this theme,
I usually go for a dark theme, so my favorites are :

 * Material Theme Palenight High Contrast
![Alt Text](https://dev-to-uploads.s3.amazonaws.com/i/1e5kyybiyqxn8p5x6xgz.png)

 * Material Theme Ocean High Contrast
![Alt Text](https://dev-to-uploads.s3.amazonaws.com/i/ectp09j4mc3mq8tytdbf.png)

**Emmet**
I am incredibly reliant on [Emmet](https://emmet.io/), so I love that it is built in for VS Code. I also have it set up to work in more than just my html files:

```javascript
// in settings.json
"emmet.includeLanguages": {
  "html": "html",
  "erb": "erb",
  "javascript": "javascriptreact",
  "vue": "html",
  "ejs": "html"
},
```
![Alt Text](https://dev-to-uploads.s3.amazonaws.com/i/vdfjcsozrln9x53h4her.gif)


**Icons**
File Icons enhance our VS Code Editor looks. Mainly it helps us to differentiate between different files & folders by their given icons. For my VS Code, I use two file icons:-

 * [Material Icon Theme ](https://marketplace.visualstudio.com/items?itemName=PKief.material-icon-theme)- One of the most popular icon theme for VS Code.
 * [Material Theme Icons ](https://marketplace.visualstudio.com/items?itemName=Equinusocio.vsc-material-theme-icons)- Currently using this. And I'm using Material Theme Icons Light variant.

![Alt Text](https://dev-to-uploads.s3.amazonaws.com/i/ect6y5vhn75tq2fq4r1x.png)

**Extensions I use**

I have a lot of language and framework-specific extensions built-in, which are boring and very dependent on the developer, so I will skip over those in order to discuss some of my favorite all-purpose extensions.

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

Automatically rename paired HTML/XML tag, also works in JSX.

Add an entry into auto-rename-tag.activationOnLanguage, in your settings.json file to set the languages that the extension will be activated. By default, it is ["*"] and will be activated for all languages

```javascript
  "auto-rename-tag.activationOnLanguage": ["html", "xml", "php", "javascript"]
```

![Alt Text](https://dev-to-uploads.s3.amazonaws.com/i/iyclpyec5z4vo40simh1.gif)


* [Bracket Pair Colorizer 2](https://marketplace.visualstudio.com/items?itemName=CoenraadS.bracket-pair-colorizer-2)

This extension allows matching brackets to be identified with colors. The user can define which tokens to match, and which colors to use.

![Alt Text](https://dev-to-uploads.s3.amazonaws.com/i/pdsl023q8nbo5zqu6v23.png)


* [REST Client](https://marketplace.visualstudio.com/items?itemName=humao.rest-client)

This extension allows you to send HTTP request and view the response in Visual Studio Code directly.

![Alt Text](https://dev-to-uploads.s3.amazonaws.com/i/977pbig6zwsh478a62du.gif)


* [Color Highlight](https://marketplace.visualstudio.com/items?itemName=naumovs.color-highlight)

This extension styles css/web colors, found in your document


![Alt Text](https://dev-to-uploads.s3.amazonaws.com/i/xaywjoxzh4xhqh0ioh2i.gif)


* [Prettier](https://marketplace.visualstudio.com/items?itemName=esbenp.prettier-vscode)

Prettier is an opinionated code formatter. It enforces a consistent style by parsing your code and re-printing it with its own rules that take the maximum line length into account, wrapping code when necessary.

Set below property value to be true or add this property into your *settings.json* file to format code on save.

```javascript
  "editor.formatOnSave": true
```
![Alt Text](https://dev-to-uploads.s3.amazonaws.com/i/cude9ahvo181jjxihq6z.gif)


**Conclusion**
I am really happy with my setup -- I have no complaints! Feel free to DM me any questions about my setup, and also send me your favorite tips and tricks!