Guidelines : Visual Studio Code

Statut : Recommendation (REC)

L'Éditeur de code recommandé pour HTML, CSS, PHP, JS est Visual Studio Code. Il est libre (son noyau), gratuit et bénéficie de nombreuses mises à jour. Un package réellement libre est VSCodium (absence de la télémétrie Microsoft et utilisation d'un autre store d'extensions).

Cette présente convention rassemble les bonnes pratiques VS Code en production appliquées par l'agence web Alsacreations.fr. Elle a pour but d'évoluer dans le temps et de s'adapter à chaque nouveau projet.

Raccourcis incontournables

  • ⌘⇧P (Ctrl+Shift+P sur Windows) : Show Command Palette (permet de lancer une tâche d'un plugin)
  • ⌘P (Ctrl+P) : Quick Open, Go to File : recherche rapide de fichiers dans le projet
  • ⇧⌘L (Ctrl+Shift+L) : Select all occurrences of current selection : sélectionne toutes les occurences d'un mot
  • ⇧⌥↓ (Shift+Alt + ↓) : Copy line down : duplique la ligne courante
  • ⌘⇧F (Ctrl+Shift+F) : Find : rechercher dans le projet
  • ⌥⌘F (Ctrl+H) : Replace : remplacer dans le projet
  • ⌘, (Ctrl+,) : Settings : paramètres

Extensions Visual Studio Code

Des outils automatiques permettant de vérifier la qualité du code produit de manière continue sont nécessaires dans une équipe :

  • Pour ne pas écrire de code obsolète et avoir à gérer des bugs ou de la dette technique par la suite
  • Pour connaître les bonnes pratiques dès le départ
  • Pour harmoniser la syntaxe lorsque plusieurs personnes agissent sur les mêmes documents

Visual Studio Code dispose de vérificateurs de qualité (Linters) par défaut, au minimum dans les langages suivants : CSS, SCSS et PHP. La configuration par défaut de Visual Studio Code doit être préservée au maximum pour éviter les conflits sur des postes différents.

Lister les extensions : code --list-extensions

Extensions indispensables ❤️

  • EditorConfig (respect configuration tabs vs spaces à l'insertion, encodage, eol, etc)
  • ESLint (vérification syntaxe JavaScript)
  • Stylelint (vérifie la syntaxe CSS d'après un ensemble de règles)
  • SCSS Intellisense (autocomplétion SCSS : classes, variables, etc.)
  • Markdownlint (vérification syntaxe Markdown)
  • Note : Prettier crée des conflits avec ESLint (ex. sauts de ligne dans les balises). Il n'est donc généralement pas recommandé au sein de nos projets nécessitant ESlint.

Extensions fortement recommandées ⭐

Extensions suggérées 👍

Confort visuel :

Extensions spécifiques ou avancées

Configuration des extensions et linters

Pour tous les types de projets, ajouter un dossier .vscode/ à la racine, contenant :

  • un fichier .vscode/extensions.json listant les extensions recommandées pour le projet
  • un fichier .vscode/settings.json contenant les réglages pour activer les linters

Exemple de fichier .vscode/extensions.json recommandé :

{
  "recommendations": [
    "EditorConfig.EditorConfig",
    "dbaeumer.vscode-eslint",
    "stylelint.vscode-stylelint",
    "mrmlnc.vscode-scss",
    "mikestead.dotenv",
    "bradlc.vscode-tailwindcss",
    "wayou.vscode-todo-highlight"
  ]
}

Exemple de fichier .vscode/settings.json recommandé :

{
  "editor.defaultFormatter": "dbaeumer.vscode-eslint",
  "editor.formatOnSave": true,
  "editor.formatOnPaste": true,
  "editor.codeActionsOnSave": {
    "source.fixAll.eslint": true,
    "source.fixAll.stylelint": true
  },
  "stylelint.enable": true,
  "css.validate": false,
  "scss.validate": false,
  "stylelint.validate": [
    "css",
    "less",
    "postcss",
    "scss",
    "sass"
  ],
  "css.lint.unknownAtRules": "ignore",
  "scss.lint.unknownAtRules": "ignore"
}

Les détails de configuration des Extensions et Linters sont décrits au sein des Guidelines selon la typologie de projet :

Astuces

  • editor.minimap.renderCharacters = false, et la minimap devient plus belle
  • explorer.openEditors.visible = false, car on voit déjà les fichiers ouverts dans les onglets

Créer un snippet personnalisé (ex. “schnapsit”)

  1. Dans le menu : Code -> Preferences -> User Snippets (ou Fichier -> Préférences -> Extraits Utilisateur)
  2. Choisir l’option "New Global Snippets File" (sauf s’il y a déjà un fichier de snippets global)
  3. Donner un nom au fichier, par exemple "schnapsum"
  4. Récupérer le code source (cliquer sur “raw”) de ce Gist : https://gist.github.com/raphaelgoetter/152a21e85c5310bcb5eec132983fce27
  5. Le coller dans le fichier (remplacer tout le code déjà existant par le Gist)
  6. Enregistrer

Usage :

  • Aller dans n’importe quel fichier.
  • Taper “sch” ou “schnaps” puis Tabulation.
  • 3 choix sont proposés : version courte, moyenne ou longue.
  • Valider le choix avec Entrée.
  • Enjoy !