在没有 babelrc 的情况下将 ESLint 与 Parcel、React 和 ES6 class 属性一起使用

Question

我正在尝试设置 ESLint、React、Parcel 一起工作。我也没有设置 babelrc，因为 Parcel 会在内部处理它。

一切正常，除了我不知道如何阻止 ESLint 抱怨有效的 ES6 导入、class 属性和 JSX 语法。

这是可以试用的存储库： https://github.com/mehtapratik/parcel-babel-import

npm run dev //run parcel 
npm run lint // run eslint

这是我的 ESLint 配置

{
  "extends": [
    "eslint:recommended",
    "plugin:react/recommended",
    "plugin:jsx-a11y/recommended",
    "plugin:import/errors",
    "prettier"
  ],
  "plugins": ["import", "react", "jsx-a11y"],
  "rules": {
    "react/prop-types": 0,
    "react/react-in-jsx-scope": 0
  },
  "parser": "@babel/eslint-parser",
  "parserOptions": {
    "ecmaVersion": 2021,
    "sourceType": "module",
    "ecmaFeatures": {
      "jsx": true
    }
  },
  "env": {
    "es6": true,
    "browser": true,
    "node": true
  }
}

当我添加 "parser": "@babel/eslint-parser" 时问题开始出现。我添加了此配置以避免 ESLint 显示有关 class 属性的错误：

class App {
   // Without "parser": "@babel/eslint-parser" following line will show ESLint error
   timestampe = Date.now();
}

我搜索了其他问题，如果我添加 requireConfigFile: false，ESLint 开始抱怨 JSX 语法。

有什么方法可以配置 ESLint 以理解 JSX 语法和 ES6 class 属性，而无需自己配置 babel？

Answer 1

您应该可以 eslint 通过升级到 version 8.

见

在没有 babelrc 的情况下将 ESLint 与 Parcel、React 和 ES6 class 属性一起使用

Using ESLint with Parcel, React, and ES6 class properties without babelrc

parcel

reactjs

eslint

parceljs