构建 React 应用程序时不同的 ESLint 结果

Question

我是 React 开发的初学者。
我正在尝试解决我项目的所有 errors/warnings，但我在开发环境和生产环境之间得到了不同的结果。我没有在配置上区分它们。

运行 npm run lint 给我这个输出： npm run lint

运行 npm run build 给我这个输出： npm run build

我得到不同的 ESLint 输出是否正常？

这是我的 package.json:

{
  "name": "immersion-dashboard",
  "version": "0.1.0",
  "private": true,
  "dependencies": {
    "@reduxjs/toolkit": "^1.5.1",
    "@testing-library/jest-dom": "^4.2.4",
    "@testing-library/react": "^9.3.2",
    "@testing-library/user-event": "^7.1.2",
    "@types/jest": "^24.0.0",
    "@types/node": "^12.0.0",
    "@types/react": "^16.9.0",
    "@types/react-dom": "^16.9.0",
    "@types/react-redux": "^7.1.7",
    "bootstrap": "^5.1.3",
    "react": "^17.0.2",
    "react-bootstrap": "^2.0.2",
    "react-dom": "^17.0.2",
    "react-redux": "^7.2.0",
    "react-scripts": "4.0.3",
    "typescript": "~4.1.5"
  },
  "devDependencies": {
    "@typescript-eslint/eslint-plugin": "^5.4.0",
    "@typescript-eslint/parser": "^5.4.0",
    "cross-env": "^7.0.3",
    "eslint": "^7.32.0",
    "eslint-config-airbnb": "^19.0.0",
    "eslint-config-prettier": "^8.3.0",
    "eslint-import-resolver-typescript": "^2.5.0",
    "eslint-plugin-import": "^2.25.3",
    "eslint-plugin-jest": "^25.2.4",
    "eslint-plugin-jsx-a11y": "^6.5.1",
    "eslint-plugin-react": "^7.27.0",
    "eslint-plugin-react-hooks": "^4.3.0",
    "husky": "^7.0.4",
    "lint-staged": "^12.0.2",
    "prettier": "^2.4.1"
  },
  "eslintConfig": {
    "extends": "react-app"
  },
  "browserslist": {
    "production": [
      ">0.2%",
      "not dead",
      "not op_mini all"
    ],
    "development": [
      "last 1 chrome version",
      "last 1 firefox version",
      "last 1 safari version"
    ]
  },
  "scripts": {
    "start": "react-scripts start",
    "build": "react-scripts build",
    "test": "react-scripts test",
    "test:staged": "cross-env CI=true react-scripts test --env=jsdom --passWithNoTests",
    "eject": "react-scripts eject",
    "typescript": "tsc --project tsconfig.json --noEmit",
    "prettier": "prettier . --write",
    "lint": "eslint . --ext .ts --ext .tsx --fix",
    "lint-staged": "lint-staged"
  },
  "lint-staged": {
    "*.{ts,tsx,json,css}": "prettier --write",
    "*.{ts,tsx}": [
      "eslint --fix",
      "npm run test:staged"
    ]
  }
}

和我的.eslintrc.json:

{
  "env": {
    "browser": true,
    "es2021": true,
    "jest/globals": true
  },
  "extends": [
    "eslint:recommended",
    "plugin:react/recommended",
    "plugin:@typescript-eslint/recommended",
    "airbnb",
    "prettier"
  ],
  "parser": "@typescript-eslint/parser",
  "parserOptions": {
    "ecmaFeatures": {
      "jsx": true
    },
    "ecmaVersion": 12,
    "sourceType": "module"
  },
  "plugins": ["react", "@typescript-eslint", "jest"],
  "rules": {
    "import/extensions": [
      "error",
      "ignorePackages",
      {
        "ts": "never",
        "tsx": "never"
      }
    ],
    "react/jsx-filename-extension": [
      "warn",
      {
        "extensions": [".tsx"]
      }
    ],
    "no-use-before-define": "off",
    "@typescript-eslint/no-use-before-define": ["error"],
    "no-param-reassign": [
      "error",
      {
        "props": false
      }
    ],
    "no-console": "off",
    "@typescript-eslint/no-unused-vars": [
      "error",
      {
        "argsIgnorePattern": "^_",
        "varsIgnorePattern": "^_"
      }
    ]
  },
  "settings": {
    "import/resolver": {
      "typescript": {}
    }
  }
}

Answer 1

恐怕您正在运行使用不同配置的两个 ESLint 实例，让我解释一下原因。

创建 React 应用 ESLint

CRA 已经为您设置了 ESLint（除其他外）：

Under the hood, we use webpack, Babel, ESLint, and other amazing projects to power your app.

在 CRA 中，当您运行 start 或 build 命令时，会在内部安装 ESLint 和运行，因此您在开发时会在控制台中看到输出应用程序，或构建最终包。 You can also get the lint output in your editor。 CRA 已经包含 ESLint 的默认配置，包括几个插件。

你的项目 ESLint

您已经在您的项目中单独安装了 ESLint，并在您自己的项目中进行了设置 .eslintrc.json。那绝对没问题！这是对项目进行 lint 的常用方法。你运行这个 ESLint 的方式是通过你添加到脚本中的 lint 命令。

因此，当您运行 start 或 build 时，您正在使用 CRA 的 ESLint 实例和配置检查您的项目，但是当您运行 lint您正在使用 ESLint 实例和配置检查您的项目。他们的配置并非 100% 匹配，因此报告了不同的错误。

您可以检查运行ning npm ls eslint 安装了两个 ESLint 实例，您会看到如下内容：

在那里你可以看到一个直接的 eslint 依赖项（你手动安装的），另一个 eslint 属于 react-scripts（由 CRA 作为子依赖项安装的） ).

你怎么解决这个问题？

基本上你有两个选择：

删除您的 ESLint 并自定义 CRA ESLint。您可以从项目中卸载 eslint 依赖项，删除自定义 .eslintrc.json 和 extend CRA ESLint config。这必须通过 package.json 中的 eslintConfig 键来完成。您不需要将 .eslintrc.json 中的所有内容都放在那里，因为 CRA 配置已经涵盖了其中的大部分内容。这个选项的缺点是 1) 你不能用 npm run lint 按需检查你的代码，因为 CRA 不允许你这样做，以及 2) 你被绑定到 CRA 使用的 ESLint 插件版本（例如，他们正在使用 eslint-plugin-testing-library v3，但最新的是 v5，您不能使用它）。
忽略来自 CRA 的 ESLint（推荐）。这就是我通常做的。 You can opt-out of the CRA built-in ESLint instance. To do this, you need to create a .env file in the root of your project, and then put DISABLE_ESLINT_PLUGIN=true inside. After that, CRA won't lint your code when running start or build, so it's up to you when to lint it with your lint command. Ideally, you'll run the lint command in your CI, and locally every time you commit files with lint-staged（这对你来说可能听起来不熟悉，如果你需要帮助来设置这些，请告诉我），除了通过你的代码编辑器获得 ESLint 错误的即时反馈（设置 VSCode 或 WebStorm 最多这样做）。

希望这对你有帮助，如果你还有什么想讨论的，请告诉我！

构建 React 应用程序时不同的 ESLint 结果

Different ESLint results when building React app

typescript

reactjs

eslint

package.json

eslintrc

创建 React 应用 ESLint

你的项目 ESLint

你怎么解决这个问题？