Visual Studio Code Video Tutorial: My VSCode Preferences

In this tutorial I invite you to discover my configuration on Visual Studio Code.

00:00 Introduction
01:00 Improve ergonomics
11:00 My theme
16:21 Extensions I use

My preferences

Rather than long talk here are the preferences I currently use when working on VSCode.

{
  "window.zoomLevel": 0, // Permet de zoomer, pratique si vous faites une présentation

  // Apparence
  // -- Editeur
  "workbench.startupEditor": "none", // On ne veut pas une page d'accueil chargée
  "editor.minimap.enabled": false,
  "breadcrumbs.enabled": false,
  // -- Sidebar
  "workbench.tree.indent": 15, // Indente plus pour plus de clarté dans la sidebar
  "workbench.tree.renderIndentGuides": "always",
  // -- Code
  "editor.occurrencesHighlight": false, 
  "editor.renderWhitespace": "trailing", // On ne veut pas laisser d'espace en fin de ligne

  // Thème
  "editor.fontFamily": "'JetBrains Mono', 'Fira Code', 'Operator Mono Lig', monospace",
  "editor.fontLigatures": true,
  "editor.fontSize": 16,
  "editor.lineHeight": 28,
  "workbench.colorTheme": "Tokyo Night",
  "workbench.iconTheme": "material-icon-theme",
  "workbench.colorCustomizations": {
    "[Tokyo Night]": {
      "editor.selectionBackground": "#3D59A1",
      "editor.selectionHighlightBackground": "#3D59A1"
    },
  },

  // Ergonomie
  "editor.wordWrap": "on",
  "editor.suggest.insertMode": "replace", // L'autocomplétion remplace le mot en cours
  "editor.acceptSuggestionOnCommitCharacter": false, // Evite que l'autocomplétion soit accepté lors d'un . par exemple
  "editor.formatOnSave": false,
  "editor.formatOnPaste": false,
  "editor.linkedEditing": true, // Quand on change un élément HTML, change la balise fermante
  "explorer.autoReveal": false,
  "explorer.confirmDragAndDrop": false,
  "workbench.editor.enablePreview": false, // Un clic sur un fichier l'ouvre
  "emmet.triggerExpansionOnTab": true, 
  // Fichiers
  "files.autoSave": "onFocusChange",
  "files.defaultLanguage": "markdown",
  "files.exclude": {
    "**/.idea": true
  },
  // Languages
  "javascript.preferences.importModuleSpecifierEnding": "js",
  "typescript.preferences.importModuleSpecifierEnding": "js",
  // Formatters
  "[javascript]": {
    "editor.defaultFormatter": "esbenp.prettier-vscode",
  },
  "[javascriptreact]": {
    "editor.defaultFormatter": "esbenp.prettier-vscode"
  },
  "[html]": {
    "editor.defaultFormatter": "vscode.html-language-features"
  },
  "[typescript]": {
    "editor.defaultFormatter": "esbenp.prettier-vscode"
  },
  "[json]": {
    "editor.defaultFormatter": "esbenp.prettier-vscode"
  },

  // Extensions
  "liveServer.settings.donotVerifyTags": true,
  "gitlens.codeLens.enabled": false,
  "gitlens.currentLine.enabled": false,
  "editor.unicodeHighlight.nonBasicASCII": false,
}

The extensions I use

Basically I find the editor quite complete and I tend to install as few extensions as possible (so as not to weigh down the editor) but here are some extensions that I use.

Rainbow brackets

Rainbow brackets allows you to highlight parentheses and braces in your code using different colors depending on the level of depth.

Gitlens

Gitlens allows to better highlight the integration of git but adds too much information by default. Also I recommend the following options.

{
  "gitlens.codeLens.enabled": false,
  "gitlens.currentLine.enabled": false,
}

GitGraph

Git Graph provides access to git history with a graphical interface that makes it easier to understand project history.

live-server

If you work on HTML / CSS / JavaScript, the Live Server extension allows you to quickly set up a web server that will automatically refresh the page when editing your files.

PHP

Personally I don’t use VSCode to work on PHP projects (I prefer to use PHPStorm which I find much more complete) but the Intelephense extension provides good autocompletion for PHP projects. You can also use PHPDebug which allows to use XDebug directly in VSCode.

Prettier to format

To automatically format my TypeScript and JavaScript code I generally use prettier in my projects. It is possible to integrate the trainer into the editor via the Prettier plugin which can then be set as the default trainer.

{
  "[javascript]": {
    "editor.defaultFormatter": "esbenp.prettier-vscode",
  },
  "[javascriptreact]": {
    "editor.defaultFormatter": "esbenp.prettier-vscode"
  },
  "[typescript]": {
    "editor.defaultFormatter": "esbenp.prettier-vscode"
  },
  "[json]": {
    "editor.defaultFormatter": "esbenp.prettier-vscode"
  },
}

My keyboard shortcuts

Keyboard shortcuts are generally quite personal, but in my case I mainly tried to reproduce the shortcuts that I used to use in my other editors (if you are on MacOS you can replace ctrl by cmd).

[
    // Etend la sélection
    {
        "key": "ctrl+d",
        "command": "editor.action.smartSelect.expand",
        "when": "editorTextFocus"
    },
    // Trouve toutes les occurences du mot sélectionné
    {
        "key": "shift+ctrl+d",
        "command": "editor.action.selectHighlights",
        "when": "editorFocus"
    },
    // Ouvre un fichier
    {
        "key": "ctrl+o",
        "command": "workbench.action.quickOpen"
    },
    // Crée un nouveau fichier
    {
        "key": "ctrl+n",
        "command": "explorer.newFile"
    },
    // Commandes
    {
        "key": "ctrl+p",
        "command": "workbench.action.showCommands"
    },
    // Masque / Affiche l'explorateur de fichier
    {
        "key": "alt+1",
        "command": "workbench.view.explorer",
    },
    {
        "key": "alt+1",
        "command": "workbench.action.toggleSidebarVisibility",
        "when": "explorerViewletVisible"
    },
    // Masque / Affiche la vue git
    {
        "key": "ctrl+k",
        "command": "workbench.view.scm"
    },
    {
        "key": "ctrl+k",
        "command": "workbench.action.toggleSidebarVisibility",
        "when": "view.workbench.scm.visible"
    },
    {
        "key": "ctrl+k",
        "command": "-workbench.action.terminal.clear",
        "when": "terminalFocus"
    },
    // Masque / Affiche le terminal
    {
        "key": "ctrl+t",
        "command": "workbench.action.terminal.toggleTerminal"
    },
    // Nettoie le terminal
    {
        "key": "ctrl+l",
        "command": "workbench.action.terminal.clear",
        "when": "terminalFocus"
    },
    // Ouvre le fichier courant dans l'explorer de l'OS
    {
        "key": "shift+ctrl+o",
        "command": "revealFileInOS",
    },
    // Navigation par symbole
    {
        "key": "ctrl+r",
        "command": "workbench.action.gotoSymbol"
    },
    // Reformatte le document
    {
        "key": "alt+ctrl+l",
        "command": "editor.action.formatDocument"
    }
]