Les outils Linting jouent un rôle crucial dans notre processus de développement lors de la création d'applications Web. Chaque développeur doit savoir ce qu'est un Linter, comment l'installer et le configurer, et comment l'utiliser efficacement, afin de garantir que les meilleures normes de code s'appliquent à notre projet.
À Imaginary Cloud, nous avions livré plusieurs Réagir applications pour nos clients, nous avons donc créé une application open source ESLint configuration - @imaginary -cloud/eslint-config-react à utiliser en interne et à partager avec la communauté. L'objectif est d'avoir une configuration centralisée que tout le monde peut utiliser, facile à installer et à configurer en utilisant les meilleurs standards de code JS de la communauté et en s'appuyant sur jsx code sans avoir à configurer un Linter.
Mais pourquoi utiliser la configuration Imaginary Cloud au lieu des autres configurations disponibles ? Parce que nous avons regroupé les configurations open source les meilleures et les plus utilisées dans un package centralisé, ce qui rend le processus d'installation et de configuration rapide et facile. Le principal avantage de l'utilisation @imaginary -cloud/eslint-config-react au-dessus du célèbre Airbnb la configuration est que nous utilisons également Airbnb config pour leurs meilleures pratiques de code ainsi que le style de code de Plus jolie pour avoir un code plus agréable et lisible.
À la fin de cet article, vous devriez être en mesure de savoir ce que sont les outils Linting et comment les installer/configurer ESLint et Plus jolie pour Réagir applications 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 Sondage GitHub Octoverse, JavaScript continue d'être le langage le plus utilisé au cours des cinq dernières années. Cela a permis à Écosystème JS pour grandir et évoluer en fournissant des outils plus nombreux et de meilleure qualité au développeur.
Pour garantir les bonnes pratiques et les normes, plusieurs outils d'analyse statique JavaScript ont vu le jour, tels que :
Avec une telle variété d'outils, le plus difficile est de sélectionner le meilleur linter pour notre projet. En tant que développeur, je pense que la caractéristique la plus importante de tout outil est sa capacité de configuration et sa facilité d'intégration. Donc, pour tout projet JavaScript, je choisirais ESLint et intégrez-le à Plus jolie. Cela devrait me donner tous les avantages d'un outil de linting hautement configurable avec un code formateur.
Lors de la création d'applications, il est important de disposer d'une bonne configuration d'outils automatisés et manuels garantissant les meilleures normes et la meilleure qualité de code. Chaque projet doit disposer d'un outil de peluchage pour répondre à ces besoins. Les deux outils sont configurables et fonctionnent bien ensemble, chacun ayant une responsabilité différente entre les erreurs de programmation et les erreurs stylistiques, ce qui facilite leur détection.
ESLint est l'un des outils de peluchage les plus utilisés et il y a une raison à cela. Hautement configurable, il est largement adopté par la communauté avec des centaines de configurations et de plugins open source. Il permet la configuration de plusieurs options telles que les règles de codage, les environnements, les options de l'analyseur, les configurations étendues et l'utilisation de plugins.
D'une part, ESLint est chargé de vérifier les erreurs de programmation, d'autre part, nous avons Plus jolie un code opiniâtre formateur capable de détecter d'éventuelles erreurs stylistiques. Il est livré avec certaines normes de style de code et est également facile à configurer. Il est facile à intégrer ESLint et possède des extensions d'éditeur de code qui peuvent formater le code lors de la sauvegarde !
À Imaginary Cloud nous développons des projets React pour nos applications riches en frontend. Il est donc devenu important d'automatiser autant que possible le processus de développement avec les outils appropriés en place. Ce besoin nous a conduit à créer un code source ouvert ESLint configuration appelée @imaginary -cloud/eslint-config-react à utiliser dans le cadre de nos projets. Les principaux avantages étaient une installation et une configuration rapides et les mêmes normes de code et le même style dans un projet différent.
La configuration d'un outil de pelage prend beaucoup de temps, surtout pour la première fois. Plusieurs configurations et plugins open source différents peuvent être utilisés et la sélection de ceux qui sont nécessaires peut être fastidieuse et la configuration manuelle d'un linter peut être sujette à des erreurs.
Nous avons recherché et regroupé ceux qui présentent les meilleures pratiques, normes et styles de code. Le résultat a donc été d'utiliser deux des plus utilisés ESLint configurations :
Plus jolie outil et ajoute des règles de format de style de code, cela s'applique également à jsx code provenant des applications React
Et comme nous travaillons beaucoup avec les applications React, nous avons certaines préférences en matière de styles de code. Nous avons donc également ajouté ces règles à cette configuration, ce qui facilite le passage d'un projet à l'autre et permet de fournir du code. Toutes les normes sont les mêmes puisque nous partageons la même configuration, oui !
Comme tout autre package JavaScript, ceux-ci peuvent être installés par npm ou fil. L'installation est assez simple. Les deux packages, ESLint et Plus jolie, doivent être répertoriées en tant que dépendances de développement dans le package.json dossier. Une façon de les ajouter rapidement au projet consiste à exécuter la commande sur le terminal
Cela installera et ajoutera ESLint et Plus jolie en tant que dépendances du projet et tout est réglé. Pour une meilleure expérience de développement, il est possible d'en installer un ESLint extension de votre éditeur de code permettant de mettre en évidence les erreurs de code dans l'éditeur lors du développement.
Il existe plusieurs manières de configurer ESLint comme expliqué dans le journal officiel documentation. La plus courante consiste à créer un .eslintrc (Les fichiers YAML et JS peuvent également être utilisés !) avec 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 @imaginary -cloud/eslint-config-react emballer et étendre notre ESLint configuration. Étant donné que cette configuration ajoute également les dépendances requises pour la configuration complète, nous avons utilisé la même approche que Airbnb configuration.
Pour installer la configuration, exécutez simplement la commande dans le terminal
npx est une commande fournie avec npm sur les dernières versions qui permettent npm packages à exécuter sans les avoir installés sur le projet. Le install-peerdeps le package s'exécutera et examinera les dépendances entre pairs de @imaginary -cloud/eslint-config-react et installez-les en tant que dépendances de développement en même temps que la configuration. Cette étape permettra d'enregistrer dans le projet package.json archiver automatiquement 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
Après l'installation @imaginary -cloud/eslint-config-react configuration, ajoutez les deux lignes suivantes à la package.json fichier
Tout est réglé et prêt à être utilisé. Cela montre à quel point l'installation et la configuration sont faciles. ESLint et Plus jolie pour un projet React en deux étapes seulement en utilisant @imaginary -cloud/eslint-config-react package de configuration.
Pour une configuration plus avancée, il est plus facile d'en créer une .eslintrc déposez et étendez le @imaginary -cloud/eslint-config-react configuration. Supprimez le Configuration ESL Int à partir du package.json archiver et vérifier ESLint documentation pour plus d'options.
.eslintrc fichier d'exemple
Le package.json le fichier doit avoir la ligne suivante
Pour utiliser le même Plus jolie configuration à partir de @imaginary -cloud/eslint-config-react en tant que solution autonome Plus jolie config installez le @imaginary -cloud/prettier-config colis
Pour terminer la configuration, assurez-vous que package.json le fichier a « plus joli » : « @imaginary -cloud/prettier-config » pour utiliser le bon Plus jolie configuration
Le moyen le plus simple est d'ajouter sous l'objet scripts dans le package.json déposez les deux scripts suivants :
Le script npm run lint lancera linter dans le projet en omettant les fichiers de .gitignore dossier. Si les meilleures pratiques, normes ou styles de code ne sont pas respectés dans notre code, l'erreur ou l'avertissement réel s'affichera. Il est extrêmement important de l'utiliser dans tout projet comportant un CI/CD configuration. Le script npm run lint:fix est utile pour corriger automatiquement toute erreur détectée, si le linter sait comment la corriger. Lorsque vous ajoutez une configuration linter à un projet existant, ce script peut aider à corriger de nombreuses erreurs, améliorant ainsi la qualité globale du code sans aucun effort.
Nous allons suivre la même approche que ci-dessus et ajouter un script pour exécuter notre Plus jolie
Exécution du script format d'exécution npm mettra en forme le style de code de tous les fichiers JavaScript. Comme ESLint, il possède d'incroyables extensions d'éditeurs de code qui permettent Plus jolie à exécuter sur les fichiers lors de leur enregistrement, en les formatant à la volée sans avoir à exécuter le script manuellement !
De plus en plus de frameworks et de bibliothèques apparaissent pour fournir des applications plus complexes et dynamiques. Il est donc extrêmement important de disposer des analyseurs de code statique appropriés. Cela garantit que les meilleures pratiques de code, les normes et les bons styles de code sont fournis. Cela améliore la lisibilité et la maintenabilité, ce qui facilite le développement de nouvelles fonctionnalités en peu de temps. Le respect des normes est également important car les développeurs peuvent travailler avec une base de code inconnue sans trop d'efforts.
Le temps est essentiel dans un environnement rapide. Il est donc important de disposer d'une bonne configuration d'outils permettant aux développeurs d'être plus efficaces et de passer plus de temps à développer de nouvelles fonctionnalités qu'à rechercher des erreurs dans le code.
Utilisation et exécution de nos outils de peluchage dans notre CI/CD les pipelines, ainsi que les tests automatisés et les révisions de code pour chaque nouveau morceau de code, sont importants. Ce sont les outils de base dont tout projet devrait disposer pour garantir que la meilleure solution est toujours fournie. Dans l'ensemble, ce sont de petits outils intelligents qui tirent parti de notre développement quotidien !
Vous avez trouvé cet article utile ? Ceux-ci vous plairont peut-être aussi !
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:
.webp)
.webp)
%20(2).webp)
