Gardez votre code propre avec ESLint

Apprenez les bases du linter JavaScript le plus populaire, qui peut vous aider à faire adhérer votre code à un certain ensemble de conventions de syntaxe, vérifiez si le code contient des sources possibles de problèmes et si le code correspond à un ensemble de normes que vous ou votre équipe définissez

ESLint est unJavaScriptlinter.

Qu'est-ce que le linter?

Bonne question! Un linter est un outil qui identifie les problèmes dans votre code.

L'exécution d'un linter sur votre code peut vous dire beaucoup de choses:

  • si le code adhère à un certain ensemble de conventions de syntaxe
  • si le code contient des sources possibles de problèmes
  • si le code correspond à un ensemble de normes que vous ou votre équipe définissez

Cela déclenchera des avertissements indiquant que vous ou vos outils pouvez analyser et vous fournir des données exploitables pour améliorer votre code.

ESLint

ESLint est un linter pour le langage de programmation JavaScript, écrit enNode.js.

C'est extrêmement utile car JavaScript, étant un langage interprété, n'a pas d'étape de compilation et de nombreuses erreurs ne sont probablement trouvées qu'au moment de l'exécution.

ESLint vous aidera à détecter ces erreurs. Quelles erreurs en particulier demandez-vous?

  • éviter l'infinibouclesdans leforconditions de boucle
  • assurez-vous que toutes les méthodes getter renvoient quelque chose
  • interdire les instructions console.log (et similaires)
  • vérifier les cas en double dans un commutateur
  • vérifier le code inaccessible
  • vérifier la validité JSDoc

et beaucoup plus! La liste complète est disponible surhttps://eslint.org/docs/rules/

La popularité croissante dePlus jolieen tant que formateur de code, la partie stylistique d'ESLint est devenue obsolète, mais ESLint est toujours très utile pour détecter les erreurs et les odeurs de code dans votre code.

ESLint est très flexible et configurable, et vous pouvez choisir les règles que vous souhaitez vérifier ou le type de style que vous souhaitez appliquer. La plupart des règles disponibles sont désactivées et vous pouvez les activer dans votre.eslintrcfichier de configuration, qui peut être global ou spécifique à votre projet.

Installez ESLint dans le monde entier

Utilisantnpm.

npm install -g eslint

# create a .eslintrc configuration file eslint --init

# run ESLint against any file with eslint yourfile.js

Installez ESLint localement

npm install eslint --save-dev

# create a .eslintrc configuration file ./node_modules/.bin/eslint --init

# run ESLint against any file with ./node_modules/.bin/eslint yourfile.js

Utilisez ESLint dans votre éditeur préféré

L'utilisation la plus courante d'ESLint est bien sûr dans votre éditeur.

Configurations ESLint courantes

ESLint peut être configuré de nombreuses manières différentes.

Guide de style Airbnb

Une configuration courante consiste à utiliser leStyle de codage JavaScript Airbnbpour pelucher votre code.

Courir

yarn add --dev eslint-config-airbnb

ou

npm install --save-dev eslint-config-airbnb

pour installer le package de configuration Airbnb et ajouter votre.eslintrcfichier à la racine de votre projet:

{
  "extends": "airbnb",
}

Réagir

Linting React code est facile avec le plugin React:

yarn add --dev eslint-plugin-react

ou

npm install --save-dev eslint-plugin-react

Dans votre.eslintrcajout de fichier

{
  "extends": "airbnb",
  "plugins": [
      "react"
  ],
  "parserOptions": {
    "ecmaFeatures": {
      "jsx": true
    }
  }
}

Utiliser une version spécifique d'ECMAScript

ECMAScriptchange de version chaque année maintenant.

La valeur par défaut est actuellement définie sur 5, ce qui signifie avant 2015.

Activez ES6 (ou version ultérieure) en définissant cette propriété dans.eslintrc:

{
  "parserOptions": {
    "ecmaVersion": 6,
  }
}

Forcer le mode strict

{
  "parserOptions": {
    "ecmaFeatures": {
      "impliedStrict": true
    }
  }
}

Des règles plus avancées

Un guide détaillé des règles est disponible sur le site officiel à l'adressehttps://eslint.org/docs/user-guide/configuring

Désactivation des règles sur des lignes spécifiques

Parfois, une règle peut donner un faux positif, ou vous pouvez être explicitement disposé à emprunter une route signalée par ESLint.

Dans ce cas, vous pouvez désactiver entièrement ESLint sur quelques lignes:

/* eslint-disable */
alert('test');
/* eslint-enable */

ou sur une seule ligne:

alert('test'); // eslint-disable-line

ou désactivez simplement une ou plusieurs règles spécifiques pour plusieurs lignes:

/* eslint-disable no-alert, no-console */
alert('test');
console.log('test');
/* eslint-enable no-alert, no-console */

ou pour une seule ligne:

alert('test'); // eslint-disable-line no-alert, quotes, semi

Plus de tutoriels devtools: