VS Code Setup to Improve Productivity
Tags: vscode, productivity
Published: 2019-02-14 07:14:27

---
title: VS Code Setup to Improve Productivity
published: true
description: VS Code setup and extensions needed to maximize productivity when using VS Code from the perspective of a software engineer working on the front-end.
tags: VS Code, Productivity
---

Code editors have evolved over the years. A few years ago, there was no Visual Studio Code (VS Code). You were probably using Sublime, Atom, Bracket, etc. But with the release of VS Code, it has become the favourite editor of most software developers.


## Why VS Code?
* Customizable
* Easy Debugging
* Emmet
* Extensions
* Git Integration
* Integrated terminal
* Intellisense
* Lightweight
* Theming and more...


Having seen the advantages of using VS Code [and awesome things you can do with it](https://vscodecandothat.com/), this article will cover VS Code setup and extensions needed when using VS Code from the lens of productivity.


## Emmet
Used in many popular text editors, this greatly improves HTML & CSS workflow.
To access this, press <kbd>CMD + SHIFT + P</kbd>. Then, search for **emmet**. This shows a list of actions that can be performed using emmet.

For instance, to display five divs with the class name item, all you need is
```html
  .item{$}*5
```
Then, press the <kbd>Enter</kbd> key. The result is

```html
<div class="item">1</div>
<div class="item">2</div>
<div class="item">3</div>
<div class="item">4</div>
<div class="item">5</div>
```


## Font
[FiraCode](https://github.com/tonsky/FiraCode) looks cool as a result of the support for ligatures. It makes your code readable at a glance. Download and install FiraCode, then add it to your `settings.json` file.

![FiraCode](https://thepracticaldev.s3.amazonaws.com/i/ylunkhys8opkr1csyw1w.png)


## Configuration
You can configure VS Code within the `settings.json` file to match your preferences.

```json
{
    "editor.multiCursorModifier": "ctrlCmd",
    "editor.formatOnPaste": true,
    "editor.wordWrap": "bounded",
    "editor.trimAutoWhitespace": true,
    "editor.fontFamily": "Fira Code",
    "editor.fontLigatures": true,
    "editor.fontSize": 14,
    "editor.formatOnSave": true,
    "files.autoSave": "onFocusChange",
    "emmet.syntaxProfiles": {
        "javascript": "jsx"
    },
    "eslint.autoFixOnSave": true,
    "eslint.validate": [
        "javascript",
        "javascriptreact"
    ],
    "javascript.validate.enable": true,
    "git.enableSmartCommit": true,
    "files.trimTrailingWhitespace": true,
    "editor.tabSize": 2,
    "gitlens.historyExplorer.enabled": true,
    "diffEditor.ignoreTrimWhitespace": false,
    "workbench.sideBar.location": "right",
    "explorer.confirmDelete": false,
    "javascript.updateImportsOnFileMove.enabled": "always",
}
```


## Launching from the command line
Press <kbd>CMD + SHIFT + P</kbd>, type *shell command* and select *Install code command in path*.
Afterwards, navigate to any project from the terminal and type **`code .`** from the directory to launch the project using VS Code.


## Multiple Cursors
You can modify multiple lines of code at the same time. You need to set your preferred access <kbd>KEY</kbd> within your `settings.json` file.

```sh
    "editor.multiCursorModifier": "ctrlCmd",

    or

    "editor.multiCursorModifier": "alt",
```


## Terminal
You can [set up your terminal to use iTerm2 and ZSh](https://chiamakaikeanyi.dev/how-to-configure-your-macos-terminal-with-zsh-like-a-pro) and have your VS Code terminal setup to use that.

## Extensions
Below are useful extensions that can improve developer experience when working on a codebase.

To access these extensions,
* Go to View > Extensions
* Search for extensions in the marketplace
* Click on Install


---

* **Add jsdoc comments**

This adds comments block to the code. To use it, highlight the first line of the function, press <kbd>CMD + SHIFT + P</kbd> and select *Add Doc Comments*



* **Auto Import**

With this extension, you don't need to manually import files. If you are working on a component-based project, just go ahead and type the component name and it will be automatically imported.

* **Auto Rename tag**

Automatically renames paired elements


* **CSS Peek**

As the name implies, this helps you peek on rules applied by a defined style within a codebase and it's specificity. It comes in handy when working on legacy codes.


* **Debugger for Chrome**

This lets you debug your JavaScript code right from the Google Chrome browser


* **Docker**

You can create Dockerfiles on the fly with this extension. It also provides syntax highlighting, intellisense and much more.

Press <kbd>CMD + SHIFT + P</kbd> and search for *Add Docker files to workspace*


* **ESDoc MDN**

In certain scenarios, we tend to forget how a particular thing works. This is where this extension becomes useful. You don't need to launch your web browser to find out the syntax. All you need is to type

```js
//mdn [object].[method];
```


* **ESLint**

This integrates ESLint into VS Code to lint your codes. The project you are working on needs to have ESLint installed either locally or globally to take advantage of the features this extension offers.
To install ESLint locally, run `npm install eslint` or globally using
`npm install -g eslint`.
You would also need to create `.eslintrc` configuration file.

If you installed ESLint locally, run
`./node_modules/.bin/eslint --init`
or `eslint --init`
for global installation.


*  **GitLens**

GitLens boosts what you can achieve with Git. It helps you to do a lot more such as seamlessly exploring Git repositories, peeking into code revisions, authorship and much more.


* **Google Fonts**

Adding Google fonts just got easier with this extension. You no longer need to search for fonts on the browser. To access a list of fonts, press <kbd>CMD + SHIFT + P</kbd> and search for **Google fonts** to proceed.


* **HTMLHint**

This extension validates your HTML helping you to write [standards-compliant code](/writing-standards-compliant-html)


* **Import Cost**

Import Cost shows the impact of imported packages within the code. It helps measure performance bottlenecks.
* **Live Server**

This launches a local development server with live reload feature.
* **Peacock**

This extension gives you the ability to change the workspace color of your workspace. It is ideal when you have multiple VS Code instances and you want to quickly identify a particular instance.

After installing Peacock, click on the settings icon > settings,
select workspace settings tab, click on {} and paste the code below.

```sh
    {
        "workbench.colorCustomizations": {
            "activityBar.background": "#e90b8d",
            "activityBar.foreground": "#fff",
            "activityBar.inactiveForeground": "#b5b5b5",
        },
        "peacock.affectedElements": [
            "activityBar",
        ]
    }
```
You can also add `titleBar` and `statusBar` to the affectedElements and add color customizations for them within the colorCustomizations section.

To use one of the default colors, press <kbd>CMD + SHIFT + P</kbd>, type **peacock** and select your preferred theme. This overrides the color settings within the settings.json file defined for that workspace.


* **Prettier**

Formats your code and make it readable


* **Polacode**

As a technical writer, this comes in handy. It gives you an appealing screenshot of your code snippet.

```
Step 1: Press CMD + SHIFT + P
Step 2: Select Polacode 📸
Step 3: Copy some code
Step 4: Paste into Polacode view
Step 5: Click the lens-like button below the code view to save
```

* **TODO Highlight**

With a lot to work on which needs to be prioritized, sometimes, you may tend to forget tasks yet to be completed. TODO highlight makes these easily seen by highlighting them.


---
Feel free to drop what works for you on the comment section and share this article.