VSCode Setup for development

This article is a compilation of setup that I made in VSCode to look better and have the functionalities that I consider the minimum necessary to development.

The final result:

Table of Contents

1. Improving visual hiding lateral bar, title bar and minimap
   1.1. Adding keyboard shortcuts
   1.2. Hiding the bars in settings

2. Adding JetBrains Mono with ligatures
   2.1. Installing the font on your computer
   2.2. Using it on VSCode

3. Additional Settings

4. Adding extensions

4.1 General
4.2 React Development
4.3 Themes
4.4 Flutter

PS: If you are using macbook, replace ctrl with cmd.

1. Improving visual hiding lateral bar, title bar and minimap

1.1. Adding keyboard shortcuts

Open the command search using the shortcut ctrl + shift + p and type 'keyboard shortcuts', then select 'Preferences: Open Keyboard Shortcuts (JSON)' as showed in the image bellow.

Then add the following code in the opened file:

// Place your key bindings in this file to override the defaults
[
  /**
   * Activity Bar
   **/
  {
    "key": "ctrl+k ctrl+e",
    "command": "workbench.view.explorer"
  },
  {
    "key": "ctrl+k ctrl+g",
    "command": "workbench.view.scm"
  },
  {
    "key": "ctrl+k ctrl+d",
    "command": "workbench.view.debug"
  },
  {
    "key": "ctrl+k ctrl+x",
    "command": "workbench.extensions.action.showInstalledExtensions"
  }
]

1.2 Hiding the bars in settings

Open the settings similar to how we did previously, using the shortcut ctrl + shift + p and searching for 'Preferences: Open Settings (JSON).

In the JSON file, add the following options:

  "window.titleBarStyle": "custom",
  "workbench.activityBar.visible": false,
  "editor.minimap.enabled": false,

2. Adding JetBrains Mono with ligatures

2.1 Installing the font on your computer

Head to https://www.jetbrains.com/lp/mono/, download the font and install it according to your operating system.

2.2. Using it on VSCode

Open the settings.json (explained in step 1.2) and add the following content inside the file:

    "editor.fontLigatures": true,
    "editor.fontFamily": "'JetBrains Mono','Droid Sans Mono', 'monospace', monospace, 'Droid Sans Fallback'",

3. Additional settings

The following settings are for improving git usage, editor update import, enable bracket pair (Check VSCode update for more info), format on save, define default formatter. "Compact folders" is for when the folder only have one nested folder, when disabled, won't show inline.

Compact Folders disabled:

Compact Folders enabled:

    "editor.suggestSelection": "first",
    "vsintellicode.modify.editor.suggestSelection": "automaticallyOverrodeDefaultValue",
    "git.enableSmartCommit": true,
    "git.confirmSync": false,
    "git.autofetch": true,
    "explorer.compactFolders": false,
    "editor.wordWrap": "on",
    "extensions.ignoreRecommendations": true,
    "javascript.updateImportsOnFileMove.enabled": "always",
    "typescript.updateImportsOnFileMove.enabled": "always",
    "diffEditor.ignoreTrimWhitespace": false,
    "editor.bracketPairColorization.enabled": true,
    "editor.codeActionsOnSave": {
        "source.fixAll.eslint": true
      },
    "eslint.validate": [
      "javascript"
    ],
    "eslint.format.enable": true,
    "[typescriptreact]": {
      "editor.defaultFormatter": "dbaeumer.vscode-eslint"
    },
    "[javascript]": {
      "editor.defaultFormatter": "dbaeumer.vscode-eslint"
    }

4. Adding extensions

These are the main extensions that I'm currently using:

4.1 General:

• Color Highlight

• EditorConfig for VSCode

• ESLint

• Highlight Matching Tag

• Image Preview

• Import Cost

• Gitlens

• vscode-styled-components

4.2 React Development:

• ES7 React/Redux/GraphQL/React-Native snippets

4.3 Themes:

• Panda Theme

• Lukin Theme

• Eva Theme

• Material Icon Theme

4.4 Flutter:

• Awesome Flutter Snippets

• Dart