Introduction
ESLint est un outil complet et facile à utiliser pour lint le code source. Il analyse le code source et cherche à corriger les erreurs de style et de code pour prévenir les erreurs.
Comment l’utiliser
Les commandes sont lancées avec
Git Bash
Dans votre module NodeJS, lancer ce qui suit,
Il est très important de lancer la commande en utilisant le --save-dev
pour seulement installer les packages suivant en mode développement. C’est important pour des raisons d’optimisation et de sécurité.
npm install --save-dev eslint \
eslint-config-airbnb-base \
eslint-config-prettier \
eslint-plugin-import \
eslint-plugin-jest \
eslint-plugin-prettier
# Pour installer jest et prettier
npm install --save-dev jest prettier
La configuration utilisée est airbnb
Ces modules installés ont tout le nécessaire pour utiliser eslint
avec 2 plug-ins (Prettier et Jest)
Cet article couvrira en surface Prettier et Jest
Créer le fichier de configuration de ESLint
Méthode 1
Il se peut que votre projet utilise plusieurs modules (exemples: serverless, microservices, monorepo) et que vous vouliez utiliser eslint pour chacune d’elles et bien sûr standardiser la configuration, Et vous voulez éviter de devoir modifier tous les fichiers par module,
vous pouvez faire comme ceci:
Dans chaque module,
.eslintrc.json
{
"extends": [
"airbnb-base",
"plugin:jest/recommended",
"prettier",
"../.eslintrc.json"
],
"plugins": ["jest", "prettier"]
}
Puis dans le répertoire parent,
.eslintrc.json
{
"env": {
"commonjs": true,
"es2021": true,
"node": true,
"jest/globals": true
},
"parserOptions": {
"ecmaVersion": 12
},
"rules": {
"prettier/prettier": "error"
},
"settings": {
"jest": {
"version": 26
}
}
}
J’ai omis les rules.
Cette configuration de base permet de partager la configuration de eslint à travers vos modules. De plus, celle-ci va fonctionner avec Jest & Prettier
Pour configurer Prettier et Jest, je vous invite à regarder les autres articles à la section : Conclusion
Structure
packages/
module1/
.eslintrc.json
package.json
module2/
.eslintrc.json
package.json
module3/
.eslintrc.json
package.json
.eslintrc.json
Méthode 2
Dans chacun de vos modules, créer le fichier suivant, Cette approche utilise une configuration spécifique par module.
.eslintrc.json
{
"extends": ["airbnb-base", "plugin:jest/recommended", "prettier"],
"plugins": ["jest", "prettier"],
"env": {
"commonjs": true,
"es2021": true,
"node": true,
"jest/globals": true
},
"parserOptions": {
"ecmaVersion": 12
},
"rules": {
"prettier/prettier": "error"
},
"settings": {
"jest": {
"version": 26
}
}
}
Structure
packages/
module1/
.eslintrc.json
package.json
module2/
.eslintrc.json
package.json
module3/
.eslintrc.json
package.json
Méthode 3
À la racine du projet, créer le fichier suivant,
.eslintrc.json
{
"extends": ["airbnb-base", "plugin:jest/recommended", "prettier"],
"plugins": ["jest", "prettier"],
"env": {
"commonjs": true,
"es2021": true,
"node": true,
"jest/globals": true
},
"parserOptions": {
"ecmaVersion": 12
},
"rules": {
"prettier/prettier": "error"
},
"settings": {
"jest": {
"version": 26
}
}
}
Structure
api/
actions/
action1/
index.js
package.json
action2/
index.js
package.json
.eslintrc.json
Puis peu importe la méthode choisie, vous devez ajouter cette commande à votre package.json
package.json
{
"name": "@webuxlab/package-name",
"version": "1.0.0",
"description": "",
"main": "index.js",
"scripts": {
"lint": "eslint *.js",
},
"author": "Studio Webux",
"license": "ISC",
"dependencies": {},
"peerDependencies": {},
"devDependencies": {
"eslint": "^7.23.0",
"eslint-config-airbnb-base": "^14.2.1",
"eslint-config-prettier": "^8.1.0",
"eslint-plugin-import": "^2.22.1",
"eslint-plugin-jest": "^23.20.0",
"eslint-plugin-prettier": "^3.3.1",
"prettier": "^2.2.1",
}
L’IDE
J’utilise VS Code,
Il faut tout simplement installer 2 plug-ins,
- dbaeumer.vscode-eslint
- esbenp.prettier-vscode
En utilisant ces deux outils, vous allez être en mesure de corriger les erreurs au fur et à mesure.
Pour appliquer le linter au moment de la sauvegarde du fichier :
File > Preferences > Settings
Puis chercher eslint
et cliquer sur le premier lien Edit in settings.json
Il faut ajouter ce JSON :
...,
"editor.codeActionsOnSave": {
"source.fixAll.eslint": true
},
...
Sauvegarder le fichier et préférablement redémarrer VS Code.
À Partir de maintenant vous pouvez utiliser Shift + Alt + F
ou Shift + Command +F
pour linter vos fichiers.
Conclusion
Voir les articles suivants pour plus d’information:
- Prettier (Formatter le code en utilisant un fichier de configuration)
- Jest (tester le code source)
- Lerna (automatiser et simplifier la gestion des monorepos)
- Lint-staged (Lancer eslint lors du commit)
- Commit-lint (standardiser les messages des commit)
- Husky (Gestion des git hooks simplifiés)