ESLint 錯誤 - ESLint 找不到配置“react-app”

Question

我和我的團隊使用 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"
  }
} 

我們還嘗試添加create a.eslintrc文件並添加

{
  "extends": "react-app"
}

但沒有任何改變。

Answer 1

react-scripts應該已經在您的 Node 依賴項中包含 ESLint 和eslint-config-react-app ESLint 配置（請參閱文檔）。

您不需要在 Create React App 項目中單獨安裝它。

如果 ESLint 無法找到react-app配置，則可能存在沖突或重復的 ESLint 配置依賴項，這些依賴項安裝在react-scripts （即另一個eslint-config-react-app安裝）。 您可以使用npm ls [package]命令（即npm ls eslint-config-react-app ）進行檢查。

可能解決此問題的最佳方法是從package.json刪除這些包，以允許按預期使用react-scripts eslint-config-react-app等eslint-config-react-app （基於注釋）。 如果此后問題仍然存在，請嘗試刪除node_modules文件夾和package-lock.json ，然后再次重新安裝依賴項可能會奏效。 否則，升級到更新的npm版本可能會有所不同。

舊答案：

您的package.json可能缺少包含 eslint 預設react-app的對等依賴項eslint-config-react-app react-app 。 您需要按照此處的說明安裝它https://www.npmjs.com/package/eslint-config-react-app 。

注意：盡管這是create-react-app它捆綁到react-scripts ，但您的lint腳本無法訪問react-app 。

---

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

關於.eslintrc ，你的package.json已經有 ESLint 的配置，所以你應該可以安全地刪除.eslintrc 。

Answer 2

這里的問題在於yarn包管理器。 因為eslint-config-react-app不是直接在node_modules下， node_modules在 react-scripts 內： node_modules\\react-scripts\\node_modules yarn 沒有正確加載（更多信息在這里）

因此，目前，有兩個選項可以解決該問題：

1. 使用npm代替yarn 。
2. 安裝eslint-config-react-app包，以及我們在react-scripts 。

Answer 3

我通過使用npm install而不是yarn解決了這個問題。

不知道為什么，但我猜是因為 yarn 一次安裝多個包，而 npm 一個接一個安裝它們。 所以也許其中一些被跳過或沒有正確安裝。

Answer 4

從.git/hooks 中刪除預提交文件解決了我的問題。

Answer 5

解決了！

我解決了更改 lint 腳本的問題：

老這個：

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

新的：

"lint": "eslint --debug 'src/**/*.{js,jsx,ts,tsx}'",

Answer 6

我正在使用紗線，我通過重新安裝 vscode 並將 eslint 降級到 7.32 解決了這個問題

Answer 7

如果你不在項目中使用 React，只需在 .eslintrc.js 中添加：

{
   root: true,
}