Eslint

En plus de Prettier qui prend en charge tout le formatage, vous voudrez peut-être appliquer certains styles de code qui se rapportent davantage à l'utilisation : par exemple, vous voudrez peut-être forcer les gens à ne jamais utiliser with qui est une syntaxe JS valide mais qu'il est déconseillé d'utiliser. ESLint entre en jeu ici. Il détectera pour vous ces problèmes.

Premièrement, installer npm install -D eslint et npm install -D eslint-config-prettier . Ensuite, vous pouvez configurer ses fonctionnalités.

Il existe une dizaine de fichiers de configiration prédéfini. Je vais utiliser le plus basique pour ce cours : eslint:recommended. Commençons par créer le fichier .eslintrc.json.

{
  "extends": ["eslint:recommended", "prettier"],
  "plugins": [],
  "parserOptions": {
    "ecmaVersion": 2022,
    "sourceType": "module",
    "ecmaFeatures": {
      "jsx": true
    }
  },
  "env": {
    "es6": true,
    "browser": true,
    "node": true
  }
}

Ceci est une combinaison des configurations recommandées de ESlint et prettier. Les fichiers JS et JSX pourront alors être analysés. Excécuter npx eslint src/App.js maintenant et vous allez surement avoir des erreurs. Vous pouvez le corriger automatique avec la commande npx eslint src/App.js --fix . Corrigez le reste des erreurs et revenez.

Dans le fichier package.json, rajouter un script pour exécuter les commandes ci-dessus:

{
  ...
  "scripts": {
    ...
    "format": "prettier --write \"src/**/*.{js,jsx}\"",
    "lint": "eslint \"src/**/*.{js,jsx}\" --quiet",
    ...
  },
  ...
}

Eslint peut fonctionner directement avec Visual Studio Code. Vous pouvez télécharger l'extension.