ESILV - WebDev

English

Français

English

Français

Appearance

Some Notes on VSCode ​

VSCode is probably the most used editor today by web developers. It was created and is maintained by Microsoft. It benefits from a rich ecosystem of extensions for (almost) all languages and (almost) all programming languages.

It is free and largely open-source (to have a fully open-source build, without Microsoft's trackers, you need to use VSCodium).

The Interface ​

You need to recognize:

  • the title bar
  • the menu bar (with dropdown menus)
  • the side bar (can be shown/hidden with the shortcut Ctrl b on PC and Cmd b on macOS)
  • the activity bar (the content of the side bar depends on what is activated in the activity bar)
  • the status bar (with a lot of information, at the bottom)
  • the panel (with several tabs, including the terminal and problems)
  • the minimap (we will see next time)
  • the ruler (we will see next time)
  • the editor groups (we will see next time)

Some Important Shortcuts ​

Universal Shortcuts ​

Most universal shortcuts are available in VSCode:

  • Ctrl c (or Cmd c for macOS) to copy (no need to select if you want the whole line)
  • Ctrl x (or Cmd x for macOS) to cut (no need to select if you want the whole line)
  • Ctrl v (or Cmd v for macOS) to paste
  • Ctrl , (or Cmd , for macOS) to go to settings
  • Ctrl w (or Cmd w for macOS) to close a tab
  • Shift Ctrl T (or Shift Cmd T for macOS) to reopen the last closed tab

and others.

More Specific Shortcuts ​

  • Ctrl p (or Cmd p for macOS) allows access to a fuzzy search of all files indexed by the current instance of VSCode. It is highly recommended to open a folder with VSCode
  • Shift Ctrl p (or Shift Cmd p for macOS) allows access to the command palette: all commands of VSCode and all installed extensions are available, also in fuzzy search
  • Ctrl k, Ctrl o (or Cmd k, Cmd o for macOS) to open a folder in the current instance of VSCode
  • Shift Ctrl e (or Shift Cmd e for macOS) allows access to the file explorer
  • Shift Ctrl f (or Shift Cmd f for macOS) allows access to text search in all files indexed by the current instance
  • Shift Ctrl d (or Shift Cmd d for macOS) allows access to the runner and debugger
  • Shift Ctrl g (or Shift Cmd g for macOS) allows access to the version control manager (for us, Git, but VSCode also recognizes Mercurial and other VCS)
  • Shift Ctrl x (or Shift Cmd x for macOS) allows access to extensions

Extensions ​

Later, we will use:

jsonc
{
  // (...)
  "editor.bracketPairColorization.enabled": true,
  "editor.codeActionsOnSave": {
    "source.fixAll": "explicit"
  },
  "editor.codeLens": true,
  "editor.fontFamily": "'JetBrains Mono', Consolas, 'Courier New', monospace", // Only if you download the JetBrains Mono font
  "editor.fontLigatures": true,
  "editor.guides.bracketPairs": "active",
  "editor.linkedEditing": true,
  "editor.rulers": [
    120,
    140
  ],
  "[git-commit]": {
    "editor.rulers": [
      72,
      100
    ],
    "workbench.editor.restoreViewState": false
  },
  "editor.stickyScroll.enabled": false,
  "editor.tabSize": 2,
  "emmet.includeLanguages": {
    "vue-html": "html"
  },
  "emmet.syntaxProfiles": {
    "html": {
      "inline_break": 2
    },
    "postcss": "css"
  },
  "emmet.variables": {
    "lang": "fr"
  },
  "eslint.format.enable": true,
  "eslint.validate": [
    "javascript",
    "typescript",
    "vue"
  ],
  "eslint.workingDirectories": [
    {
      "mode": "auto"
    }
  ],
  "terminal.integrated.fontFamily": "'JetBrains Mono', Consolas, 'Courier New', monospace" // Only if you download the JetBrains Mono font
  // (...)
}

JetBrains Mono

Click on "Download font", open zip, find the folder fonts/variable, double-click on the file named JetBrainsMono[wght].ttf and click on the "Install" button. Close all instances (windows) of VSCode and launch again VSCode.