带有 Babel 的 ESLint：在 .eslintrc 中未找到插件建议类属性答案

【问题标题】：ESLint with Babel: plugin-proposal-class-properties not found declared in .eslintrc带有 Babel 的 ESLint：在 .eslintrc 中未找到插件建议类属性
【发布时间】：2021-02-04 05:12:03
【问题描述】：

ESLint 服务器抛出以下错误：

[Info - 11:43:42] 加载插件失败 '@babel/plugin-proposal-class-properties' 声明在 '.eslintrc.json'：找不到模块 '@babel/eslint-plugin-plugin-proposal-class-properties'

我安装了@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 会尝试从错误的路径加载插件以及如何修复它？

【问题讨论】：

标签： javascript babeljs eslint

【解决方案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-parser-configuration

Declaring babel plugins for @babel/eslint-parser in .eslintrc

祝你好运！

【讨论】：