eslint - 无法关闭 eslint no-unused-expressions

Question

我使用 create-react-app 创建了一个应用程序，并应用了 airbnb 规则。该应用程序还包含 redux 和 flow。

以下代码在 eslint 中抛出 no-unused-expressions 错误:

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

我试图关闭 eslintrc 中的规则，以便用 flowtype/no-unused-expressions 替换它

我的 .eslintrc.yml 的内容

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

使用此设置，编辑器 (vscode) 中不再显示 no-unused-expressions 错误。但是，一旦我用 npm run start 编译错误仍然存​​在:

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

导致它无法编译。

当然，如果我为该规则禁用本地 eslint，例如

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

一切都在编辑器和浏览器中工作。然而，正如我所说，我正试图用 flowtype one 替换 eslint 规则，以避免每次使用流类型断言时都必须禁用 eslint。

知道我做错了什么吗？

package.json 内容:

{
  "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"
  ]
}

Link of the project on github如果你想玩它

Answer 1

react-scripts 中包含的脚本特别不会从 eslintrc 文件中读取覆盖。推理在 issue comment 中进行了解释。 :

I don't think it would be a good solution. We aggressively show lint violations (in browser for errors, in console for warnings), and so we didn't include any style rules in the config.

I think style rules should be handled completely separately, before you commit. They shouldn't distract you during development or be loud in browser or terminal.

我认为这个想法是你可以自由地使用你自己的 eslint 配置来添加特定于你在开发过程中检查的项目的样式规则；但build和 start不会看它，而是会坚持与 react-scripts 捆绑在一起的保守规则集。您发现这些保守规则干扰您的工作流程的情况可能值得使用 create-react-app 提交问题报告。
我认为最简单的解决方案是使用 // eslint-disable-line no-unused-expressions线，正如你提到的。但还有其他几种选择。你可以修改表达式让 eslint 相信它没有被使用，或者你可以使用像 patch-package 这样的工具修改 react-scripts 的 Webpack 配置，以便它读取您的自定义 eslint 配置。
说服 eslint 使用该表达式
react-scripts 使用的 eslint 配置在 node_modules/eslint-config-react-app/index.js .您可以看到它为 no-unused-expressions 规则设置了一些异常(exception):

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

允许三元表达式。您可以将类型断言与函数调用结合起来(它不应该运行，因为 action 应该始终为真):

(action: empty) || noop();

修补 react-scripts 的 Webpack 配置
你可以在 node_modules/react-scripts/config/webpack.config.dev.js 中看到 react-scripts 用来运行 eslint 的代码再次在 node_modules/react-scripts/config/webpack.config.dev.js :

// 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,
},

要使用您的自定义配置，您需要更改行 useEslintrc: false至 useEslintrc: true在这两个文件中。然后使用 patch-package 在安装或更新 react-scripts 时自动重新应用该更改。将此脚本添加到 package.json 中的脚本部分:

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

安装 patch-package 和 postinstall-prepare 以确保 yarn 运行 prepare脚本:

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

编辑完 Webpack 配置文件后，运行此命令以保存补丁(请注意，上面的 yarn 命令将恢复您的更改，因此在运行此步骤之前再次进行相同的更改):

$ yarn patch-package react-scripts

这将创建一个名为 patches/react-scripts+2.1.1.patch 的文件。 .您应该将此文件 checkin 版本控制。