ESLint错误-ESLint找不到配置"react-app". [英] ESLint error - ESLint couldn't find the config "react-app"

问题描述

与我的团队一起，使用create-react-app bootstrap命令启动一个新的React Project.我们在项目上添加了eslint部分，但由于棘手的错误而陷入困境，而我们之前从未发现过该错误.当我们启动命令

Me with my team, start a new React Project using the create-react-app bootstrap command. We add the eslint section on the project but we stuck with annoying error that we never found it before now. When we launch the command

 yarn run lint

以下错误:

这是package.json:

Here the 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文件并添加

We also tried to add create a .eslintrc file and add

{
  "extends": "react-app"
}

但是什么都没有改变.

推荐答案

反应脚本应该已经包含ESLint和 eslint-config-react-app ESLint配置(参见文档)放在您的Node依赖项中.

react-scripts should already include ESLint and the eslint-config-react-app ESLint config (see docs) in your Node dependencies.

您无需在Create React App项目中单独安装它.

You don’t need to install it separately in Create React App projects.

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

If ESLint is not able to find the react-app config, there are likely conflicting or duplicate ESLint config dependencies that were installed outside of react-scripts (i.e. another eslint-config-react-app installation). You can check by using the npm ls [package] command (i.e. npm ls eslint-config-react-app).

可能最好的方法是从 package.json 中删除那些软件包，以允许像 eslint-config-react-app 这样的配置在 react脚本按预期使用(基于

Probably the best way to approach this is to remove those packages from package.json to allow the configs like eslint-config-react-app in react-scripts to be used as intended (based on comment) . If the problem persists after that, try removing the node_modules folder and package-lock.json and then reinstalling the dependencies again may work. Otherwise, upgrading to a newer npm version may make a difference.

您的 package.json 可能缺少对等依赖项 eslint-config-react-app ，其中包括eslint预设的 react-app .您需要按照说明在此处进行安装 https://www.npmjs.com/package/eslint-config-react-app .

Your package.json is likely missing the peer dependency eslint-config-react-app which includes the eslint preset react-app. You will need to follow the instructions to install it here https://www.npmjs.com/package/eslint-config-react-app.

注意:即使这是将 react-scripts 捆绑在一起的 create-react-app ，但您的 lint 脚本却无法访问 react-app .

Note: Even though this is create-react-app which bundles it for react-scripts, your lint script was not able to access react-app.

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

关于 .eslintrc ，您已经在 package.json 中具有ESLint的配置，因此应该安全地删除 .eslintrc .

About .eslintrc, you already have the config for ESLint in your package.json so you should be safe to remove .eslintrc.

这篇关于ESLint错误-ESLint找不到配置"react-app".的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！