Introduction
Il est très aisé d’initialiser un nouveau projet JavaScript, il suffit d’un éditeur de code, d’un environnement d’exécution, d’un terminal, et c’est parti !
De même, il est tout aussi simple de gâcher un projet Web, en rendant le code illisible, inmaintenable et ainsi en générant de la dette technique…
En effet, le JavaScript étant un langage très faiblement typé, tout est très vite permis :
Omission de points virgule en bout de ligne ;
Utilisation de simple et double quotes dans une même portion de code ;
Variable déclarée mais non utilisée ;
Lignes de code trop longues…
Cette souplesse du langage est à la fois une force, mais aussi une faiblesse, qui convient de combler en définissant des bonnes pratiques en amont du développement. Ainsi un code structuré correctement favorisera le travail collaboratif, mais aussi la scalabilité du projet.
Pour se faire, il existe deux outils incontournables, qui amèneront de la rigueur à votre projet Web : le linter et le formater.
Définitions
Linter : outil d’analyse de code permettant de détecter les problèmes de syntaxe.
Formater : outil permettant de mettre en forme le code en le rendant lisible.
Bien débuter son projet JavaScript
Pour illustrer le fonctionnement de l’un et l’autre outil, je vous propose de créer un nouveau projet JavaScript (sans framework) avec ViteJS
npm create vite@latest my-awesome-project -- --template vanillaTelle une recette de cuisine, installons les premières dépendances fournies avec ViteJS, puis ajoutons les nouvelles librairies, à savoir : ESLint et Prettier !
npm install --save-dev eslint prettier eslint-config-prettier eslint-plugin-prettierNB : Note pour plus tard, un projet échafauder avec ViteJS fonctionnement directement en mode module. C’est-à-dire que vos fichiers .js sont implicitement des fichiers .mjs. De même, il faudra explicitement nommer vos fichiers .cjs pour écrire avec la syntaxe CommonJS.
Une fois les dépendances du linter et du formater correctement installées, il faut encore créer leurs fichiers de configuration respectifs : .eslintrc.cjs et prettier.config.cjs
NB : Les fichiers de configuration ESLint et Prettier peuvent prendre plusieurs formes, dont les suivantes : .eslintrc.js, .eslintrc.json, .eslintrc.yaml, .prettierrc, .prettierrc.json, .prettierrc.yaml, .prettierrc.js, prettier.config.js ou encore .prettierrc.toml.
Configuration du Linter
Commençons par mettre en oeuvre le linter, afin de l’utiliser dans le cadre de notre nouveau projet.
Voici une première forme du fichier .eslintrc.cjs :
module.exports = {
env: {
browser: true,
es2022: true,
},
parserOptions: {
ecmaVersion: "latest",
sourceType: "module", // ESM
},
rules: {
"no-console": "warn",
},
};Cette première configuration suffit à l’exécution d’ESLint depuis un nouveau terminal pour contrôler la syntaxe des fichiers JavaScript : npx eslint . –ext .js
Je vous conseille d’inscrire cette exécution en tant que script de votre package.json : npm run lint
{
"name": "my-awesome-project",
"private": true,
"version": "0.0.0",
"type": "module",
"scripts": {
"dev": "vite",
"build": "vite build",
"preview": "vite preview",
"lint": "eslint . --ext .js"
},
"devDependencies": {
"eslint": "^8.57.0",
"eslint-config-prettier": "^9.1.0",
"eslint-plugin-prettier": "^5.1.0",
"prettier": "^3.2.0",
"vite": "^5.2.0"
}
}En ajoutant une instruction console.log() dans un fichier .js de votre projet, vous devriez avoir le résultat suivant à l’issue de l’invocation du linter.
/home/dmnchzl/my-awesome-project/counter.js
5:5 warning Unexpected console statement no-console
✖ 1 problem (0 errors, 1 warning)Configuration de Prettier
Passons maintenant à la mise en oeuvre du formater en éditant le fichier prettier.config.js :
module.exports = {
arrowParens: "avoid",
printWidth: 120,
semi: true,
singleQuote: true,
trailingComma: "none",
};NB : Prettier possède une configuration par défaut, ci-dessus je surcharge seulement les paramètres dont je souhaite disposer pour mon projet.
À l’instar d’ESLint, il suffit maintenant d’exécuter Prettier (npx prettier . *.js –write) afin de mettre en forme les fichiers JavaScript.
Il est également possible de sauvegarder un nouveau script dans votre package.json : npm run format
{
"name": "my-awesome-project",
"private": true,
"version": "0.0.0",
"type": "module",
"scripts": {
"dev": "vite",
"build": "vite build",
"preview": "vite preview",
"lint": "eslint . --ext .js",
"format": "prettier . *.js --write"
},
"devDependencies": {
"eslint": "^8.57.0",
"eslint-config-prettier": "^9.1.0",
"eslint-plugin-prettier": "^5.1.0",
"prettier": "^3.2.0",
"vite": "^5.2.0"
}
}ESLint x Prettier
Dernière étape, interfacer les deux outils ! C’est-à-dire contrôler la syntaxe du formater depuis le linter.
Pour cela, il suffit d’ajouter la configuration de Prettier, dans les règles ESLint (sans oublier d’activer le plugin) :
module.exports = {
env: {
browser: true,
es2022: true,
},
parserOptions: {
ecmaVersion: "latest",
sourceType: "module", // ESM
},
plugins: ["prettier"],
rules: {
"no-console": "warn",
"prettier/prettier": [
"warn",
{
arrowParens: "avoid",
printWidth: 120,
semi: true,
singleQuote: true,
trailingComma: "none",
},
],
},
};Et voilà ! Dorénavant ESLint, est capable d’alerter dès que le format de Prettier n’est pas respecté.
Essayez donc de supprimer un ou plusieurs point-virgules en bout de ligne, ou bien d’indenter vos lignes de manière désorganisée…
/home/dmnchzl/my-awesome-project/counter.js
2:18 warning Insert `;` prettier/prettier
3:22 warning Replace `(count)` with `count` prettier/prettier
4:20 warning Insert `;` prettier/prettier
5:46 warning Insert `;` prettier/prettier
6:4 warning Insert `;` prettier/prettier
7:67 warning Insert `;` prettier/prettier
8:16 warning Insert `;` prettier/prettierVous savez maintenant que la rigueur d’un projet Web ne vient pas seul, et qu’elle repose également sur de nombreux outils, dont le linter et le formater.
Pour aller plus loin, je vous invite à installer les extensions ESLint et Prettier, en fonction de votre éditeur de code favori (Visual Studio Code pour ma part). Ainsi, vous bénéficierez de fonctionnalités supplémentaires, telles que la coloration syntaxique en cas de non-respect des règles de linting, ou encore pour mettre en forme automatiquement le code à l’enregistrement du fichier.
Enjoy 👍
Développeur FullStack passionné par l’informatique depuis plus d’une décennie…
J’ai commencé à développer des applications mobiles en Java puis en Kotlin pour Android. En découvrant NodeJS et le framework AngularJS (paix à son âme), je me suis trouvé une véritable passion pour le développement Web, mais surtout pour le langage JavaScript.
React, Vue, TypeScript, MongoDB, GraphQL, (S)CSS, etc… sont les technologies que j’apprécie de manipuler au quotidien. Aujourd’hui, je conçois et maintiens des applications et sites Web, de A à Z (depuis les APIs jusqu’au rendu visuel). J’accorde également une attention particulière à l’UI/UX, que je considère comme la pierre angulaire d’un projet réussi !
L’art du développement et la curiosité pour la nouveauté, me poussent à partager mes connaissances avec mes pairs, au travers d’articles, de conférences ou encore la formation.
Conscient de l’aspect chronophage du code, j’aspire à l’avenir à gérer des projets informatiques de toutes tailles. En attendant, j’avance dans la vie la tête pleine d’idées nouvelles, le regard tourné vers le Web !