Les Réglages utilisateur

Il existe deux types de réglages:

  • Réglages utilisateur (au niveau global)
  • Réglages du workspace (espace de travail spécifique au projet)

Réglages utilisateur (global)

Les réglages utilisateur au niveau global se trouvent dans un fichier nommé settings.json.

  • S’appliquent à toutes tes instances VS Code, quel que soit le projet ouvert
  • Stockés dans ton profil système (~/Library/Application Support/Code/User/ sur macOS)
  • Idéal pour tes préférences personnelles : fonte, thème, raccourcis, comportement général

Réglages Espace de travail

Les réglages propres à un Espace de travail (Workspace) se trouvent dans un fichier nommé .vscode/settings.json situé à la racine du projet.

  • S’appliquent uniquement au projet courant
  • Stockés dans le dossier du projet, donc versionnables avec Git
  • Écrasent les réglages Utilisateur en cas de conflit
  • Idéal pour les conventions d’équipe : indentation, formateur de code, linter

Modifier les réglages

On peut modifier les réglages de deux façons:

  1. À travers l’interface visuelle.
  2. Dans le code d’un fichier JSON.

L’interface visuelle

Pour l’interface visuelle: faire Code > Préférences > Paramètres (raccourci clavier: Cmd+virgule)

Cela ouvre la fenêtre des paramètres. On peut choisir entre l’onglet Utilisateur ou Espace de travail.

Le fichier JSON

Pour modifier les Réglages Utilisateur dans settings.json :

  • Faire la commande Maj+Cmd+P qui ouvre la Palette des commandes.
  • Saisir la commande: Préférences: Ouvrir les paramètres utilisateur (JSON).
  • On se retrouve avec un fichier Json qu’on peut éditer.

La palette des commandes

Si on veut ouvrir le JSON spécifique au workspace:

Désactiver les références à MDN

Par défaut, quand on édite un fichier HTML, VSCode affiche des informations au survol d’un élément. Elles viennent du site MDN (Mozilla Developer Network), une ressource d’apprentissage.

Informations affichées au survol

Ces fenêtres modales peuvent être désactivées.

Le réglage se trouve dans le profil utilisateur, on peut le trouver en cherchant avec le mot clé «Hover». Il y a des réglages spécifiques par language, comme HTML, CSS, LESS…

Les mêmes réglages en code:

"html.hover.references": false,
"less.hover.references": false,
"html.hover.documentation": false,
"less.hover.documentation": false,