由于弹出后出现 lint 警告，无法编译 create-react-app答案

【问题标题】：Failed to compile create-react-app due to lint warnings after ejecting由于弹出后出现 lint 警告，无法编译 create-react-app
【发布时间】：2018-11-13 07:14:56
【问题描述】：

我一直在学习 React 课程。下一步一直使用npm run eject，以便可以使用css模块。

自从弹出我不能使用 npm start。该页面无法编译。出现一长串 linting 警告（实际上似乎来自 webpack 配置文件）。

我已经为这些和其他文件创建了一个 .eslintignore 文件：

./reactNotes.jsx
./nodeTest.js
./config
./scripts

但是我的代码编辑器（vs code）或 webpack 似乎都没有注意到这个文件。 eslint 是全局安装的。

我还研究了 eslint 的 webpack 配置，其中包含排除等选项：

  {
    test: /\.(js|jsx|mjs)$/,
    enforce: 'pre',
    use: [
      {
        options: {
          formatter: eslintFormatter,
          eslintPath: require.resolve('eslint'),
        },
        loader: require.resolve('eslint-loader'),
      },
    ],
    include: paths.appSrc,
    exclude: /config/
  }

VS Code 在我的用户设置中启用了 eslint。

如何设置 webpack（甚至是 vs 代码）来忽略目录和文件？

更新：这里是 .eslintrc：

{
    "parser": "babel-eslint",
    "extends": "react-app",
    "plugins": [
        "react",
        "jsx-a11y",
        "import"
    ],
    "rules": {
        "linebreak-style": [
            "error",
            "windows"
        ],
        "indent": [
            "error",
            4
        ],
        "react/prop-types": 0,
        "react/jsx-indent": 0,
        "jsx-a11y/click-events-have-key-events": 0,
        "jsx-a11y/no-noninteractive-element-interactions": 0,
        "max-len": 0,
        "arrow-body-style": 0,
        "react/jsx-indent-props": 0,
        "react/no-unescaped-entities": 0,
        "react/jsx-no-bind": 0,
        "arrow-parens": 0,
        "react/no-array-index-key": 0
    }
}

npm install 和重启浏览器也不起作用。

【问题讨论】：

标签： reactjs webpack eslint create-react-app

【解决方案1】：

在您的 eslintigonre 中，尝试更改

./config
./scripts

到

config/
scripts/

在 ESLint 的文档中，它统计：

忽略模式的行为符合 .gitignore 规范

你可以找到完整的规范here

【讨论】：

【解决方案2】：

Create-react-app 在内部使用 eslint 进行 lint，并且当 eslint 检查抛出错误时不会运行，如果您已单独配置 eslint（使用 config .eslintrc.js）然后弹出，它会开始使用该 eslint你已经配置的配置。我面临的问题是，在使用调试器时，它不会启动并抛出no-debugger 规则的异常。所以，我创建了一个单独的 eslint 配置，并将其命名为 test.eslintrc.js，在我的 package.json 中我做了： "lint": "eslint src -c test.eslintrc.js", 在"scripts" 标签内

您还可以使用 .eslintignore 并添加目录：配置/ 脚本/ src/serviceWorker.js

【讨论】：

另外，您可以修改eslintConfig 中的eslintConfig 并在其中添加您的规则，而不是单独的test.eslintrc.js 文件。

【解决方案3】：

loveky 的回答修复了 VS 代码。

要修复构建，请在包含 service worker 文件的 webpack.config 中添加一个排除属性：

  {
    test: /\.(js|jsx|mjs)$/,
    enforce: 'pre',
    use: [
      {
        options: {
          formatter: eslintFormatter,
          eslintPath: require.resolve('eslint'),
          emitError: false,
        },
        loader: require.resolve('eslint-loader'),
      },
    ],
    include: paths.appSrc,
    exclude: /(config|node_modules|registerServiceWorker.js|nodeTest.js|reactNotes.jsx|webpack.config)/,
  }

【讨论】：