ESLint 错误 - ESLint 找不到配置“react-app”

IT技术 javascript reactjs typescript create-react-app eslint
2021-05-11 16:01:33

我和我的团队使用 create-react-app bootstrap 命令启动一个新的 React 项目。我们在项目中添加了 eslint 部分,但我们遇到了以前从未发现过的恼人错误。当我们启动命令时

 yarn run lint

这里的错误: 在此处输入图片说明

这里是 package.json:

{
  "name": "name of the app",
  "version": "0.1.0",
  "private": true,
  "dependencies": {
    "jwt-decode": "^2.2.0",
    "react": "^16.12.0",
    "react-dom": "^16.12.0",
    "react-intl": "^3.12.0",
    "react-router": "^5.1.2",
    "react-router-dom": "^5.1.2",
    "react-scripts": "3.3.0",
    "redux": "^4.0.5",
    "redux-saga": "^1.1.3",
    "reselect": "^4.0.0",
    "styled-components": "^5.0.1"
  },
  "scripts": {
    "analyze": "react-app-rewired build",
    "build": "react-scripts build",
    "cypress": "./node_modules/.bin/cypress open",
    "eject": "react-scripts eject",
    "lint:write": "eslint --debug src/ --fix",
    "lint": "eslint --debug src/",
    "prettier": "prettier --write src/*.tsx src/*.ts src/**/*.tsx src/**/*.ts src/**/**/*.tsx src/**/**/*.ts src/**/**/**/*.tsx src/**/**/**/*.ts src/**/**/**/**/*.tsx src/**/**/**/**/*.ts",
    "start": "react-scripts start",
    "storybook": "start-storybook -p 6006 -c .storybook",
    "test": "react-scripts test",
    "upgrade:check": "npm-check",
    "upgrade:interactive": "npm-check --update"
  },
  "eslintConfig": {
    "extends": "react-app"
  },
  "lint-staged": {
    "*.(ts|tsx)": [
      "yarn run prettier"
    ]
  },
  "browserslist": {
    "production": [
      ">0.2%",
      "not dead",
      "not op_mini all"
    ],
    "development": [
      "last 1 chrome version",
      "last 1 firefox version",
      "last 1 safari version"
    ]
  },
  "devDependencies": {
    "@cypress/webpack-preprocessor": "^4.1.2",
    "@storybook/addon-actions": "^5.3.12",
    "@storybook/addon-info": "^5.3.12",
    "@storybook/addon-knobs": "^5.3.12",
    "@storybook/addon-links": "^5.3.12",
    "@storybook/addons": "^5.3.12",
    "@storybook/preset-create-react-app": "^1.5.2",
    "@storybook/react": "^5.3.12",
    "@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/jwt-decode": "^2.2.1",
    "@types/node": "^12.0.0",
    "@types/react": "^16.9.0",
    "@types/react-dom": "^16.9.0",
    "@types/react-redux": "^7.1.7",
    "@types/react-router": "^5.1.4",
    "@types/react-router-dom": "^5.1.3",
    "@types/storybook__addon-knobs": "^5.2.1",
    "@types/styled-components": "^4.4.2",
    "cypress": "^4.0.1",
    "eslint": "^6.8.0",
    "husky": "^4.2.1",
    "lint-staged": "^10.0.7",
    "npm-check": "^5.9.0",
    "prettier": "^1.19.1",
    "react-app-rewire-webpack-bundle-analyzer": "^1.1.0",
    "react-app-rewired": "^2.1.5",
    "react-docgen-typescript-webpack-plugin": "^1.1.0",
    "redux-devtools-extension": "^2.13.8",
    "storybook-addon-jsx": "^7.1.14",
    "ts-loader": "^6.2.1",
    "typescript": "~3.7.2",
    "webpack": "^4.41.6",
    "webpack-bundle-analyzer": "^3.6.0"
  }
} 

我们还尝试添加创建一个 .eslintrc 文件并添加

{
  "extends": "react-app"
}

但什么都没有改变。

4个回答

react-scripts应该已经在您的 Node 依赖项中包含 ESLint 和eslint-config-react-appESLint 配置(请参阅文档)。

您不需要在 Create React App 项目中单独安装它。

如果 ESLint 无法找到react-app配置,则可能存在冲突或重复的 ESLint 配置依赖项安装在外部react-scripts(即另一个eslint-config-react-app安装)。您可以使用npm ls [package]命令(即npm ls eslint-config-react-app)进行检查。

大概接近这一点的最好办法是删除那些包package.json允许CONFIGS像eslint-config-react-appreact-scripts用作预期(基于评论)。如果此后问题仍然存在,请尝试删除该node_modules文件夹package-lock.json,然后再次重新安装依赖项可能会奏效。否则,升级到较新npm版本可能会有所不同。

旧答案:

package.json可能缺少eslint-config-react-app包含 eslint 预设的对等依赖react-app您需要按照此处的说明安装它https://www.npmjs.com/package/eslint-config-react-app

注意:即使这是create-react-app为 捆绑的react-scripts,您的lint脚本也无法访问react-app.


"eslintConfig": {
      "extends": "react-app"   
}

关于.eslintrc,你已经有 ESLint 的配置,package.json所以你应该可以安全地删除.eslintrc.

这里的问题在于yarn包管理器。因为eslint-config-react-app 不在node_modules直接之下,它在react脚本中:node_modules\react-scripts\node_modules纱线没有正确加载(更多信息在这里

因此,目前,有两个选项可以解决该问题:

  1. 使用npm代替yarn.
  2. eslint-config-react-app除了我们里面的那个安装react-scripts

我通过使用npm install而不是yarn.

不知道为什么,但我猜是因为 yarn 一次安装多个包,而 npm 一个接一个安装它们。所以也许其中一些被跳过或没有正确安装。

.git/hooks 中删除预提交文件解决了我的问题。