Devenez quelqu’un de meilleur avec ESLint

Comment et pourquoi utiliser ESLint dans vos projets. Retrouvez le code sur https://github.com/xebia-france/moisdujs-eslint

Transcript

1. Devenez quelqu’un de meilleur avec ESLint Antoine Le Taxin @ModuloM https://github.com/xebia-france/moisdujs-eslint.git
2. Le “Linting”, c’est quoi ?
3. @XebiaFr Définition @ModuloM #moisdujs • À l’origine un outil Unix, le linting désigne un processus qui vérifie le style du code ainsi que l’application de certaines règles et patterns. • Le style du code ou “code style” se réfère à la mise en forme du code. • Les patterns de code désignent la manière dont sont utilisées certaines features du langage.
4. Un peu d’histoire
5. @XebiaFr JSLint par Douglas Crockford @ModuloM #moisdujs Premier outil du genre en JS, a contribué à l’application de bonnes pratiques. Beaucoup d’imperfections : • La seule option pour une règle est l’erreur. • C’était LA vision de D. C., aussi bonne qu’elle soit, c’était un peu dogmatique (eval n’est pas toujours evil). • Pour s’attribuer les règles, beaucoup de versions sont sorties, mais il était très difficile de les partager ou de les mettre à jour. • Les spécifications ont eu du mal à suivre les évolutions des librairies, des frameworks et du langage.
6. @XebiaFr JSHint @ModuloM #moisdujs Plus souple, plus configurable, plus étendu et mieux maintenu que JSLint, il a été longtemps l’aternative préférée. • La seule option pour une règle est l’erreur. • Une qualité de documentation variable. • Noms des règles pas toujours évidentes ou inconsistantes donc difficiles à maintenir. • Inconsistance des valeurs pour activer ou désactiver une règles (true ou false…). • Difficulté pour écrire une règle personnalisée.
7. @XebiaFr Et JSCS alors ? @ModuloM #moisdujs C’est le principal concurrent d’ESLint. La version 3.0 est sortie de 14 avril 2016. Mais… Ce sera la dernière version, l’équipe va rejoindre le projet ESLint https://medium.com/@markelog/jscs-end-of-the-line-bc9bf0b3fdb2#.dtrmq8qki
8. ESLint est devenu le standard
9. @XebiaFr ESLint par Nicolas C. Zakas • Contributeur à la librairy YUI de Yahoo!, auteur de nombreux ouvrages, c’est un ingénieur qui connaît très bien Javascript. • Il plaide pour les bonnes pratiques et étudie les patterns les mieux adaptés au langage javascript. https://www.nczonline.net/
10. @XebiaFr Un outil extrêmement complet @ModuloM #moisdujs • Documentation très détaillée • Une énoooorme quantité de règles déjà faites. • Nommage “parlant” et configuration de chaque règle très poussée. • Plusieurs niveaux d’alertes (none, warning, error). • Très facile de faire ses propres règles. • Très facile de modifier finement l’application de certaines règles (par fichier, ligne). • De nombreuses compagnies ont publiées leurs configurations en tant que paquet npm afin de partager leurs bonnes pratiques (AirBnB, Google, Deezer). Il est extrêmement facile de les réutiliser et de les étendre. • Vous pouvez constituer votre propre set, le partager et l’étendre facilement.
11. @XebiaFr Comment commencer ? @ModuloM #moisdujs • npm install -D eslint • eslint --init • Choisir un type d’initialisation • Choisir le type du fichier eslintrc
12. Composition du fichier de configuration eslintrc
13. @XebiaFr env @ModuloM #moisdujs "env": { "browser": true, "es6": true }, • La clé “env” spécifie certaines variables globales prédéterminées en fonction de l’environnement. Il existe toute une liste et plusieurs peuvent être utilisées en même temps (ex. browser, node, mocha, mongo…)
14. @XebiaFr • La clé “parser” permet de spécifier un parser différent de celui de base et ajouter des règles spécifiques (pour ecmaScript 6 par exemple). parser @ModuloM #moisdujs "parser": "babel-eslint", "parserOptions": { "ecmaVersion": 6, "ecmaFeatures": { "experimentalObjectRestSpread": true, "jsx": true (...) }
15. @XebiaFr plugins @ModuloM #moisdujs "plugins": [ "react" ], • La clé “plugins” permet d’utiliser certains… plugins
16. @XebiaFr extend @ModuloM #moisdujs "extends": [ "airbnb" ] • La clé “extend” permet d’utiliser des ensembles de règles partagées par la communauté et par certaines compagnies (AirBnB, Google, Deezer)
17. @XebiaFr rules @ModuloM #moisdujs "rules": { "quotes": [ 2, "single" ] // erreur si double quote ,"semi": [ 1, "never" ] // avertissement si ; en fin de ligne , "no-lonely-if": [ 2, "never" ] // erreur si un if est imbriqué seul dans un else • La clé “rules” permet de lister les règles utilisées et de les paramétrer. • De surcharger des règles héritées d’un extend • Chaque règle à ses propres options • 0 = pas de prise en compte de la règle • 1 = warning • 2 = error
18. Gérer finement les règles
19. @XebiaFr .eslintignore @ModuloM #moisdujs • Permet d’exclure une liste de fichiers, de types de fichiers, des dossiers comme dans un .gitignore. dist/ test/
20. @XebiaFr Ajouter ou désactiver une règle dans un fichier @ModuloM #moisdujs Il est possible d’ajouter (pour surcharger par exemple) ou de désactiver une série de règles de manière ciblée. • Sur tout un fichier, mettre en tout début : /* eslint-(disable | enable) <nom de la règle> */ /* eslint-disable quote */ /* eslint-enable no-unused-vars */ • Sur une ligne spécifique, après le code : // eslint-disable-line <nom de la règle> var someES5 = 1 // eslint-disable-line prefer-const
21. Quand et où lancer le linting ?
22. @XebiaFr Quand et où lancer le linting ? @ModuloM • Dans l’IDE ou l’éditeur ◦ La plupart des outils de développement permettent d’associer votre eslintrc. • Avec Webpack (ou JSPM ou gulp ou etc.) : ◦ Le linting est fait en continu. ◦ On voit tout de suite les erreurs et on peut les corriger au fur et à mesure. ◦ Attention, il faut penser à regarder la console régulièrement car les erreurs empêchent la génération du bundle (avec Webpack par exemple), du coup le code ne changera pas tant que les erreurs ne seront pas corrigées. • Pré-commit : ◦ On vérifie le code avant de faire un commit. ◦ Cela permet de corriger les erreurs qu’on aurait laissé passer. npm i -D pre-commit (il existe plusieurs méthodes, ici c’est un paquet npm) #moisdujs
23. @XebiaFr Quand et où lancer le linting ? @ModuloM • Avec Webpack (ou JSPM ou gulp ou etc.) : ◦ Le linting est fait en continu. ◦ On voit tout de suite les erreurs et on peut les corriger au fur et à mesure. ◦ Attention, il faut penser à regarder la console régulièrement car les erreurs empêchent la génération du bundle (avec Webpack par exemple) et du coup le code ne changera pas tant que les erreurs ne seront pas corrigées. • Pré-commit : ◦ On vérifie le code avant de faire un commit. ◦ Cela permet de corriger les erreurs qu’on aurait laissé passer. npm i -D pre-commit (il existe plusieurs méthodes, ici c’est un paquet npm) https://github.com/observing/pre-commit (démo) #moisdujs
24. @XebiaFr Conclusion @ModuloM ESLint permet augmenter la qualité finale du code source ! • Un “code style” uniforme augmente la lisibilité, pour toute une équipe, du code source et des diffs de chaque commit. • S’assurer de l’utilisation des patterns décidés à l’avance ou accompagner les développeurs dans l’application d’une nouvelle pour optimiser le code. http://eslint.org/ Comparaison des outils de linting (un peu vieille) : https://www.sitepoint.com/comparison-javascript-linting-tools/ #moisdujs
25. @XebiaFr Merci ! Questions ? @ModuloM #moisdujs
26. Rejoignez-nous ! recrutement@xebia.fr blog.xebia.fr