Introduction
Avant de construire une application, nous devons d’abord préparer l’environnement de développement avec des outils et des technologies qui facilitent le développement et le débogage. L’application Node.js ne fait pas exception, nous devons donc la configurer avec des paquets, des modules, des plug-ins et des outils qui améliorent la qualité de notre code et évitent les bogues et les erreurs. ESLint et Prettier sont deux de ces outils.
Qu’est-ce que ESLint ?
ESLint est un outil de linting JavaScript et TypeScript, c’est-à-dire qu’il analyse le code source et identifie les éventuels problèmes et erreurs de programmation. Il souligne les erreurs en rouge et les avertissements en jaune. Il est très utile pour couvrir les problèmes de style de codage.
Qu’est-ce que Prettier ?
Prettier est un formateur de code opiniâtre, il impose un style cohérent en analysant votre code et en le réimprimant avec ses propres règles qui tiennent compte de la longueur maximale des lignes, en enveloppant le code si nécessaire. Il est très utile pour garder votre code lisible et s’assurer que le format du code reste cohérent lorsque vous travaillez en équipe. Il prend également en charge de nombreux langages de programmation tels que : JavaScript, TypeScript, CSS, GraphQL, JSON et bien plus encore.
Configuration de ESLint et Prettier.
Tout d’abord, créez un nouveau dossier appelé app-eslint-prettier-config
et plongez dans ce dossier. Ouvrez votre terminal et initialisez votre application node.js en entrant cette commande :
npm init --y
Assurez-vous que vous avez déjà installé Node.js sur votre machine locale, puis installez toutes les dépendances nécessaires :
npm install eslint eslint-config-prettier prettier --save-dev
Configurez ESLint en exécutant cette commande :
eslint --init
Après avoir exécuté cette commande, vous devez configurer ESLint en sélectionnant certaines options de configuration. Utilisez la touche de déplacement vers le bas pour aller à vérifier la syntaxe et trouver les problèmes, comme le montre l’image suivante. Appuyez sur la barre d’espacement pour sélectionner, puis appuyez sur la touche Entrée.
Personnellement, j’aime beaucoup choisir aussi l’option pour améliorer le style de code
Ensuite, sélectionnez le type de module que vous voulez utiliser et le framework que vous voulez utiliser. Dans notre cas, nous allons travailler sur un projet Node.js, donc ne sélectionner aucun de ces éléments. Répondez à toutes les questions suivantes en suivant la même procédure.
Le résultat final ressemblera à ceci :
Maintenant, un fichier appelé .eslintrc.json
est créé. Remplacez tout le contenu de ce fichier par le code suivant :
{ "root": true, "parserOptions": { "ecmaFeatures": { "jsx": true }, "ecmaVersion": 13, "sourceType": "module" }, "extends": [ "eslint:recommended", "prettier", "plugin:react/recommended" ], "env": { "browser": true, "es2021": true, "node": true }, "rules": { "no-console": "error" } }
Maintenant, expliquons chaque paquet de code ajouté dans le fichier .eslintrc.json
:
- La propriété
root
indique que cette configuration est la racine du projet. En attribuanttrue
à cette propriétéroot
, ESLint est limité à un projet spécifique et arrête de chercher dans les dossiers parents. - Le
parserOptions
définit quelle version d’ECMASCRIPT vous utilisez dans votre code et si vous utilisez des modules ou non. - L’option
extends
permet d’ajouter des règles à la configuration. Ici, nous utilisons les règles recommandées par ESLint et les règles définies par le paqueteslint-config-prettier
. Ce paquet désactive toutes les règles ESLint qui sont inutiles ou qui pourraient entrer en conflit avec Prettier. - La propriété
env
définit le type d’environnement dans lequel votre code sera exécuté. Ici, il s’agit d’un Node.js alors nous mettons la propriété node à true. Vous pouvez également ajouter la propriétébrowser
et la définir surtrue
si vous travaillez également dans un environnement client comme React ou Vue. - La propriété
rules
vous permet de modifier ou d’ajouter des règles spécifiquement. Nous ajoutonsno-console : "error"
afin d’éviter d’utiliser les méthodes sur la console. Les messages de la console sont considérés comme étant utilisés à des fins de débogage et ne conviennent donc pas pour être envoyés au client. Mais si vous voulez autoriser les méthodes de la console, ajoutez cet exemple de code dans les règles :{ "allow" : ["warn", "error"] }
.
Il y a plus d’options disponibles, vous pouvez consulter la documentation officielle d’ESLint si vous êtes intéressé.
Maintenant, nous allons configurer Prettier.
Créez un fichier appelé .prettierrc.json
dans le répertoire racine de votre projet et ajoutez le code suivant à ce fichier :
{ "trailingComma": "es5", "tabWidth": 2, "semi": false, "singleQuote": true }
Ici, nous utilisons les options de configuration par défaut, vous pouvez en ajouter d’autres si vous le souhaitez. Consultez la documentation de Prettier pour plus de détails.
Nous avons fini de configurer ESLint et Prettier, mais nous devons ajouter quelques scripts dans le fichier package.json
afin de pouvoir exécuter ESLint et Prettier manuellement.
Code ajouté dans package.json :
"scripts": { "format:check": "prettier --check .", "format:write": "prettier --write .", "lint:check": "eslint", "lint:fix": "eslint --fix" }
Vérifiez si le formatage correspond aux règles de ce Prettier en utilisant :
npm run format:check
Forcer le formatage en utilisant cette commande :
npm run format:write
Lint votre code avec :
npm run lint:check
Corriger automatiquement les erreurs avec cette commande :
npm run lint:fix
Conclusion
Nous avons maintenant terminé la mise en place de notre application Node.js avec Eslint et Prettier. Vous pouvez trouver le code source complet dans ce dépôt :
https://github.com/alfreddagenais/kilukru-dev-eslint-prettier-node-app