vscode.md

Ressource : Visual Studio Code

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

🔖 Autres astuces https://developer.mozilla.org/en-US/blog/vs-code-tips-tricks/

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, TypeScript et frameworks)
• Prettier (formatage automatique des fichiers à la sauvegarde)
• Markdownlint (vérification syntaxe Markdown)

Extensions fortement recommandées ⭐

• Project Manager (si vous jonglez entre plusieurs projets, c'est un must)
• Stylelint (vérifie la syntaxe CSS d'après un ensemble de règles, nécessite une installation de stylelint locale ou globale)
• SCSS Intellisense (autocomplétion SCSS : classes, variables, etc.)
• Tailwind CSS IntelliSense (autocomplétion des classes Tailwind)
• Path Intellisense (autocomplétion des chemins)
• CSS var complete (autocomplétion des variables CSS)
• Volar (extension indispensable pour tout projet pour Vuejs / Nuxt)
• HTML CSS Support (autocomplétion et documentation des balises+attributs)
• Git Graph (affichage de l'arbre de commits git)
• Error Lens (affiche les erreurs des linters directement dans la fenêtre de code)
• Docker (commandes Docker facilitées et sidebar affichant containers/images/volumes/networks...)
• Remote Development (pour connexion SSH entre autres, contient déjà Remote SSH et Remote Containers)

Extensions suggérées 👍

• Todo Tree (affichage des TODO et FIXME colorés et en arborescence)
• GitLens (fonctions avancées Git)
• Git Blame (voir ligne par ligne, lien vers les détails)
• DotENV (support de la syntaxe des fichiers .env)
• Auto Close Tag (fermeture automatiques des balises)
• Debugger for Chrome (très pratique pour JS / React / Vue)
• Debugger for Firefox
• Auto rename tag activer le paramètre natif (Ctrl+,) linkedEditing (modifie les balises ouvrantes/fermantes associées)

Confort visuel :

• French Language Pack
• Select highlight in minimap (sélection visible dans la minimap)
• Material Icon Theme (mieux visualiser les types de fichiers dans l'arborescence)
• Indent Rainbow (coloration des niveaux d'indentation)
• highlight-matching-tag (mise en avant de la balise fermante correspondante en HTML)
• Statusbar Error (affiche les erreurs des linters dans la barre basse et/ou dans la gouttière)
• Rainbow CSV (visualisation et édition SQL-like fichiers CSV)

Extensions spécifiques

• Thunder Client : client API Rest (équivalent à Postman, Insomnia)
• Live Sass Compiler : Surveille automatiquement les modifications de fichiers Sass dans le projet et les compile en CSS (ainsi qu'en version minifiée .min.css).
• Live Server : L'extension Live Server ouvre un serveur local dans une page du navigateur, rafraîchie automatiquement.
• i18n Ally pour les projets Vue/Nuxt avec internationalisation
• Partial Diff
• Git History

PHP

Configurer le chemin vers l'exécutable PHP php.validate.executablePath dans les paramètres.

• PHP Debug
• PHP Intellisense ou PHP Intelephense
• phpcs
• PHPDoc Comment

Configuration des extensions et linters

Pour tous les types de projets, prévoir à la racine :

• Un fichier de configuration .editorconfig
• Un fichier de configuration Prettier
• Un fichier de configuration .stylelintrc.json si Stylelint est utilisé
• Un fichier de configuration .tsconfig.json si Typescript est utilisé
• Un dossier .vscode/ contenant :
  • un fichier .vscode/extensions.json listant les extensions recommandées pour le projet
  • un fichier .vscode/settings.json contenant les réglages pour (dés)activer les linters

Tous ces fichiers sont fournis en exemple dans le dossier configs de nos guidelines.

Astuces de configuration

• "editor.minimap.renderCharacters": false, et la minimap devient plus belle
• "editor.renderWhitespace": "boundary" n'affiche que les espaces pertinents
• "editor.cursorBlinking": "smooth" tuning du clignotement du curseur
• "editor.cursorSmoothCaretAnimation": "on" tuning des transitions du curseur