Je pense que beaucoup de gens savent que dans les projets sérieux de nos jours, il est habituel d'utiliser des outils spéciaux pour vérifier les erreurs du code et correspondre au style adopté dans l'équipe.
Aujourd'hui, je veux aborder ESLint, un excellent outil pour vérifier les projets JavaScript pour les erreurs.
Je n'écrirai pas dans cet article sur des points évidents, tels que la configuration d'eslint pour votre projet: j'espère que vous pourrez lire la documentation sur cette partie vous-même et la connecter à vous-même. Et ici, nous allons discuter du «kit» supplémentaire que vous pouvez connecter à l'outil d'origine et de la façon dont vous pouvez le configurer pour le faire fonctionner à votre avantage.
Maintenant, nous utilisons la configuration préparée avec les règles de l'équipe airbnb comme base des règles. Leur norme d' écriture de code JavaScript compte désormais plus de 73 000 étoiles sur le github et est utilisée par de nombreuses organisations bien connues . Je pense que vous pouvez lui faire confiance.
Cette configuration connecte plusieurs packages importants au projet à la fois: eslint , eslint-plugin-import , eslint-plugin-react eslint-plugin-jsx-a11y et eslint-plugin-jsx-a11y , qui contiennent des règles supplémentaires pour valider votre code. Il convient de noter que ce fichier de configuration implique que vous utilisez React.js dans votre projet. Si ce n'est pas le cas, vous pouvez toujours installer la configuration eslint-config-airbnb-base , qui contient tout de même, à l'exception de la dépendance de plug-in pour React.js.
Examinons de plus près les packages de plug-in et découvrons quelles vérifications ils ajouteront à votre code de projet:
Ce plugin ajoutera une validation pour toutes vos importations à votre projet et garantira que toutes les dépendances importées sont présentes dans le projet, connectées dans un ordre pratique pour les travaux ultérieurs, etc.
Le plugin vous permet d'écrire du code plus correct sur React.js et vous évite les antipatterns courants, et vous oblige également à attribuer à tous vos composants des descriptions des types de données qu'ils acceptent.
Ce plugin s'applique également aux projets sur React.js et il est également extrêmement utile dans le travail. Cela vous obligera à écrire du HTML qui sera beaucoup mieux conforme aux normes d'accessibilité. Vos projets deviendront beaucoup plus pratiques pour les personnes handicapées.
En général, cet ensemble de règles rendra vos projets beaucoup mieux écrits et élargira vos connaissances sur les normes modernes d'écriture de code.
Mais dans notre monde, il n'y a pas seulement ces plugins pour eslint, mais bien d'autres. Il y a déjà un merveilleux projet génial-eslint sur le github à ce sujet. Ces derniers jours, j'ai décidé d'étudier ce sujet et je veux présenter à votre tribunal les choses les plus intéressantes qui ont été trouvées, testées personnellement et mises en œuvre dans mon projet actuel, sur lequel je travaille actuellement.
Plugins supplémentaires pour ESLint
Vous pouvez étudier le projet ci-dessus par vous-même et trouver personnellement des plugins intéressants, mais j'écrirai ici ce qui m'intéresse.
Un plugin conçu spécifiquement pour les projets Node.js. Je pense que beaucoup peuvent être utiles s'ils ne l'utilisent toujours pas à la maison.
Ce plugin vous fera "aimer" Lodash et réécrira la plupart des méthodes JS natives dans les méthodes de Lodash, et il contient également de nombreuses recommandations pour écrire du code qui utilise des chaînes lodash. En général, c'est très intéressant, mais jusqu'à présent, je ne l'ai pas implémenté simplement parce que nous devons maintenant réécrire trop de code pour respecter les règles de ce plugin. Mais pour l'avenir, je l'ai pris pour moi.
Ce plugin vous permet directement pendant le développement de vérifier la compatibilité du code que vous avez écrit avec les navigateurs actuels que vous ciblez actuellement dans votre projet. Pour le moment, je ne l'ai pas connecté à mon projet car nous utilisons maintenant le service polyfill.io , qui connecte automatiquement tous les polyfills nécessaires à chaque navigateur individuel, donc le problème de la compatibilité du code dans son ensemble est en quelque sorte absent. Mais pour l’avenir, je fais aussi une note pour moi-même: et si j’en ai besoin?
Un plugin qui vous indique comment optimiser vos expressions régulières. Pourquoi ne pas l'installer? Ce ne sera pas superflu, pensais-je.
L'une des découvertes les plus intéressantes de cette liste de kits de carrosserie supplémentaires. Ce plugin contient tout un ensemble de vérifications, grâce auxquelles il trouve des sections de code mal écrites, les mêmes fonctions et des constructions simplement dénuées de sens, et propose de les réécrire (il est dommage qu'il ne sache pas comment les réécrire: D). Si vous n'aimez pas décomposer votre code en petits blocs clairs et écrire des fonctions complexes sur plus de 100 lignes - attendez les avertissements de ce plugin que la complexité cognitive de ces endroits dans le projet est trop élevée pour un support à long terme et doit être réécrite.
Ce plugin vous jurera simplement lorsque vous voudrez écrire des boucles standard for ou while . De nos jours, il est depuis longtemps habituel d'utiliser forEach , map , reduce , etc. Je suis généralement d'accord avec l'auteur et j'ai branché le plugin sur mon projet.
Un plugin qui vous empêchera d'étendre les prototypes d'objets JavaScript standard. Dites non! Patchs de singe. Et c'est vrai.
Un plugin qui vous aide à écrire les bonnes promesses et vous protège des erreurs courantes lorsque vous travaillez avec elles. C'est aussi très utile, je pense.
Voici une liste de plugins à la fin. Qu'utilisez-vous dans vos projets pour tester votre code?
En conclusion, je vais laisser un exemple de configuration de notre fichier .eslintrc du projet en cours:
.eslintrc { "parser": "babel-eslint", "extends": [ "airbnb", "plugin:import/errors", "plugin:import/warnings", "plugin:jsx-a11y/recommended", "plugin:sonarjs/recommended", "plugin:promise/recommended" ], "plugins": ["react", "jsx-a11y", "optimize-regex", "sonarjs", "no-loops", "no-use-extend-native", "promise"], "rules": { "react/jsx-filename-extension": "off", "jsx-a11y/click-events-have-key-events": "off", "import/no-extraneous-dependencies": [ "error", { "packageDir": "./" } ], "allowTernary": true, "optimize-regex/optimize-regex": "warn", "sonarjs/cognitive-complexity": ["error", 30], "no-loops/no-loops": 2, "no-use-extend-native/no-use-extend-native": 2, }, "settings": { "import/resolver": "webpack" } }