Les outils de linting jouent un rôle crucial dans notre processus de développement d'applications web. Chaque développeur devrait savoir ce qu'est un linter, comment l'installer et le configurer, et comment l'utiliser efficacement pour garantir l'application des meilleures normes de code à nos projets.
Chez Imaginary Cloud, nous avons livré plusieurs applications React pour nos clients. Nous avons donc créé une configuration ESLint open-source, @imaginary-cloud/eslint-config-react , destinée à être utilisée en interne et partagée avec la communauté. L'objectif est de disposer d'une configuration centralisée, facile à installer et à configurer, intégrant les meilleures pratiques de code JS de la communauté et permettant le linting du code jsx sans la complexité liée à la configuration d'un linter.
Mais pourquoi utiliser la configuration d'Imaginary Cloud plutôt qu'une autre ? Parce que nous avons regroupé les configurations open-source les plus performantes et les plus utilisées dans un package centralisé, rendant le processus d'installation et de configuration rapide et simple. Le principal avantage d'utiliser @imaginary-cloud/eslint-config-react par rapport à la célèbre configuration Airbnb est que nous combinons les meilleures pratiques de code d' Airbnb avec le style de code de Prettier pour un code plus agréable et lisible.
À la fin de cet article, vous saurez ce que sont les outils de linting et comment installer et configurer ESLint et Prettier pour des applications React en quelques étapes seulement.
Le linting est le processus qui consiste à évaluer et à déboguer le code source en arrière-plan en l'analysant par rapport à un ensemble de règles relatives aux erreurs de programmation et de style. Cela permet au développeur de détecter les erreurs avant d'exécuter le code. Les règles appliquent également les meilleures normes et pratiques en matière de code, améliorent la qualité du code, le rendent plus lisible et plus facile à gérer.
Selon l'enquête GitHub Octoverse, le JavaScript reste le langage le plus utilisé depuis cinq ans. Cela a permis à l' écosystème JS de croître et d'évoluer, offrant aux développeurs des outils toujours plus nombreux et performants.
Pour garantir le respect des bonnes pratiques et des standards, plusieurs outils d'analyse statique JavaScript ont vu le jour, tels que :
Face à une telle variété d'outils, le plus difficile est de choisir le meilleur linter pour notre projet. En tant que développeur, j'estime que la caractéristique la plus importante de tout outil est sa configurabilité et sa facilité d'intégration. Pour tout projet JavaScript, je choisirais donc ESLint et je l'intégrerais avec Prettier. Cela me permet de bénéficier de tous les avantages d'un outil de linting hautement configurable associé à un formateurde code.
Lors du développement d'applications, il est essentiel de disposer d'une configuration robuste d'outils automatisés et manuels pour garantir les meilleures normes et une qualité de code optimale. Chaque projet doit intégrer un outil de linting pour répondre à ces exigences. Ces deux outils sont configurables et fonctionnent parfaitement ensemble, chacun ayant une responsabilité distincte entre les erreurs de programmation et les erreurs stylistiques, ce qui facilite grandement la détection des anomalies.
ESLint est l'un des outils de linting les plus utilisés, et ce n'est pas un hasard. Hautement configurable, il bénéficie d'une adoption massive au sein de la communauté, avec des centaines de configurations et de plugins open-source disponibles. Il permet de paramétrer de nombreuses options telles que les règles de codage, les environnements, les options de l'analyseur, l'extension de configurations et l'utilisation de plugins.
D'une part, ESLint est chargé de détecter les erreurs de programmation, tandis que d'autre part, nous avons Prettier un formateur de code rigoureux capable de repérer toutes les erreurs stylistiques. Il propose des normes de style de code prédéfinies et est également facile à configurer. Il s'intègre aisément à ESLint et dispose d'extensions pour éditeur de code permettant de formater le code à chaque sauvegarde !
Chez Imaginary Cloud nous développons des projets React pour nos applications frontend riches ; il est donc devenu crucial d'automatiser autant que possible le processus de développement avec des outils adaptés. Ce besoin nous a conduits à créer une configuration ESLint open-source appelée @imaginary-cloud/eslint-config-react pour l'utiliser dans nos projets. Les principaux avantages ont été une installation et une configuration rapides, ainsi que l'uniformisation des normes et du style de code sur l'ensemble de nos projets.
Configurer un outil de linting prend du temps, surtout la première fois. Il existe de nombreuses configurations et plugins open-source, et faire le bon choix peut s'avérer complexe. De plus, une configuration manuelle est souvent source d'erreurs.
Nous avons étudié et regroupé les meilleures pratiques, normes et styles de code. Le résultat repose sur l'utilisation de deux des configurations ESLint les plus répandues :
Prettier et ajoute des règles de formatage de style de code, également appliquées au jsx des applications ReactComme nous travaillons énormément sur des applications React, nous avons nos propres préférences en matière de style de code. Nous avons donc intégré ces règles à cette configuration, ce qui facilite le passage d'un projet à l'autre tout en garantissant une qualité de code constante. Comme nous partageons tous la même configuration, les standards sont uniformes, et ça, c'est génial !
Comme tout autre paquet JavaScript, ils peuvent être installés via npm ou yarn. L'installation est très simple. Les deux paquets, ESLint et Prettier, doivent être listés en tant que dépendances de développement dans le fichier package.json . Une façon rapide de les ajouter au projet consiste à exécuter la commande suivante dans le terminal :
npm install --save-dev eslint prettier
Cela installera et ajoutera ESLint et Prettier en tant que dépendances du projet, et tout sera prêt. Pour une meilleure expérience de développement, il est possible d'installer une extension ESLint dans votre éditeur de code afin de mettre en évidence les erreurs de syntaxe directement pendant le développement.
Il existe plusieurs façons de configurer ESLint comme expliqué dans la documentationofficielle. La méthode la plus courante consiste à créer un fichier .eslintrc (les fichiers YAML et JS peuvent également être utilisés !) contenant toutes les configurations souhaitées pour le projet. Pour y parvenir plus efficacement, plusieurs configurations open-source différentes peuvent être utilisées, comme expliqué ci-dessus.
Pour les projets React, il suffit d'installer le package @imaginary-cloud/eslint-config-react et d'étendre notre configuration ESLint . Étant donné que cette configuration ajoute également les dépendances nécessaires à la configuration complète, nous avons utilisé la même approche que la configuration Airbnb .
Pour installer la configuration, exécutez simplement la commande suivante dans le terminal
npx install-peerdeps --dev @imaginary-cloud/eslint-config-react
npx est une commande fournie avec npm sur les dernières versions qui permettent aux npm paquets d'être exécutés sans avoir à les installer dans le projet. Le install-peerdeps paquet s'exécutera et recherchera les dépendances de pairs de @imaginary-cloud/eslint-config-react pour les installer en tant que dépendances de développement avec la configuration. Cette étape enregistrera automatiquement dans le fichier package.json du projet toutes les dépendances nécessaires.
Avec les anciennes versions de npm (< v5.2), npx n'est pas disponible, mais il est possible d'installer la configuration en exécutant le script suivant dans le terminal :
(
export PKG=@imaginary-cloud/eslint-config-react;
npm info "$PKG@latest" peerDependencies --json | command sed 's/[\{\},]//g ; s/: /@/g' | xargs npm install --save-dev "$PKG@latest"
)
Après avoir installé @imaginary-cloud/eslint-config-react configuration, ajoutez les deux lignes suivantes au fichier package.json
"eslintConfig": {
"extends": "@imaginary-cloud/react"
},
"prettier": "@imaginary-cloud/prettier-config"
Tout est prêt à l'emploi. Cela montre à quel point il est facile d'installer et de configurer ESLint et Prettier pour un projet React en seulement deux étapes grâce au package de configuration @imaginary-cloud/eslint-config-react .
Pour une configuration plus avancée, il est préférable de créer un fichier .eslintrc et d'étendre la configuration @imaginary-cloud/eslint-config-react . Supprimez le eslintConfig du fichier package.json et consultez la ESLint documentation pour plus d'options.
.eslintrc fichier exemple
{
"extends": ["@imaginary-cloud/react"]
// plus d'options de configuration ici !
}
Le package.json doit contenir la ligne suivante
"prettier": "@imaginary-cloud/prettier-config"
Pour utiliser la même configuration Prettier que celle de @imaginary-cloud/eslint-config-react en tant que configuration Prettier autonome, installez le @imaginary-cloud/prettier-config package
npm install --save-dev @imaginary-cloud/prettier-config
Pour terminer la configuration, assurez-vous que le package.json contient "prettier": "@imaginary-cloud/prettier-config" pour utiliser la bonne Prettier configuration
La méthode la plus simple consiste à ajouter, dans l'objet scripts du fichier package.json , les deux scripts suivants :
"lint": "eslint ./ --ignore-path .gitignore",
"lint:fix": "npm run lint -- --fix"
Le script npm run lint exécutera le linter sur le projet en excluant les fichiers listés dans le fichier .gitignore . Si certaines bonnes pratiques, normes ou styles de code ne sont pas respectés, il affichera l'erreur ou l'avertissement correspondant. Il est essentiel d'utiliser cet outil dans tout projet disposant d'une configuration CI/CD . Le script npm run lint:fix est utile pour corriger automatiquement les erreurs détectées, lorsque le linter est en mesure de le faire. Lors de l'ajout d'une configuration de linter à un projet existant, ce script permet de corriger un grand nombre d'erreurs et d'améliorer la qualité globale du code sans effort.
Nous allons suivre la même approche que précédemment et ajouter un script pour exécuter notre Prettier
"format": "prettier --write \"{,!(node_modules)/**/}*.js\""Exécution du script npm run format formatera le style de code de tous les fichiers JavaScript. Tout comme ESLint, il dispose d'excellentes extensions pour éditeurs de code qui permettent à Prettier de s'exécuter lors de l'enregistrement des fichiers, les formatant à la volée sans avoir besoin de lancer le script manuellement !
De plus en plus de frameworks et de bibliothèques voient le jour pour permettre la création d'applications complexes et dynamiques ; il est donc primordial de mettre en place des analyseurs de code statique adaptés. Cela garantit le respect des meilleures pratiques, des normes et d'un style de code cohérent. Cette approche améliore la lisibilité et la maintenabilité, facilitant ainsi le développement rapide de nouvelles fonctionnalités. Le respect des standards est également essentiel pour permettre aux développeurs de travailler sur une base de code inconnue sans effort excessif.
Dans un environnement au rythme soutenu, le temps est une ressource précieuse. Il est donc crucial de disposer d'outils performants qui permettent aux développeurs de gagner en efficacité et de consacrer davantage de temps à la création de fonctionnalités plutôt qu'à la recherche d'erreurs dans le code.
L'utilisation et l'exécution de nos outils de linting dans nos CI/CD pipelines, parallèlement aux tests automatisés et aux revues de code pour chaque nouvelle modification, sont essentielles. Ce sont les outils fondamentaux que tout projet devrait intégrer pour garantir la livraison de solutions optimales. En somme, ce sont ces outils simples et ingénieux qui optimisent notre développement au quotidien !
Cet article vous a été utile ? Vous pourriez également apprécier ceux-ci !
Développeur full stack et passionné de JavaScript. Un front-end de premier ordre, c'est mon truc où j'aime expérimenter de nouvelles choses. Pêcheur en kayak, brasseur et buveur de bière !
People who read this post, also found these interesting:
