logo标签列表

ESLint 错误 - ESLint 找不到配置文件 "react-app"。

javascriptreactjstypescriptcreate-react-appeslint
24

我和我的团队使用create-react-app命令启动了一个新的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"
}

但是什么都没有改变。

任何关于 .eslintrc.js 的代码。 - keikai
你的意思是什么？ - Nicola
在我的情况下，我在一个顶级项目中有另一个package.json文件（我没有注意到），因此我的项目使用来自该顶级项目而不是当前项目的es-lint命令。我只是提取或移动了我的项目，然后它就正常了。 - JORGE GARNICA
8个回答
29

react-scripts 应该已经包含了 ESLint 和 eslint-config-react-app 的 ESLint 配置（请参阅文档），并且已经在您的Node依赖项中。

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

如果ESLint无法找到 react-app 配置，则可能存在冲突或重复的ESLint配置依赖项，这些依赖项是在 react-scripts 之外安装的（即另一个 eslint-config-react-app 安装）。您可以通过使用 npm ls [package] 命令（例如：npm ls eslint-config-react-app）进行检查。

解决此问题的最佳方法可能是从 package.json 中删除那些软件包，以允许像 eslint-config-react-app 这样的配置按预期使用 react-scripts（基于此评论）。如果问题仍然存在，请尝试删除 node_modules 文件夹和 package-lock.json ，然后重新安装依赖项可能会起作用。否则，升级到更高版本的npm可能会使差异。

旧答案：

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

注意：尽管这是为react-scripts捆绑的create-react-app，但是您的lint脚本无法访问react-app。

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

关于 .eslintrc，你已经在你的 package.json 中拥有了 ESLint 的配置，所以你应该可以安全地删除 .eslintrc。

我在使用ESLint 7.x时遇到了完全相同的故障。您能否解释一下为什么lint脚本无法访问已安装为“react-scripts”依赖项的eslint-config-react-app？文档中有一个注释，指出“在Create React App项目中不需要单独安装它。”我还尝试了一个新创建的项目，使用最新初始化的lint配置，它正常工作。 - elm
@elm，我确实意识到react-scripts应该为CRA项目安装ESLint配置和本地ESLint脚本（运行npm ls eslint-config-react-app将定位配置文件，node_modules/.bin/应该有本地的eslint脚本）。我还没有找出你所看到的行为的根本原因，但我知道如果不满足上述条件会导致问题。根本原因可能因人而异，因此提供package.json和其他配置文件将非常有帮助。 - kmui2
2
感谢您的快速回复。我进一步研究了这个问题，并找到了我的断点原因 - 我安装了两个不同版本的@typescript-eslint/eslint-plugin（一个是作为react-scripts的依赖项，另一个是按照eslint-config-airbnb-typescript安装文档安装的）。这些软件包具有不同的主要版本，我认为这是导致冲突的原因。 现在，我已经删除了所有其他安装的软件包，例如eslint-plugin-jsx-a11y等，可以根据CRA文档扩展react-app配置。 - elm
1
我们从中学到的教训是，我们不需要安装已经作为react-scripts依赖项安装的软件包。 - elm
感谢@elm提供的宝贵发现。我会在答案中做一个总体注释，以防其他人遇到同样的问题。 - kmui2
19
问题出在yarn包管理器上。由于eslint-config-react-app不直接在node_modules下，而是在react-scripts:node_modules\react-scripts\node_modules中，yarn没有正确地加载它（更多信息请见这里）。
因此，目前有两种解决该问题的方法：
  1. 使用npm代替yarn。
  2. 另外安装eslint-config-react-app包，以补充我们已经在react-scripts内部拥有的那个包。
2
我通过使用npm install解决了这个问题，而不是使用yarn。
我不确定为什么，但我猜测这是因为yarn一次安装多个软件包，而npm一个接一个地安装它们。因此可能会跳过某些软件包或未正确安装。
2

朋友们，在你的React应用中只需按照以下步骤进行操作（您可以在create-react-app或vite应用中使用这些步骤）：

  1. 将 eslint-config-react-app 作为 devDependencies 安装（如果您已经拥有此软件包，请重新安装）：

    npm i -D eslint-config-react-app

  2. 将以下代码添加到您的 .eslintrc.cjs 或 .eslintrc.js 文件中：

    {
   "extends": [
      "eslint:recommended",
      "react-app"
    ],
}

你可以在 ESLint的Discord中找到这个问题。

1

已解决！

我解决了我的lint脚本问题：

原来是这样的：

"lint": "eslint --debug src/"

新手入门：
"lint": "eslint --debug 'src/**/*.{js,jsx,ts,tsx}'",
你是如何直接启动 eslint 的？我只能像这样启动它：./node_modules/eslint/bin/eslint.js。 - lazy.lizard
1
@lazy.lizard - 尝试使用 export PATH="./node_modules/.bin:$PATH" 命令。这样，每当你的当前目录中有一个 node_modules 目录时，你就可以运行所有二进制文件而无需路径前缀。将其放入您的 .bash_profile 或类似文件中以使其永久生效。 - Stephen
1
@lazy.lizard 另一种不需要修改 PATH 的方法是将上述命令添加到脚本中，并使用 -- 传递参数。例如，npm run lint -- --debug src/。 - kmui2
0
如果您在项目中不使用React，请在 .eslintrc.js 中添加以下内容：
{
   root: true,
}
0

我正在使用yarn，通过重新安装vscode并将eslint降级到7.32版本，我已经解决了这个问题。

-2
从.git/hooks中删除pre-commit文件解决了我的问题。
你可能有一个脚本可以添加这个功能，所以这不是一个永久的解决方案。 - undefined
网页内容由stack overflow 提供, 点击上面的
可以查看英文原文，
原文链接