Qu'est-ce que le peluchage et comment peut-il vous faire gagner du temps?

L'un des plus grands défis du développement logiciel est le temps. C'est quelque chose que nous ne pouvons pas facilement obtenir plus, mais le peluchage peut nous aider à tirer le meilleur parti du temps dont nous disposons.

Alors, qu'est-ce que le peluchage?

lint , ou linter , est un outil qui analyse le code source pour signaler les erreurs de programmation, les bogues, les erreurs stylistiques et les constructions suspectes. //en.wikipedia.org/wiki/Lint(software)

En termes simples, un linter est un outil qui analyse votre code par programme dans le but de trouver des problèmes pouvant entraîner des bogues ou des incohérences avec la santé et le style du code. Certains peuvent même vous aider à les réparer!

Prenons par exemple l'exemple suivant:

const test = 'I am a test'; console.log(`Test: ${test}`); const test = 'Another one.';

Nous déclarons la constante testdeux fois, ce dont notre moteur javascript ne sera pas satisfait. Avec les paramètres de linter et la configuration de la montre appropriés, au lieu d'être pris plus tard comme une erreur lorsque le code s'exécute, vous obtiendrez immédiatement une erreur via votre linter en arrière-plan:

 10:9 error Parsing error: Identifier 'test' has already been declared 8 | const test = 'I am a test'; 9 | console.log(`Test: ${2}`); > 10 | const test = 'Another one.'; | ^

Il peut être assez évident que vous ayez 2 constdéclarations identiques étant donné qu'il ne s'agit que de 3 lignes, mais dans une application plus complexe, cela peut vous faire gagner beaucoup de temps à rechercher un bug embêtant qui n'est pas toujours évident.

À quoi tout le peluchage peut-il aider?

Beaucoup de choses, y compris mais sans s'y limiter:

  • Signaler les bogues dans votre code à partir d'erreurs de syntaxe
  • Vous donner des avertissements lorsque le code peut ne pas être intuitif
  • Fournir des suggestions pour les meilleures pratiques courantes
  • Garder une trace des TODO et FIXME
  • Garder un style de code cohérent

La plupart des choses auxquelles vous pouvez penser existent probablement déjà sous une forme ou une autre, et sinon, vous pouvez même créer des règles personnalisées qui correspondent à vos besoins!

Comment cela aide-t-il réellement ou pourquoi devrais-je m'en soucier?

Le principal thème sous-jacent de la liste ci-dessus est probablement le fait que ces problèmes seront immédiatement signalés. Ces problèmes ne vous envahiront plus au milieu de l'exécution de votre application ou ne causeront plus d'anxiété à quelqu'un lors d'une révision de code. Vous et votre critique ne lutterez plus sans cesse de manière passive et agressive à travers les commentaires sur l'opportunité d'inclure ou non un point-virgule à la fin des instructions JS (vous devriez?).

Tous ces moments qui vous empêchent d'être productif en raison d'une erreur de syntaxe idiote ou des micro-interactions que vous et vos coéquipiers ont pendant un examen prennent du temps. Ils s'additionnent et finissent par vous enlever le temps que vous pouvez consacrer à la correction d'un autre bogue ou au développement de la prochaine grande fonctionnalité de votre produit.

Alors, comment puis-je vraiment commencer?

Même s'il existe des linters pour la plupart, sinon tous, des autres langages traditionnels, aux fins de cet article, je vais me concentrer sur Javascript. Les mêmes principes s'appliquent, mais l'outillage peut être un peu différent.

Je vais expliquer comment vous pouvez vous installer pour le peluchage de base dans une application React. Vous pouvez facilement suivre en créant votre propre application React ou en utilisant mon démarreur Gatsby: //github.com/colbyfayock/gatsby-starter-sass#starting-from-scratch

Votre Linter

Pour commencer, nous avons d'abord besoin d'un linter. ESLint est probablement le plus populaire dans le monde Javascript. Votre linter sera en fait le moteur pour définir les règles et analyser vos fichiers à tester. ESLint est disponible en tant que package npm par lui-même et une fois installé, il vous permet de configurer un fichier de configuration de base et de démarrer avec certains outils de ligne de commande.

Ajoutons d'abord notre dépendance ESLint:

yarn add eslint -D

Nous l'installons en tant que devDependency(d'où le -Ddrapeau), car ce n'est pas quelque chose dont notre application a besoin pour s'exécuter. Une fois son installation réussie, ajoutons-le à notre package.jsonsous forme de script:

... "scripts": { ... "lint": "eslint . --ext .js" ... }, ...

Dans ce qui précède, nous exécutons notre linter sur tout le répertoire du projet sur n'importe quel fichier ayant une extension de .js. Si vous travaillez avec un grand projet avec de nombreux types de fichiers, peut-être même certains que vous ne voulez pas lint, vous pouvez changer cet indicateur ou être plus précis avec d'autres options.

Pour prendre en charge ESLint, nous devrons faire une dernière chose. Ajoutons un fichier à la racine de notre projet (probablement là où le vôtre package.jsonest) appelé .eslintrc.jset rendons le contenu du fichier simplement:

module.exports = {};

Une fois que vous êtes prêt, vous pouvez exécuter yarn lintet… obtenir une erreur.

C'est correct et attendu dans notre projet, alors passons à autre chose.

Votre analyseur

Un outil commun dans la chaîne pour les développeurs Javascript est Babel, qui vous permet d'écrire du code avec des fonctionnalités qui peuvent ne pas être prises en charge dans tous les navigateurs, telles que l'utilisation des fonctions fléchées, disponibles dans ES6, et d'autres conventions comme l'importation de fichiers via import.

Le code que vous écrivez peut déjà s'exécuter via Babel pour fonctionner dans un navigateur, mais cela ne s'applique pas à ESLint par défaut, donc ESLint vous permet de spécifier un analyseur qui permet au traitement de linting de regarder le même code que votre navigateur voit. Dans ce cas, nous voudrons utiliser l'analyseur ESLint de Babel qui nous est mis à disposition.

Pour configurer cela, nous voudrons d'abord installer notre dépendance:

yarn add babel-eslint -D

En règle générale, si vous utilisez, babel-eslintvous voudrez vous assurer qu'il babelest installé à côté, mais dans notre cas, Gatsby l'utilise déjà babel, nous n'avons donc pas nécessairement besoin de l'ajouter. Une fois la configuration terminée, nous voudrons mettre à jour notre .eslintrc.jsfichier de configuration avec de nouvelles options:

module.exports = { "env": { "browser": true, "node": true, "es6": true }, "parser": "babel-eslint" };

Ici, nous informons ESLint que notre environnement sera exécuté dans le nœud (précompilation de Gatsby), dans le navigateur (l'application), et il utilisera ES6. Cela aide ESLint à savoir comment exécuter votre code. De plus, nous souhaitons configurer notre analyseur pour être babel-eslint.

Une fois que nous sommes prêts à partir, courez à yarn lintnouveau et… bon, rien ne s'est vraiment passé.

Ceci est toujours attendu, car nous n'avons aucune règle définie!

Plugins pour votre code

Vous rédigez une application React? L'analyseur Babel peut vous aider à transformer votre code, mais vous pourriez avoir du mal à être productif, car ESLint a besoin de comprendre comment cela devrait fonctionner pour lint vos fichiers React.

Une partie de la beauté d'ESLint est qu'il vous permet de configurer des plugins qui ont la possibilité de créer et de définir des règles pour vous. Heureusement, avec notre analyseur Babel ci-dessus qui fait une partie du gros du travail, nous avons un plugin React disponible qui fait exactement cela et s'occupe de pelucher le JSX pour nous.

Commençons par installer notre dépendance:

yarn add eslint-plugin-react -D

De plus, mettons à jour notre .eslintrc.jsfichier à nouveau:

module.exports = { "settings": { "react": { "version": "detect" } }, "env": { "browser": true, "node": true, "es6": true }, "plugins": [ "react" ], "parser": "babel-eslint" };

Ce que nous ajoutons ici est un paramètre qui détecte automatiquement la version de React que vous utilisez, ce qui est utile pour permettre à votre lint d'être analysé correctement, puis configurez notre plugin de réaction que nous avons installé ci-dessus.

For one last final time, we will run our lint script and get nothing:

Rules defined by others’s opinions

If you’re not really sure where to get started or just want to quickly get up and running, it’s recommend that you enable ESLint’s own recommended rules. Let’s add this to our .eslintrc.js config file:

module.exports = { "settings": { "react": { "version": "detect" } }, "env": { "browser": true, "node": true, "es6": true }, "plugins": [ "react" ], "extends": [ "eslint:recommended" ], "parser": "babel-eslint" };

And let’s run our yarn lint.

Woah! This will immediately give you a lot errors, it seems like something’s wrong.

Since we’re running a React app, we also want to make sure our linter understands the rules it should follow, so let’s also add our React plugin to the .eslintrc.js config setup:

 "extends": [ "eslint:recommended", "plugin:react/recommended" ],

Now if you run yarn lint, you get something a little more logical.

If you’re following along, it looks like our starter app had a misplaced semicolon and a missing prop in our propTypes validation for Layout.js. Writing this helped me fix my own repo! ?

Going further, if those don’t seem to fit your needs, lots of developers and teams have published their own configurations that ESLint allows you to easily tap into.

Some popular ones include:

  • Airbnb’s config
  • Semistandard
  • Google’s JS Style Guide

Not happy with the options available? You can even create and publish your own to either layer on top of others as a starting point or give it a go from scratch.

Let it do the work (most of it)

You don’t think I’m going to make you fix all of those thing yourself do you? Well, you may have to fix some, but let’s try to get ESLint to fix some of it for us.

If you noticed after we ran the command above, ESLint gave us an extra message:

So let’s give it a try! Let’s run:

yarn lint --fix

And what do you know, it now only gives us 1 linting error.

Turns out ESLint was able to fix our semicolon issue automatically, but we’ll still have to add pageName to our Layout’s propTypes manually, not too much of a lift.

Running one more time and finally nothing again! But this time because everything's looking good.

Go forth and write messy code!

Kidding ? The good news here, is now you can easily take a look at the general health of your codebase as well as hopefully fix most of it automatically. This is going to save a lot of headaches as you work with others on your team, and generally, it’s nice to have all of your code neat and tidy.

This post is just getting started. ESLint is a wide open book with tons of plugins and rules, and it’s not the only linting tool in the game. Play around and find what fits best for you and your team. The little time spent configuring it to your app will save you lots more time in the long run.

Other linting tools to check out

  • JSHint: an alternative to ESLint
  • Stylelint: a linting tool for CSS and CSS-like syntaxes like Sass
  • Awesome ESLint: a simple list of awesome configs, parsers, plugins, and other tools to boost your ESLint game
  • Webhint: linting tool for accessibility, speed, and more website best practices
  • A11y JSX Plugin: ESLint plugin for checking accessibility rules on JSX elements

Follow me for more Javascript, UX, and other interesting things!

  • ? Follow Me On Twitter
  • ?️ Subscribe To My Youtube
  • ✉️ Sign Up For My Newsletter

Originally published at //www.colbyfayock.com/2019/10/what-is-linting-and-how-can-it-save-you-time