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

编辑器和浏览器中的所有功能均正常工作。但是，正如我说过的，我正尝试用流类型1代替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中对推理进行了解释：

我认为这不是一个好的解决方案。我们会积极显示棉绒违规行为（在浏览器中显示错误，在控制台中显示警告），因此我们在配置中未包含任何样式规则。

我认为样式规则应在提交之前完全分开处理。他们不应该在开发过程中分散您的注意力，也不应该在浏览器或终端上大声喧

我认为您的想法是，您可以自由使用自己的eslint配置来添加特定于您在开发过程中检查的项目的样式规则；但是build和start不会看它，而是会坚持使用与react-scripts捆绑在一起的保守规则集。您发现这些保守规则会干扰您的工作流程的事实可能值得用create-react-app发布问题报告。

我认为，最简单的解决方案是使用// eslint-disable-line no-unused-expressions行，如您所述。但是还有其他两种选择。您可以修改表达式以说服eslint尚未使用，也可以使用patch-package之类的工具来修改react-scripts的Webpack配置，以便它读取您的自定义eslint配置。

说服使用了表达式

react-scripts使用的eslint配置在node_modules/eslint-config-react-app/index.js中。您可以看到它为no-unused-expressions规则设置了一些例外：

'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和node_modules/react-scripts/config/webpack.config.dev.js中看到react-scripts用于运行eslint的代码：

// 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。然后，在安装或更新react-scripts时，使用patch-package自动重新应用该更改。将此脚本添加到package.json中的脚本部分：

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

安装补丁程序包，然后进行后安装准备，以确保yarn运行该prepare脚本：

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

在编辑Webpack配置文件后，运行以下命令以保存补丁（请注意，上面的yarn命令将还原您的更改，因此在执行此步骤之前，请再次进行相同的更改）：

$ yarn patch-package react-scripts

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

Answer 2

正如Jesse在他的answer中所指出的那样，忽略.eslintrc似乎是由react脚本有意完成的。我已经能够通过弹出并删除由拒绝脚本添加到package.json的eslintConfig部分来实现我的目标。但是我觉得最好禁用eslint inline并避免弹出

Answer 3

这为我解决了`react-scripts:4.0.1`

从您的 eslintConfig 文件中删除package.json。它应该在您的scripts键值下。
现在，只需在项目的根目录中添加一个 .eslintrc.js ，并使用以下配置：

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

您还可以执行"no-unused-vars": [0]，这将关闭未使用的var的棉绒

添加后，您可以重新启动服务器。 react-scripts 将检测到您的项目根目录中有一个.eslintrc文件，并将用该文件中的默认值覆盖默认值。

无法关闭eslint不使用的表达式

3 个答案:

说服使用了表达式

修补react-scripts的Webpack配置

这为我解决了`react-scripts:4.0.1`

无法关闭eslint不使用的表达式

3 个答案:

说服使用了表达式

修补react-scripts的Webpack配置

这为我解决了react-scripts:4.0.1

这为我解决了`react-scripts:4.0.1`