带有Babel的ESLint:在.eslintrc中找不到声明的插件建议类属性

Question

ESLint服务器抛出以下错误：

〔信息-11:43:42〕加载插件失败在中声明了"@babel/plugin-plugin-property-class-properties".eslintrc.json"：找不到模块'@babel/eslint插件-插件建议类属性'

我安装了@babel/plugin-proposal-class-properties，但ESLint服务器试图从路径'@babel/eslint-plugin-plugin-proposal-class-properties'加载它，而包安装在此处：'@babel/plugin-proposal-class-properties'。

package.json:

{
...
"dependencies": {},
"devDependencies": {
"@babel/core": "^7.12.3",
"@babel/eslint-parser": "^7.12.1",
"@babel/eslint-plugin": "^7.12.1",
"@babel/plugin-proposal-class-properties": "^7.12.1",
"eslint": "^7.11.0",
"eslint-config-airbnb-base": "^14.2.0",
"eslint-plugin-import": "^2.22.1"
}
}

.eslintrc.json

{
"extends": ["airbnb-base"],
"parser": "@babel/eslint-parser",
"parserOptions": {
"sourceType": "module",
"allowImportExportEverywhere": false,
"requireConfigFile": false
},
"plugins": ["@babel", "@babel/plugin-proposal-class-properties"],
"rules": {
}
}

为什么ESLint试图从错误的路径加载插件，以及如何修复它？

Answer 1

我建议使用以下方法：

添加.babelrc文件：

{
"presets": ["@babel/env"],
"plugins": ["@babel/plugin-proposal-class-properties"] //<-- Add your babel plugin's here
}

更新.eslintrc文件如下：

"extends": [
"airbnb-base",
"eslint:recommended"
],
...
"parser": "babel-eslint",
...
"parserOptions": {
"sourceType": "module",
"allowImportExportEverywhere": false,
"babelOptions": {
"configFile": "./babelrc" //<---here
}
}
...
"plugins": [
"@babel",
],
...
"rules": {
"react/display-name": 1,
"no-unused-vars": "warn"
},

其他有用的文章：

https://github.com/babel/babel-eslint/issues/818

https://github.com/babel/babel/tree/main/eslint/babel-eslint-parser#additional-解析器配置

在.eslintrc 中为@babel/eslint解析器声明babel插件

祝你好运！