在项目根目录下,您可以创建设置为的.env文件以扩展 ESLint 配置:EXTEND_ESLINTtrue
EXTEND_ESLINT=true
这也有效:
EXTEND_ESLINT = "true"
尝试使用create-react-app版本 3.4.1,即撰写本文时的最新版本。
例如,您可以覆盖 中的no-unused-vars规则package.json,如下所示:
...
  "scripts": {
    "start": "react-scripts start",
    "build": "react-scripts build",
    "test": "react-scripts test",
    "eject": "react-scripts eject",
    "lint": "eslint src"
  },
  "eslintConfig": {
    "extends": ["react-app"],
    "rules": {
      "no-unused-vars": "off"
    }
  },
...
现在运行 linter,例如,npm run lint即使您已将值分配给变量但从未在应用程序中使用它,您也不会看到任何警告,这是您通常会在默认设置中看到的警告。例如:
const App = () => {
  let myVar = 1; // Never used
  ...
}
注意: npm startandnpm run build等也将遵守扩展规则。
顺便说一下,原图package.json是这样的:
...
  "scripts": {
    "start": "react-scripts start",
    "build": "react-scripts build",
    "test": "react-scripts test",
    "eject": "react-scripts eject"
  },
  "eslintConfig": {
    "extends": "react-app"
  },
...
注意:另一种配置 ESLint 的方法是eslintConfig从package.json文件中删除条目并在项目根目录中创建.eslintrc或.eslintrc.json,如下所示:
{
 "extends": ["react-app"],
 "rules": {
   "no-unused-vars": "off"
 }
}
[更新]如果您发现 react-scripts 不遵守您对 ESLint 规则的更改,这很可能是由缓存引起的。目前这是该项目的一个未决问题。您可以手动禁用缓存,node_modules/react-scripts/config/webpack.config.js如下所示:
          use: [
            {
              options: {
                cache: true, // You can set it to false
                formatter: require.resolve('react-dev-utils/eslintFormatter'),
                eslintPath: require.resolve('eslint'),
                resolvePluginsRelativeTo: __dirname,
                // @remove-on-eject-begin
                ignore: isExtendingEslintConfig,
                baseConfig: isExtendingEslintConfig
                  ? undefined
                  : {
                      extends: [require.resolve('eslint-config-react-app')],
                    },
                useEslintrc: isExtendingEslintConfig,
                // @remove-on-eject-end
              },
请注意,此解决方法仅适用于您的本地开发。您很可能不需要为构建管道做任何事情,因为管道通常从头开始构建;所以那里没有这样的缓存问题。