[英]ESLint couldn't find the plugin "eslint-plugin-@typescript-eslint"
[英]ESLint error - ESLint couldn't find the config "react-app"
我和我的团队使用 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"
}
但没有任何改变。
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
。
这里的问题在于yarn
包管理器。 因为eslint-config-react-app
不是直接在node_modules
下, node_modules
在 react-scripts 内: node_modules\\react-scripts\\node_modules
yarn 没有正确加载(更多信息在这里)
因此,目前,有两个选项可以解决该问题:
npm
代替yarn
。eslint-config-react-app
包,以及我们在react-scripts
。我通过使用npm install
而不是yarn
解决了这个问题。
不知道为什么,但我猜是因为 yarn 一次安装多个包,而 npm 一个接一个安装它们。 所以也许其中一些被跳过或没有正确安装。
从.git/hooks 中删除预提交文件解决了我的问题。
解决了!
我解决了更改 lint 脚本的问题:
老这个:
"lint": "eslint --debug src/"
新的:
"lint": "eslint --debug 'src/**/*.{js,jsx,ts,tsx}'",
我正在使用纱线,我通过重新安装 vscode 并将 eslint 降级到 7.32 解决了这个问题
如果你不在项目中使用 React,只需在 .eslintrc.js 中添加:
{
root: true,
}
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.