Quelques notes sur VSCode

VSCode est sans doute l’éditeur le plus utilisé aujourd’hui par les développeurs web. Il a été créé et est maintenu par Microsoft. Il bénéficie d’un écosystème riche d’extensions pour (presque) toutes les langues et (presque) tous les langages de programmation.

Il est gratuit et en grande partie open-source (pour avoir un build totalement open-source, sans les trackers de Microsoft, il faut utiliser VSCodium).

L’interface

Il faut savoir reconnaître :

• la barre de titre (title bar)
• la barre de menu (menu bar avec les menus déroulants)
• la barre latérale (side bar qu’on peut afficher/cacher avec le raccourci Ctrl b sur PC et Cmd b sur macOS)
• la barre d’activité (activity bar le contenu de la barre latérale dépend de ce qui est activé dans la barre d’activité)
• la barre d’état (status bar, avec beaucoup d’informations, tout en bas)
• le panneau (panel, avec plusieurs onglet, notamment le terminal et les problèmes)
• la minimap (on verra la prochaine fois)
• la règle (on verra la prochaine fois)
• les groupes d’éditeurs (on verra la prochaine fois)

Quelques raccourcis importants

Raccourcis universels

La plupart des raccourcis universels sont disponibles dans VSCode :

• Ctrl c (ou Cmd c pour macOS) pour copier (pas besoin de séléctionner si on veut toute la ligne)
• Ctrl x (ou Cmd x pour macOS) pour couper (pas besoin de séléctionner si on veut toute la ligne)
• Ctrl v (ou Cmd v pour macOS) pour coller
• Ctrl , (ou Cmd , pour macOS) pour aller aux paramètres (settings)
• Ctrl w (ou Cmd w pour macOS) pour fermer un onglet
• Maj Ctrl T (ou Maj Cmd T pour macOS) pour rouvrir le dernier onglet fermé

et d’autres.

Raccourcis plus spécifiques

• Ctrl p (ou Cmd p pour macOS) permet d’accéder à une recherche approximative (fuzzy search) de tous les fichiers indexés par l’instance courante de VSCode. Il est fortement recommandé d’ouvrir un dossier avec VSCode
• Maj Ctrl p (ou Maj Cmd p pour macOS) permet d’accéder à la palette de commande : toutes les commandes de VSCode et de toutes les extensions installées sont disponible, aussi en recherche approximative
• Ctrl k, Ctrl o (ou Cmd k, Cmd o pour macOS) pour ouvrir un dossier dans l’instance courante de VSCode
• Maj Ctrl e (ou Maj Cmd e pour macOS) permet d’accéder à l’explorateur de fichier (file Explorer)
• Maj Ctrl f (ou Maj Cmd f pour macOS) permet d’accéder à la recherche de texte dans tous les fichiers indexés par l’instance courante (Find)
• Maj Ctrl d (ou Maj Cmd d pour macOS) permet d’accéder à l’exécuteur et débogueur (Debug)
• Maj Ctrl g (ou Maj Ctrl g pour macOS) permet d’accéder gestionnaire de contrôle de version (pour nous, Git, mais VSCode reconnaît aussi mercurial et d’autres VCS)
• Maj Ctrl x (ou Maj Cmd x pour macOS) permet d’accéder aux extensions (eXtensions)

Extensions

• Conventional Commits
• Live Share
• EditorConfig for VS Code

Plus tard, nous utiliserons :

• ESLint
• REST Client
• UnoCSS
• Vue Language Features (Volar)
• Vue Ecosystem Snippets

Paramètres à rajouter (fortement conseillé)

{
  // (...)
  "editor.bracketPairColorization.enabled": true,
  "editor.codeActionsOnSave": {
    "source.fixAll": "explicit"
  },
  "editor.codeLens": true,
  "editor.fontFamily": "'JetBrains Mono', Consolas, 'Courier New', monospace", // Uniquement si vous téléchargez la police JetBrains Mono
  "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" // Uniquement si vous téléchargez la police JetBrains Mono
  // (...)
}

Police à installer sur votre OS (conseillé)

JetBrains Mono

Cliquer sur "Télécharger la police", ouvrir le zip, trouver le dossier fonts/variable, double-cliquer sur le fichier JetBrainsMono[wght].ttf et cliquer sur le bouton "Installer". Fermer toutes les instance de VSCode et les rouvrir.