My VS Code Setup
Tags: vscode, productivity, javascript, webdev
Published: 2020-02-20 04:05:11

---
title: My VS Code Setup
published: true
description: My Visual Studio Code Editor Setup.
tags: #vscode #productivity #javascript #webdev
cover_image: https://dev-to-uploads.s3.amazonaws.com/i/qwtlfc0rcvka93a9jsq3.png
---

There are a lot of Code Editors, some are free and some are paid. Among all of them my favorite Code Editor is [Visual Studio Code](https://code.visualstudio.com). It's free and has amazing features. I'm using it from the beginning of my web development journey.

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 [Snazzy Operator](https://marketplace.visualstudio.com/items?itemName=aaronthomas.vscode-snazzy-operator), currently I'm using this.

![VS Code Theme - Snazzy Operator](https://dev-to-uploads.s3.amazonaws.com/i/1izus76qw2ekqrnrbkx3.jpg)<figcaption>VS Code Theme - Snazzy Operator</figcaption>

This theme is based on [hyper-snazzy](https://github.com/sindresorhus/hyper-snazzy) and optimized for used with the [Operator Mono](https://www.typography.com/fonts/operator/overview) font. I just love😍 this theme.

⭐ Some other themes I used before:
- [Oceanic Next](https://marketplace.visualstudio.com/items?itemName=naumovs.theme-oceanicnext) - I used Oceanic Next (dimmed bg).
- [Remedy](https://marketplace.visualstudio.com/items?itemName=robertrossmann.remedy) - I used Remedy Dark (straight).


## ✒ Font:
Another important things for my Code Editor looks. The font I'm using for my Code Editor is [JetBrains Mono](https://www.jetbrains.com/lp/mono/?ref=jonas.io). It's a free font with ligatures support.

![JetBrains Mono Font](https://dev-to-uploads.s3.amazonaws.com/i/ids4g29fl5rwu4cmudcr.png)<figcaption>Captured from JetBrains Mono Fonts Webpage</figcaption>

The font ligatures are a new format for fonts that support symbol decorations instead of normal characters like =>, <=.


![Alt Text](https://dev-to-uploads.s3.amazonaws.com/i/p7zz8e04jp27atnm187i.png)<figcaption>Captured from Official Site</figcaption>

Before [JetBrains Mono](https://www.jetbrains.com/lp/mono/?ref=jonas.io), I used **Operator Mono**. It's also a nice font.

⭐ Some other fonts I used before:
- [Operator Mono](https://www.cufonfonts.com/font/operator-mono) - Supports ligatures.
- [Fira Code](https://github.com/tonsky/FiraCode) - Free & supports ligatures.
- [Dank Mono](https://dank.sh) - Paid & supports ligatures.

🌟🌟🌟 Do you want to use my settings, I use for my VS Code fonts? In your VS Code press **Ctrl + p**, type **settings.json** and open that file. Now replace below properties values with my given values.

```json
{
  "workbench.colorTheme": "Snazzy Operator",
  "editor.fontFamily": "'JetBrains Mono', Consolas, 'Courier New', monospace",
  "editor.fontLigatures": true,
  "editor.fontSize": 14,
  "editor.lineHeight": 22,
  "editor.letterSpacing": 0.5,
  "editor.fontWeight": "400",
  "editor.cursorStyle": "line",
  "editor.cursorWidth": 5,
  "editor.cursorBlinking": "solid"
}
```

## 📁 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 :-
1. [Material Icon Theme](https://marketplace.visualstudio.com/items?itemName=PKief.material-icon-theme) - One of the most popular icon theme for VS Code.
2. [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.

![Material Icon Theme](https://dev-to-uploads.s3.amazonaws.com/i/q3f0fdaigdv3jiz7bm7v.png)<figcaption>Material Icon Theme - File Icons</figcaption>

## 🛠 Extensions I Use:
#### 🔹 [Auto Rename Tag](https://marketplace.visualstudio.com/items?itemName=SimonSiefke.auto-rename-tag)
Automatically rename paired HTML/XML tag, also works in JSX.

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

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

![Auto Rename Tag](https://dev-to-uploads.s3.amazonaws.com/i/2u2t0jjpk3w3vln3zzm6.gif)<figcaption>Auto Rename Tag (Taken from VS Code Auto Rename Tag extension page)</figcaption>

#### 🔹 [Bracket Pair Colorizer 2](https://marketplace.visualstudio.com/items?itemName=CoenraadS.bracket-pair-colorizer-2)
This extension allows matching brackets to be identified with colours. The user can define which tokens to match, and which colours to use.

![Bracket Pair Colorizer 2](https://dev-to-uploads.s3.amazonaws.com/i/xyly1rmpc9nnh5l1ma7z.png)

#### 🔹 [Color Highlight](https://marketplace.visualstudio.com/items?itemName=naumovs.color-highlight)
This extension styles css/web colors, found in your document.

![Color Highlight](https://dev-to-uploads.s3.amazonaws.com/i/rzjxppvfqkfw4m7k5n9g.gif)<figcaption>Color Highlight (Taken from google)</figcaption>

#### 🔹 [CSS Peek](https://marketplace.visualstudio.com/items?itemName=pranaygp.vscode-css-peek)
- Peek: Load the css file inline and make quick edits right there. (Ctrl+Shift+F12)
- Go To: Jump directly to the css file or open it in a new editor (F12)
- Hover: Show the definition in a hover over the symbol (Ctrl+hover)


![CSS Peek](https://dev-to-uploads.s3.amazonaws.com/i/cbecdt45sjnjx32svzr9.gif)<figcaption>CSS Peek (Taken from VS Code CSS Peek extension page)</figcaption>

#### 🔹 [DotENV](https://marketplace.visualstudio.com/items?itemName=mikestead.dotenv)
Highlight key, value pairs in ***.env*** file.

![DotENV](https://dev-to-uploads.s3.amazonaws.com/i/4llz9uysuzmgpiq7k6sy.png)<figcaption>DotENV (Taken from VS Code DotENV extension page)</figcaption>

#### 🔹 [ES7 React/Redux/GraphQL/React-Native snippets](https://marketplace.visualstudio.com/items?itemName=dsznajder.es7-react-js-snippets)
This extension provides you JavaScript and React/Redux snippets in ES7 with Babel plugin features for VS Code.

#### 🔹 [ESLint](https://marketplace.visualstudio.com/items?itemName=dbaeumer.vscode-eslint)
'Linting' tool for VS Code - or Code checking tool.
> "Lint, or a Linter, is a tool that analyzes source code to flag programming errors, bugs, stylistic errors, and suspicious constructs." [Wikipedia](https://en.wikipedia.org/wiki/Lint_(software))

#### 🔹 [Highlight Matching Tag](https://marketplace.visualstudio.com/items?itemName=vincaslt.highlight-matching-tag)
Highlight matching opening or closing tags.

![Highlight Matching Tag](https://dev-to-uploads.s3.amazonaws.com/i/ulu0yt94sas4sm1pixke.gif)<figcaption>Highlight Matching Tag (Taken from VS Code Highlight Matching Tag extension page)</figcaption>
Styles I use for this extension:
```json
"highlight-matching-tag.styles": {
        "opening": {
            "left": {
                "custom": {
                    "borderWidth": "0 0 0 1.5px",
                    "borderStyle": "solid",
                    "borderColor": "yellow",
                    "borderRadius": "5px",
                    "overviewRulerColor": "white"
                }
            },
            "right": {
                "custom": {
                    "borderWidth": "0 1.5px 0 0",
                    "borderStyle": "solid",
                    "borderColor": "yellow",
                    "borderRadius": "5px",
                    "overviewRulerColor": "white"
                }
            }
        }
    }
```
#### 🔹 [Image preview](https://marketplace.visualstudio.com/items?itemName=kisstkondoros.vscode-gutter-preview)
Shows image preview in the gutter and on hover.

![Image preview](https://dev-to-uploads.s3.amazonaws.com/i/xy3evgn6v5xzeyjvinmd.png)<figcaption>Image preview (Taken from VS Code Image preview extension page)</figcaption>

#### 🔹 [Indent Rainbow](https://marketplace.visualstudio.com/items?itemName=oderwat.indent-rainbow)
This extension colorizes the indentation in front of your text alternating four different colors on each step.

![Indent Rainbow](https://dev-to-uploads.s3.amazonaws.com/i/o7zc72mcqhiwvnfkpj5l.png)<figcaption>Indent Rainbow (Taken from VS Code Indent Rainbow extension page)</figcaption>

#### 🔹 [Live Server](https://marketplace.visualstudio.com/items?itemName=ritwickdey.LiveServer)
Launch a local development server with live reload feature for static & dynamic pages.

#### 🔹 [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.
```json
  "editor.formatOnSave": true
```

#### 🔹 [Pug beautify](https://marketplace.visualstudio.com/items?itemName=mrmlnc.vscode-pugbeautify)
Pug beautify plugin for VS Code. Press **F1** and run the command named **Beautify pug/jade** to beautify your pug file.

#### 🔹 [REST Client](https://marketplace.visualstudio.com/items?itemName=humao.rest-client)
REST Client allows you to send HTTP request and view the response in Visual Studio Code directly.

![REST Client](https://dev-to-uploads.s3.amazonaws.com/i/x6ppjpq28yjwjv9yw0lr.gif)<figcaption>REST Client (Taken from VS Code REST Client extension page)</figcaption>

#### 🔹 [Settings Sync](https://marketplace.visualstudio.com/items?itemName=Shan.code-settings-sync)
Synchronize Settings, Snippets, Themes, File Icons, Launch, Keybindings, Workspaces and Extensions Across Multiple Machines Using GitHub Gist.

#### 🔹 [TODO Highlight](https://marketplace.visualstudio.com/items?itemName=wayou.vscode-todo-highlight)
Highlight TODO, FIXME and other annotations within your code.


#### 🔹 [Version Lens](https://marketplace.visualstudio.com/items?itemName=pflannery.vscode-versionlens)
Shows the latest version for each package in your package.json file.

## 📃 Terminal Setup:
I use Windows Operating System. Since I use Git via the command line, I have [Git Terminal](https://git-scm.com). And I use this terminal as my integrated terminal. My terminal settings are given below:
```json
  "terminal.integrated.shell.windows": "C:\\Program Files\\Git\\bin\\bash.exe",
  "terminal.integrated.fontFamily": "FuraMono Nerd Font",
  "terminal.integrated.fontSize": 12,
  "terminal.integrated.rightClickCopyPaste": true
```

## ✔ Useful VS Code Keyboard Shortcuts:
There are some important keyboard shortcuts, I use in my day to day coding life. These shortcuts enhance my productivity with Visual Studio Code.

| Keybinding        | Action                                 |
| ----------------- | -------------------------------------- |
| Ctrl + P          | Go to File, You can move to any file of open solution/folder in Visual Studio code                        |
| Ctrl + `          | Open terminal in VS Code               |
| Alt + Down        | Move Line Down                         |
| Alt + Up          | Move Line Up                           |
| Ctrl + D          | Move Last Selection To Next Find Match |
| Ctrl + Space      | Trigger Suggest                        |
| Ctrl + F          | Find                                   |
| Ctrl + /          | Toggle Line Comment                    |
| Ctrl + C          | Copy line                              |
| Ctrl + X          | Cut line                               |
| Ctrl + V          | Paste                                  |
| Ctrl + Z          | Undo                                   |
| Ctrl + Y          | Redo                                   |
| Shift + Alt + Down| Copy Line Down                         |
| Shift + Alt + Up  | Copy Line Up                           |
| Ctrl + Shift + T  | Reopen the latest closed window        |

*****

Thanks for reading and stay tuned.🙂👋