Powerful VS Code Setup: Amateur to Pro
Tags: vscode, programming, tutorial, design
Published: 2022-01-14 16:10:50

_Believe it or not, VS Code or Visual Studio Code **"Built by Microsoft"** is the most popular and most used code editor among developers._

So in support of this, if you are a newbie or experienced developer, I am here to show you how you can boost your vs code game and experience a whole new level and get the most out of your code editor.

Topics Covered:~
1. Extensions to get the most out of your editor
1. Secret settings to improve the experience
1. Editor's makeover

### How to install VS Code..?
*If you already have it, you could just scroll to the next section.*

Visit the [Official Download Page](https://code.visualstudio.com/download) and download according to your OS and install it.

There are more ways to install it:
- Chocolatey *(my preference)* will cover this in another blog
- Source code

### Extensions to get the most out of your editor
The coolest thing about vs code is there is a huge community using it, hence you never feel left out, there are tons of extensions made by these awesome people which makes this the most useful feature of vs code.

I have listed some of the useful and cool extensions for you to save time.

#### General

- [Prettier](https://marketplace.visualstudio.com/items?itemName=esbenp.prettier-vscode): A code formatter for rescue, use common styling among all the files and projects
- [Eslint](https://marketplace.visualstudio.com/items?itemName=dbaeumer.vscode-eslint): It is <a href="https://en.wikipedia.org/wiki/Lint_(software)">code linter</a> for JS & TS that will catch bugs even before you run the code
- [Tabnine](https://marketplace.visualstudio.com/items?itemName=TabNine.tabnine-vscode): This is super awesome, this is the AI code completion assistant to amplify coding accuracy and boost productivity. This gives super-accurate suggestions
- [Code Spell Checker](https://marketplace.visualstudio.com/items?itemName=streetsidesoftware.code-spell-checker): This will save you from committing misspelled words and feeling ashamed later
- [GitLens](https://marketplace.visualstudio.com/items?itemName=eamodio.gitlens): Helps you in multi-author projects by showing author blame on each line, see file history, and much more
- [Live Share](https://marketplace.visualstudio.com/items?itemName=MS-vsliveshare.vsliveshare): Enables real-time collaboration similar to Google Docs, multiple individuals could work on the same file, it enables to share the localhost, port, and even the terminal sessions most useful in pair programming
- [Path Intellisense](https://marketplace.visualstudio.com/items?itemName=christian-kohler.path-intellisense): This will help in autocompleting the filename and file path
- [TabOut](https://marketplace.visualstudio.com/items?itemName=albert.TabOut): Get out of the quotes, brackets, etc just using `Tab` and without the use of arrow keys
- [Better Comments](https://marketplace.visualstudio.com/items?itemName=aaron-bond.better-comments): This helps in creating more user-friendly comments with different highlighting for different types of comment
- [WakaTime](https://marketplace.visualstudio.com/items?itemName=WakaTime.vscode-wakatime): It is responsible for metrics, insights, and time tracking automatically generated from your programming activity

#### Web Development

- [Auto Rename Tag](https://marketplace.visualstudio.com/items?itemName=formulahendry.auto-rename-tag): Renames the closing tag when you edit the opening tag or vice versa
- [Live Server](https://marketplace.visualstudio.com/items?itemName=ritwickdey.LiveServer): Launch a local development server with a live reload feature for static & dynamic pages
- [HTML Lint](https://marketplace.visualstudio.com/items?itemName=mkaufman.HTMLHint): Linter for HTML
- [Style Lint](https://marketplace.visualstudio.com/items?itemName=stylelint.vscode-stylelint): Linter for CSS

### Secret settings to improve the experience
Certain settings are turned off by default but are worth turning on and make life a lot easier. Open your vs code,

There are two ways to change the settings in vs code:
- JSON Way *(the preferred and easy way)*
- GUI Way

#### The JSON way
1. Open [VS Code Command Pallet](https://code.visualstudio.com/docs/getstarted/userinterface#_command-palette) using the keyboard shortcut `Ctrl+Shift+P` on Windows or `Cmd+Shift+P` on Mac or hit `F1`
1. Type *settings JSON* in command pallet
1. Open  *'Preferences: Open Settings (JSON)'*
1. Now copy the following lines to your `settings.json` file

```json
"files.autoSave": "afterDelay",
"files.trimTrailingWhitespace": true,

"editor.wordWrap": "on",
"editor.formatOnSave": true,
"editor.wordWrapColumn": 120,
"editor.formatOnPaste": true,
"editor.quickSuggestions": true,
"editor.inlineSuggest.enabled": true,
"editor.codeActionsOnSave": {
  "source.fixAll": true,
  "source.organizeImports": true
},
"editor.wordWrap": "on",
"editor.defaultFormatter": "esbenp.prettier-vscode",

// Extensions settings

"git.autofetch": true,
"git.allowForcePush": true,
"git.autorefresh": true,
"git.autoRepositoryDetection": true,

"javascript.updateImportsOnFileMove.enabled": "always",
"typescript.updateImportsOnFileMove.enabled": "always",

"tabnine.experimentalAutoImports": true,

"prettier.singleQuote": true,
"prettier.endOfLine": "crlf",
"prettier.jsxBracketSameLine": true,
"prettier.printWidth": 120,

"eslint.validate": [
  "typescript",
  "javascript",
  "typescriptreact",
  "javascriptreact"
],

"better-comments.highlightPlainText": true,
```

#### GUI Way
First of all, open the settings page
hit `Ctrl+,` on windows or `Cmd+,` on mac to open the settings page or go to *File>Prefrences>Settings*
Now suppose for eg, you want to turn on the word wrap the entry in `settings.json` is:

```json
"editor.wordWrap": "on"
```

so in the search bar enter `editor.wordWrap` and change the setting accordingly. This is the reason I prefer JSON way.

### Editor's Makeover
It's time to change the editor's look and feel, I will walk you through some steps and you will love the way your editor looks

#### Theme
Let's start by changing the theme of your editor. There are numerous themes available in the marketplace. I have listed some of my favorites.

To change your theme:
- Install the one you like
- Now to select it hit `Ctrl+K+T` on windows and `Cmd+K+T` on mac and select your theme or *click on the gear icon on the bottom left>Color Theme>Select the theme*

Themes

1. [Bearded Theme](https://marketplace.visualstudio.com/items?itemName=BeardedBear.beardedtheme): There are 25 variations of this theme I have listed two of my favorite
  - Black & Amethyst
    ![Bearded Theme Black & Amethyst Example](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/98jy91p7zeqgtsihcb31.png)
  - Anthracite
    ![Bearded Theme Anthracite Example](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/j6ae1j3ugq5izvvwi1jh.png)
You can see all of the variations on [Official Bearded Theme Example](https://raw.githubusercontent.com/BeardedBear/bearded-theme/master/assets/themes.png)
1. [Cobolt2](https://marketplace.visualstudio.com/items?itemName=wesbos.theme-cobalt2)
![Official Cobolt2 Theme Example](https://raw.githubusercontent.com/wesbos/cobalt2-vscode/cobalt2-updates/images/ss.png)
1. [Github Dark Theme](https://marketplace.visualstudio.com/items?itemName=GitHub.github-vscode-theme)
![Github Dark Theme Example](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/n2t99ff36bu3x8ftcxba.png)
1. [Tokyo Night](https://marketplace.visualstudio.com/items?itemName=enkia.tokyo-night)
![Official Tokyo Night Theme Example](https://raw.githubusercontent.com/enkia/tokyo-night-vscode-theme/master/static/ss_tokyo_night.png)

#### Icons
There are two types of icons in vs code:
- File Icons: You see beside your files and folders, I prefer [Material Icon Theme](https://marketplace.visualstudio.com/items?itemName=PKief.material-icon-theme)
- Product Icons: You see all around the vs code, I prefer [Fluent Icons](https://marketplace.visualstudio.com/items?itemName=miguelsolorio.fluent-icons)
![Material Icon Theme Example](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/s3u47o1z3zxvznlrsaz0.png)

To change the icons theme:
- *Click on the gear icon on the bottom left>File Icon Theme/Product Icon Theme>Select the theme*

You can also set the theme and icon theme from the `settings.json` file just add these lines

```json
"workbench.colorTheme": "Bearded Theme Black & Amethyst", // your theme
"workbench.iconTheme": "material-icon-theme",
"workbench.productIconTheme": "fluent-icons",

"material-icon-theme.folders.color": "#42a5f5",
"material-icon-theme.folders.theme": "specific",
```

#### Font
When it comes to the font I love [Fira Code](https://fonts.google.com/specimen/Fira+Code), which also supports font legislature.
![Official Fira Code Font Legislature Example Image](https://github.com/tonsky/FiraCode/raw/master/extras/logo.svg)
> Noticed those symbols, these are called legislature, believe me, this adds a star when someone looks into your editor

Add these lines to your `settings.json` for the font configuration

```json
"editor.fontSize": 15,
"editor.lineHeight": 25,
"editor.letterSpacing": 0.5,
"editor.fontLigatures": true,
"editor.fontFamily": "Fira Code, Operator Mono, Consolas, 'Courier New', monospace",
```

And for the final touch-ups add these

```json
"editor.cursorBlinking": "expand",
"editor.cursorSmoothCaretAnimation": true,
```

***Bored..?*** Well we have completed the setup and you are good to go. I hope you loved it.

Have I missed something..? or do you have something to share, please let me know in the comments.

Join me on [Discord](https://discord.gg/JMQ5Nwe), invite your friends as well and let's get to know each other in a better way.

Till then keep hustling