3
votes

Impossible de désactiver eslint no-unused-expressions

J'ai créé une application avec create-react-app et j'ai appliqué les règles airbnb. L'application contient également redux et flow.

Le code suivant renvoie l'erreur no-unused-expressions dans eslint:

{
  "name": "would-you-rather",
  "version": "0.1.0",
  "private": true,
  "dependencies": {
    "eslint-config-airbnb": "17.1.0",
    "eslint-config-flowtype-essential": "^1.0.0",
    "eslint-plugin-flowtype": "^3.2.0",
    "flow-bin": "0.89.0",
    "flow-typed": "2.5.1",
    "immutable": "4.0.0-rc.12",
    "prop-types": "15.6.2",
    "react": "16.6.3",
    "react-dom": "16.6.3",
    "react-icons": "3.2.2",
    "react-redux": "6.0.0",
    "react-redux-loading-bar": "4.1.0",
    "react-router-dom": "4.3.1",
    "react-scripts": "2.1.1",
    "redux": "4.0.1",
    "redux-immutable": "4.0.0",
    "redux-thunk": "2.3.0", 
    "semantic-ui-css": "2.4.1",
    "semantic-ui-react": "0.84.0"
  },
  "devDependencies": {
    "docdash": "1.0.1",
    "jsdoc": "3.5.5"
  },
  "scripts": {
    "start": "react-scripts start",
    "build": "react-scripts build",
    "test": "react-scripts test",
    "eject": "react-scripts eject",
    "jsdoc": "jsdoc --configure jsdoc.conf.json --recurse --private",
    "flow": "$(npm bin)/flow",
    "flow-typed": "$(npm bin)/flow-typed",
    "postinstall": "$(npm bin)/flow-typed install"
  },
  "browserslist": [
    ">0.2%",
    "not dead",
    "not ie <= 11",
    "not op_mini all"
  ]
}

J'essaie de désactiver la règle dans eslintrc afin de la remplacer par flowtype / no-unused-expressions

contenu de mon .eslintrc.yml

// eslint-disable-line no-unused-expressions

Avec ces paramètres, l'erreur d'expressions non inutilisées n'est plus affichée dans l'éditeur (vscode). Cependant, dès que je compile avec npm run start l'erreur est toujours là:

Expected an assignment or function call and instead saw an expression  no-unused-expressions

provoquant l'échec de la compilation.

Bien sûr, si je désactive localement eslint pour cette règle par exemple avec

extends:
    - airbnb
parser: babel-eslint
env:
    browser: true
    jest: true
globals:
    SyntheticEvent: true,
rules:
    no-unused-expressions: off
    react/prefer-stateless-function: off
    react/jsx-filename-extension: off
    react/jsx-one-expression-per-line: off

Tout fonctionne à la fois dans l'éditeur et dans le navigateur. Cependant, comme je l'ai dit, j'essaie de remplacer la règle eslint par la règle de type de flux exactement pour éviter d'être obligé de désactiver eslint chaque fois que j'utilise une assertion de type de flux.

Une idée de ce que je fais mal?

Contenu package.json:

const reducer = (state: string = '', action: Action) => {
    switch (action.type) {
        // cases
        default:
            (action: empty); // this is throwing eslint/no-unused-expressions
            return state;
    }
};

Lien du projet sur github si vous souhaitez jouer avec


5 commentaires

Je suis vraiment curieux de savoir quel est le but de cette ligne (action: empty) . Cela semble être une expression inutilisée. Cette conversion ne changera pas le type des références ultérieures à l' action dans ce bloc. Et il ne devrait pas être possible de convertir le type d'une variable en empty . Essayez-vous de forcer une erreur de type dans le cas default ?


@JesseHallett Hé, merci d'avoir demandé. L'utilisation de l'assertion de type vide dans le cas par défaut valide que chaque type d'action a été géré conformément à ladocumentation du flux . Il existe une règle d'expressions non inutilisées de type de flux qui ignore l'assertion de type, mais je crois comprendre qu'elle nécessite de désactiver d'abord la règle eslint no-unused-expressions, afin de la remplacer. Et il me semble incapable d'éteindre ce dernier.


Pouvez-vous s'il vous plaît montrer votre package.json (en particulier la section scripts)? Il semble que d'une manière ou d'une autre, ESLint est exécuté différemment pendant le npm run start et dans votre éditeur.


@LucaBorrione Oh chouette! Merci pour l'explication!


@PlatinumAzure J'ai ajouté le contenu de mon package.json à ma question


3 Réponses :


2
votes

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.


4 commentaires

Hé merci pour votre gros effort! J'ai vu la discussion sur la question que vous avez mentionnée aujourd'hui avant de lire votre réponse et je suis honnêtement un peu surpris de cette décision. J'ai soulevé un problème dans create-react-app, voyons si quelqu'un va suggérer quelque chose


J'ai essayé vos deux suggestions mais 1. (action: vide) || noop (); jette toujours la même erreur (j'ai vérifié node_modules / eslint-config-react-app / index.js et c'est le même que vous avez posté) 2. J'ai suivi vos instructions mais quand j'ai exécuté yarn patch-package react-scripts, il a échoué avec une erreur Erreur : Impossible de trouver un projet de flux dans le répertoire actuel ou dans l'un de ses répertoires parents! Veuillez exécuter cette commande à partir d'un projet Flow. ce qui est étrange car j'ai un fichier .flowconfig.


@LucaBorrione Cette erreur Flow est étrange. Avez-vous un script dans package.json qui exécute Flow lorsque les packages sont installés? Peut-être une post-installation ou un script de préparation? Si tel est le cas, vous pouvez essayer de le désactiver temporairement pendant que vous créez le correctif. Et utilisez-vous create-react-app v2 ou v1?


Oui, vous aviez raison: j'ai temporairement désactivé le script de post-installation, généré le patch, réactivé le script de post-installation, supprimé le dossier node_modules et exécuté à nouveau npm install .. il a appliqué le patch et tout fonctionne maintenant! Cependant, je crois fermement que cela devrait être fait par l'ARC directement en passant simplement useEslintrc à true afin de permettre de charger un eslintrc personnalisé au lieu de nous obliger à le patcher. Je ne vois vraiment pas pourquoi ils veulent imposer leurs règles de style.



0
votes

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


0 commentaires

0
votes

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

  1. 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.


0 commentaires