DEV Community

Willane Paiva
Willane Paiva

Posted on

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:

Screenshot for visual studio code on personal computer

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.

Screenshot for visual studio code command option, showing an input field and the option 'Preferences: Open Keyboard Shortcuts (JSON)' highlighted

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"
  }
]
Enter fullscreen mode Exit fullscreen mode

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

Screenshot for visual studio code command option, showing an input field and the option 'Preferences: Open Settings (JSON)' highlighted

In the JSON file, add the following options:

  "window.titleBarStyle": "custom",
  "workbench.activityBar.visible": false,
  "editor.minimap.enabled": false,
Enter fullscreen mode Exit fullscreen mode

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'",
Enter fullscreen mode Exit fullscreen mode

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 folder disabled on vscode

Compact Folders enabled:
Compact folder enabled on vscode

    "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"
    }
Enter fullscreen mode Exit fullscreen mode

4. Adding extensions

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

4.1 General:

Screenshot for Color Highlight on Marketplace vscode

Screenshot for EditorConfig on Marketplace vscode

Screenshot for Eslint on Marketplace vscode

Screenshot for Highlight Matching Tag on Marketplace vscode

Screenshot for Image Preview on Marketplace vscode

Screenshot for Imoport Cost on Marketplace vscode

Screenshot for GitLens on Marketplace vscode

Screenshot for vscode-styled-components on Mricrosoft store

4.2 React Development:

4.3 Themes:

Screenshot for Panda Theme on Marketplace vscode

Screenshot for Lukin Theme on Marketplace vscode

Screenshot for Eva Theme on Marketplace vscode

Screenshot for Material Icon Theme on Marketplace vscode

4.4 Flutter:

Screenshot for Awesome Flutter Snippets on Marketplace vscode

Screenshot for Dart on Marketplace vscode

Top comments (0)