Impossible de désactiver eslint no-unused-expressions

Les scripts inclus avec les scripts react ne lisent pas spécifiquement les remplacements des fichiers eslintrc. Le raisonnement est expliqué dans un commentaire sur le problème :

Je ne pense pas que ce serait une bonne solution. Nous montrons de manière agressive les violations de charpie (dans le navigateur pour les erreurs, dans la console pour les avertissements), et nous n'avons donc inclus aucune règle de style dans la configuration.

Je pense que les règles de style doivent être traitées de manière complètement séparée, avant de vous engager. Ils ne doivent pas vous distraire pendant le développement ni être bruyants dans le navigateur ou le terminal.

Je pense que l'idée est que vous êtes libre d'utiliser votre propre configuration eslint pour ajouter des règles de style spécifiques à votre projet que vous vérifiez lors du développement; mais la build et le start ne le regarderont pas, et s'en tiendront à l'ensemble de règles conservatrices fourni avec des scripts de réaction à la place. Le fait que vous ayez trouvé un cas où ces règles conservatrices interfèrent avec votre flux de travail mérite probablement un rapport de problème avec create-react-app.

Je pense que la solution la plus simple consiste à utiliser la ligne // eslint-disable-line no-unused-expressions , comme vous l'avez mentionné. Mais il y a quelques autres options. Vous pouvez modifier l'expression pour convaincre eslint qu'elle n'est pas inutilisée, ou vous pouvez utiliser un outil comme patch-package pour modifier la configuration Webpack de react-scripts afin qu'il lise votre configuration eslint personnalisée.

Convaincre eslint que l'expression est utilisée

La configuration eslint utilisée par react-scripts se trouve dans node_modules/eslint-config-react-app/index.js . Vous pouvez voir qu'il définit certaines exceptions à la règle d'expressions non inutilisées:

$ yarn patch-package react-scripts

Les expressions ternaires sont autorisées. Vous pouvez combiner l'assertion de type avec un appel de fonction (qui ne doit jamais s'exécuter car l' action doit toujours être véridique):

$ yarn add --dev patch-package postinstall-prepare

Configuration du Webpack de React-scripts

Vous pouvez voir le code utilisé par node_modules/react-scripts/config/webpack.config.dev.js -scripts pour exécuter eslint dans node_modules/react-scripts/config/webpack.config.dev.js et à nouveau dans node_modules/react-scripts/config/webpack.config.dev.js :

"scripts": {
  "prepare": "patch-package"
}

Pour utiliser votre configuration personnalisée, vous devez changer la ligne useEslintrc: false en useEslintrc: true dans les deux fichiers. Ensuite, utilisez patch-package pour réappliquer automatiquement ce changement chaque fois que react-scripts est installé ou mis à jour. Ajoutez ce script à la section scripts dans package.json :

// First, run the linter.
// It's important to do this before Babel processes the JS.
{
  test: /\.(js|mjs|jsx)$/,
  enforce: 'pre',
  use: [
    {
      options: {
        formatter: require.resolve('react-dev-utils/eslintFormatter'),
        eslintPath: require.resolve('eslint'),
        // @remove-on-eject-begin
        baseConfig: {
          extends: [require.resolve('eslint-config-react-app')],
          settings: { react: { version: '999.999.999' } },
        },
        ignore: false,
        useEslintrc: false,
        // @remove-on-eject-end
      },
      loader: require.resolve('eslint-loader'),
    },
  ],
  include: paths.appSrc,
},

Installez patch-package et postinstall-prepare pour vous assurer que yarn exécute le script that prepare :

(action: empty) || noop();

Après avoir modifié les fichiers de configuration Webpack, exécutez cette commande pour enregistrer un correctif (notez que les commandes yarn ci-dessus auront annulé vos modifications, alors effectuez à nouveau les mêmes modifications avant d'exécuter cette étape):

'no-unused-expressions': [
  'error',
  {
    allowShortCircuit: true,
    allowTernary: true,
    allowTaggedTemplates: true,
  },
],

Cela créera un fichier avec un nom comme patches/react-scripts+2.1.1.patch . Vous devez archiver ce fichier dans le contrôle de version.

Comme Jesse l'a souligné dans sa réponse, il semble qu'ignorer .eslintrc est quelque chose de fait intentionnellement par les scripts de réaction. J'ai pu atteindre mon objectif en éjectant et en supprimant la section eslintConfig ajoutée par le script de rejet au package.json .. cependant je pense qu'il serait préférable de désactiver eslint inline et d'éviter l'éjection

Cela l'a résolu pour moi pour react-scripts:4.0.1

1. Supprimez eslintConfig de votre fichier package.json . Il devrait être sous la valeur de clé de vos scripts .

2. Maintenant, ajoutez simplement un .eslintrc.js à la racine de votre projet avec cette configuration:

module.exports = {
  extends: ["react-app", "react-app/jest"],
  overrides: [
    {
      "files": ["**/*.js?(x)"],
      "rules": {
          "no-unused-vars": [1, { "vars": "all", "args": "after-used", "ignoreRestSiblings": false }]
      }
    }
  ]
}

Vous pouvez également faire "no-unused-vars": [0] qui désactivera le peluchage pour les variables inutilisées

3. Après avoir ajouté cela, vous pouvez redémarrer votre serveur. react-scripts détectera que vous avez un fichier .eslintrc à la racine de votre projet et remplacera les valeurs par défaut par celles de ce fichier.