Cours développement web ESILV

# Visual Studio Code

# Télécharger VS Code

Page de téléchargement de VS Code (opens new window).

# Quelques raccourcis clavier très généraux

J'espère que tout le monde connaît au moins les raccourcis pour

  • couper : Ctrl + x ou Cmd + x
  • copier : Ctrl + c ou Cmd + c
  • coller : Ctrl + v ou Cmd + v

Dans VS code, pas besoin de sélectionner une ligne pour la copier ou la couper en entier : il suffit d'être dessus sans sélection et de faire la bonne combinaison de touche.

Et tout le monde connaît les touches end ou fin (fn + -> sur Mac) et home ou début (fn + <- sur Mac)

  • Début de la ligne : home ou fn + <-
  • Fin de la ligne : end ou fn + ->
  • Début du fichier, de la page : Ctrl + home ou Cmd + fn + <-
  • Fin du fichier, de la page : Ctrl + end ou Cmd + fn + ->

# Quelques raccourcis clavier généraux

Ces raccourcis sont valables dans un certains nombre de logiciels :

  • Ctrl + n ou Cmd + n : Création nouveau fichier
  • Ctrl + , ou Cmd + , : Accès aux paramètres du logiciel (ici VS Code)
  • Ctrl + w ou Cmd + w : Fermeture de l'onglet en cours

# Quelques raccourcis clavier VSCode

  • Ctrl + p ou Cmd + p : Sélection de fichier
  • Ctrl + p Ctrl + p ou Cmd + p Cmd + p : Retour au fichier précédent (même si on vient le fermer)
  • Ctrl + b ou Cmd + b : Fermeture/ouverture de la barre latérale ("side bar")
  • Ctrl + 0 ou Cmd + 0 : Mettre le focus sur la barre latérale
  • Ctrl + 1 ou Cmd + 1 : Mettre le focus sur le code

# Les extensions

# Les extensions essentielles

# Les extensions importantes

# Les extensions pour les pros

# Les extensions pour apprendre

# Les extensions dédiés

# Améliorer l'interface par défaut

L'interface par défaut est grandement améliorable, notamment en gagnant de la place.

# Choisir un thème

Je n'ai pas vraiment de conseil là-dessus.

# Choisir une police à ligature

Je conseille les polices avec des ligatures, comme les suivantes :

Une fois téléchargée la police voulue, rajouter ceci dans les paramètres (cliquer sur l'icone du fichier pour faire apparaître les paramètres en JSON) :

 (...)
 "editor.fontFamily": "'Fira Code', Menlo, Monaco, 'Courier New', monospace",
 "editor.fontLigatures": true,
 (...)

# Enlever ce qui est inutile

Ces éléments distraient et prennent de la place sur l'interface :

# Le fil d'ariane

  • Enlever les breadcrumbs (ou pas) : Touche f1 puis taper breadcrumbs et valider sur Toggle Breadcrumbs

# La minimap

Enlever la minimap : Touche f1 puis taper minimap et valider sur Toggle Minimap

# Les éditeurs ouverts

Supprimer le volet "Open editors" ("Éditeurs ouverts") de la side bar Aller aux paramètres avec le raccourci Cmd + , (Mac) ou Ctrl + , (PC) puis chercher open editors et au paramètre "Explorer > Open Editors : Visible" mettre 0

# Changer la side bar de côté

Mettre la side bar à droite au lieu de la gauche : Touche f1 puis taper sidebar et valider sur Toggle Side Bar Position

# Raccourcis claviers pour changer temporairement l'interface

  • Ctrl +b ou Cmd + b affiche/cache la barre latérale (side bar)
  • Ctrl + alt + b Cmd + option + baffiche/cache la barre d'activité (activity bar)
  • Ctrl + j ou Cmd + j affiche/cache le panneau (panel)

# Aller plus loin dans les raccourcis clavier

  • Shift + Ctrl + ' ou Shift + Cmd + ' : Afficher/cacher le terminal intégré
  • Shift + Ctrl + m ou Shift + Cmd + m : Afficher/cacher l'onglet "problems" dans le panneau
  • Ctrl + (p,p) ou Cmd + (p,p) : Revenir au fichier précédent
  • Ctrl + p puis @ ou Cmd + p puis @ : Voir une "table des matières" du fichier en cours
  • Ctrl + p puis @: ou Cmd + p puis @: : Voir un autre type de "table des matières" du fichier en cours (d'où l'inutilité du fil d'ariane)

←