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⌘⇧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.
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.)
- Prettier (reformatage du code d'après une configuration précise)
- Markdownlint (vérification syntaxe Markdown)
Extensions fortement recommandées ⭐
- Project Manager (si vous jonglez entre plusieurs projets, c'est un must)
- Path Intellisense (autocomplétion des chemins)
- HTML CSS Support (autocomplétion et documentation des balises+attributs)
- IntelliSense for CSS class names in HTML (autocomplétion des classes HTML)
- GitLens (fonctions avancées Git dans VS Code)
- Error Lens (affiche les erreurs des linters directement dans la fenêtre de code)
Extensions suggérées 👍
- Beautify (remise en forme, à la demande, d'un code mal indenté/formaté)
- 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 (modifie les balises ouvrantes/fermantes en synchronisation)natif avec le paramètreeditor.renameOnType
Confort visuel :
- French Language Pack
- Select highlight in minimap (sélection visible dans la minimap)
- TODO Highlight (mise en avant des
TODO:
etFIXME:
) - Bracket Pair Colorizer (mise en avant de l'accolade fermante correspondante en CSS)
- Indent Rainbow (coloration des niveaux d'indentation)
- highlight-matching-tag (mise en avant de la balise fermante correspondante en HTML)
- Material Icon Theme (mieux visualiser les types de fichiers dans l'arborescence)
- Statusbar Error (affiche les erreurs des linters dans la barre basse et/ou dans la gouttière)
- Git Graph (version graphique des branches Git)
Extensions spécifiques ou avancées
- 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.
- Docker
- Vetur (pour Vue.js)
- Partial Diff
- Git History
- PHP Debug
- PHP Intellisense ou PHP Intelephense
- phpcs
Extensions détaillées
EditorConfig for VS Code
Editorconfig impose un formatage (espace vs tabs) et des règles de syntaxe directement dans l'éditeur, ainsi ce dernier s'adapte à chaque projet.
La configuration de Editorconfig se fait via un fichier .editorconfig
placé à la racine du projet dont voici un exemple recommandé :
# editorconfig.org
root = true
[*]
indent_style = space
indent_size = 2
end_of_line = lf
charset = utf-8
trim_trailing_whitespace = true
insert_final_newline = true
tab_width = 4
[*.{dtd,inc,php,phpt,rng,wsdl,xml,xsd,xsl}]
indent_size = 4
indent_style = space
[*.md]
trim_trailing_whitespace = false
Prettier
Prettier est un formateur de syntaxe permettant d'assurer une consistance tout au long du projet (sauts de ligne, guillemets simples ou doubles, etc.).
Prettier applique les consignes d'Editorconfig et peut être lui-même configuré via un fichier .prettierrc
à la racine du projet.
À la différence d'Editorconfig, Prettier ne modifie pas les réglages natifs de l'IDE, il ne fait qu'appliquer les règles lors de son application (activer, si souhaité, "editor.formatOnSave": true
dans les settings de Visual Studio Code).
Prettier, intégré dans un Workflow, peut également empêcher la validation de code ou le commit dans Git.
Exemple recommandé de fichier .prettierrc
:
{
"endOfLine": "lf",
"semi": false,
"arrowParens": "always",
"printWidth": 120,
"tabWidth": 2,
"useTabs": false,
"singleQuote": true,
"overrides": [
{
"files": ["*.css", "*.scss"],
"options": {
"singleQuote": false
}
}
]
}
ESLint
ESLint est un analyseur de code pour identifier les problématiques trouvés dans le code JavaScript (Vue, React, etc.) et les résoudre automatiquement.
L'extension VS Code ESlint avec ses réglages de base (sans configuration particulière) est suffisante dans la plupart des cas.
Au sein d'un Workflow, et lorsque des paramètres avancés sont nécessaires, ESlint est configuré via un fichier .eslintrc
).
Stylelint
Stylelint est un linter CSS (SCSS, LESS) apportant une configuration plus fine que les linters natifs de VS Code.
L'extension VS Code Stylelint avec ses réglages de base (sans configuration particulière) est suffisante dans la plupart des cas.
Au sein d'un Workflow, et lorsque des paramètres avancés sont nécessaires, Stylelint est configuré via un fichier .stylelintrc
) qui permet alors par exemple d'appliquer des fonctionnalités telles que la correction de l'ordre d'affichage des propriétés CSS (plugin stylelint-order
).
Markdownlint
Markdownlint est un linter pour langage Markdown et prend en compte toutes les règles à appliquer sur les fichiers .md
notamment les fichiers readme.md
présents dans chaque projet.
Extensions recommandées par projet
Dans Visual Studio Code un fichier .vscode/extensions.json
liste les extensions recommandées du projet (voir https://twitter.com/j_niewczas/status/1284157199741157376)
Exemple :
{
"recommendations": ["esbenp.prettier-vscode", "EditorConfig.EditorConfig", "mrmlnc.vscode-scss"]
}
Astuces
editor.minimap.renderCharacters = false
, et la minimap devient plus belleexplorer.openEditors.visible = false
, car on voit déjà les fichiers ouverts dans les onglets
Créer un snippet personnalisé (ex. “schnapsit”)
- Dans le menu :
Code -> Preferences -> User Snippets
(ouFichier -> Préférences -> Extraits Utilisateur
) - Choisir l’option
"New Global Snippets File"
(sauf s’il y a déjà un fichier de snippets global) - Donner un nom au fichier, par exemple
"schnapsum"
- Récupérer le code source (cliquer sur “raw”) de ce Gist : https://gist.github.com/raphaelgoetter/152a21e85c5310bcb5eec132983fce27
- Le coller dans le fichier (remplacer tout le code déjà existant par le Gist)
- 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!