Lors du développement d’un projet, il arrive souvent de partir sur de mauvaises bases en termes d’indentation et de normes de code. Pour y remédier, il existe des outils qui permettent de palier à ce genre de désagrément.
Avant de commencer, vérifiez que vous avez Node et NPM installés sur votre machine à l’aide de la commande node –v && npm –v ainsi que VS Code code –version. Puis instanciez un nouveau projet avec la commande npm init –y.
EditorConfig
EditorConfig permet d’avoir des styles de codes uniformes dans des projets où plusieurs développeurs interviennent sur les mêmes fichiers. Il ne nécessite pas d’installation car il est reconnu (nativement ou à l’aide d’un plugin) par les principaux IDE (Integrated Development Environment)
VS Code
Pour prendre en compte ce fichier dans VS Code, il faut installer le plugin officiel “EditorConfig for VS Code” (CTRL + SHIFT + X). Puis faites CTRL + SHIFT + P et tapez “Generate .editorconfig”.
Configuration
A la racine de votre projet, modifiez le fichier “.editorconfig” avec le contenu ci-dessous.
root = true [*] indent_style = tab indent_size = 2 end_of_line = lf charset = utf-8 trim_trailing_whitespace = true insert_final_newline = true
Dans ces quelques lignes, on souhaite des règles assez basiques :
- Concerne tous les fichiers ;
- Indentation en tabulations ;
- Indentation de 2 ;
- Parcourir le code de gauche à droite ;
- Utiliser le charset utf-8 ;
- Ne pas laisser d’espace vide en début et fin de ligne ;
- Insérer une ligne à la fin du code.
Créez un nouveau fichier quelconque. En bas à droite de VS Code, vous pouvez constater que “Tab Size” est utilisé ainsi que “UTF-8” et “LF”. Et lors de l’enregistrement du fichier, un saut de ligne en fin du fichier est ajouté.
Remarque : il est possible de configurer des règles pour chaque type d’extension et spécifier ou non un dossier cible.
Prettier
Prettier permet de mettre en place des règles d’indentation. Il fonctionne sur les langages tels que JavaScript, HTML, CSS, GraphQL, Markdown, YAML et même les fichiers Vue.
Installation
Ajoutez Prettier au projet avec la commande d’installation npm i –D prettier. Puis créez un nouveau fichier “.prettierrc” à la racine du projet.
Utilisation
Dans ce fichier, on déclare nos règles.
{ "semi": false, "singleQuote": true, "endOfLine":"auto" }
Ci-dessus, on ne veut pas de “semi” (diminutif de “semilicon” : point-virgule en français) et on veut également des singles quottes (“simples guillemets”).
VS Code
Installez l’extension “Prettier – Code formatter” puis créez un nouveau fichier JavaScript avec le code ci-dessous.
const name = « Nova Technology« ;
Corrigez cette ligne en faisant un clic droit sur le texte sélectionné pour accéder à l’option “Format Document”.
const name = ‘Nova Technology‘
Remarque : avec le plugin Vetur installé, il se peut que vous ayez un souci pour corriger les éléments présents dans la balise template de vos fichiers “vue”. Pour ce faire, vérifiez dans la configuration de Vetur : “file” -> “preferences” -> “Settings” puis tapez “vetur” et modifiez la valeur dans “Vetur > Format >Default Formatter HTML” afin de sélectionner “prettier”.
Il existe également une extension VS Code “Formatting Toggle” qui permet de formater automatiquement (ou non) son code lors de la sauvegarde du fichier concerné.
Eslint
Comme son nom l’indique, Eslint est un linter. Il permet de passer au peigne fin les erreurs commises lors de la rédaction du code en se basant sur un certain nombre de règles. Contrairement à Prettier, Eslint ne s’occupe que de la qualité du code et non du formatage des règles d’indentations.
Installation
Ajoutez Eslint au projet avec la commande d’installation npm i –D eslint.
Génération du fichier de configuration avec VS Code
Installez le plugin du même nom “Eslint”. Avec CTRL + SHIFT + P, tapez “ESLint: Create ESLint configuration”.
A la suite de ça, un fichier de configuration “.eslintrc.js” est créé à la racine du projet.
Des erreurs !
En reprenant le code ci-dessous.
const name = ["Nova", "Technology"] for (i = 0; i < name.length; i++) { console.log(name[i]); }
On aura 4 erreurs de Eslint nous signifiant que la variable “i” n’est pas déclarée.
En CLI (Command-line interface)
Ajoutez la ligne ci-dessous dans le fichier “package.json” (dans la partie “scripts”).
« lint »: « eslint *.js »
Puis lancez la commande npm run lint.
Cette option CLI peut être intéressante à utiliser avant l’envoi du projet sur un serveur Git.
Utiliser Prettier comme un linter avec Eslint
Pour afficher les erreurs de Prettier dans Eslint, il existe un module ou plus exactement, un plugin Eslint qui se nomme sobrement eslint-plugin-prettier.
Ajoutez ce dernier au projet npm i –D eslint-plugin-prettier.
Puis modifiez le fichier “.eslintrc.js”.
"plugins": ["prettier"], "rules": { "prettier/prettier": "error" }
Conclusion
Avec ces 3 outils vous voilà parés à coder avec rigueur et plus de sérénité ! Si la configuration vous semble fastidieuse, sachez qu’elle est généralement déjà configurée dans les frameworks tels que Vue, Angular, React, etc… Désormais, vous ne vous poserez plus la question “A quoi servent les fichiers “.editorconfig”, “eslintrc.js” et “.prettierrc ?”.
Sources :
- Site officiel de EditorConfig : https://editorconfig.org
- Site officiel de Prettier : https://prettier.io
- Site officiel de Eslint : https://eslint.org
- Plugin eslint-plugin-prettier : https://github.com/prettier/eslint-plugin-prettierHYPERLINK « https://github.com/prettier/eslint-plugin-prettier »
- Plugin VS Code EditorConfig for VS Code : https://marketplace.visualstudio.com/items?itemName=EditorConfig.EditorConfig
- Plugin VS Code Prettier – Code formatter : https://marketplace.visualstudio.com/items?itemName=esbenp.prettier-vscode
- Plugin VS Code ESlint : https://marketplace.visualstudio.com/items?itemName=dbaeumer.vscode-eslint
- Différences entre Prettier et ESLint : https://prettier.io/docs/en/comparison.html
- Prettier Config Generator : https://michelelarson.com/prettier-config
