无需单独配置babel，如何让ESLint适配Parcel+React项目的类属性与JSX语法

你可以选择以下任意一种方案实现无需独立babel配置，同时让ESLint支持ES6类属性、JSX语法、ES6导入识别： #

方案1：继续使用@babel/eslint-parser，内嵌babel配置 #

所有babel配置直接写在ESLint配置中，不需要单独创建.babelrc等babel配置文件，不会和Parcel内置的babel处理逻辑冲突。

• 第一步：安装所需依赖

npm install --save-dev @babel/preset-env @babel/preset-react

• 第二步：修改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
    },
    "requireConfigFile": false,
    "babelOptions": {
      "presets": ["@babel/preset-env", "@babel/preset-react"]
    }
  },
  "env": {
    "es6": true,
    "browser": true,
    "node": true
  },
  "settings": {
    "import/resolver": {
      "node": {
        "extensions": [".js", ".jsx"]
      }
    }
  }
}

方案2：使用ESLint默认解析器，完全无需babel依赖 #

ESLint v8+自带的espree解析器已经原生支持ES2022类属性特性和JSX语法解析，无需任何babel相关依赖，更适合你的场景，直接修改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": "espree",
  "parserOptions": {
    "ecmaVersion": "latest",
    "sourceType": "module",
    "ecmaFeatures": {
      "jsx": true
    }
  },
  "env": {
    "es2022": true,
    "browser": true,
    "node": true
  },
  "settings": {
    "import/resolver": {
      "node": {
        "extensions": [".js", ".jsx"]
      }
    }
  }
}

上述两种方案配置完成后，重新执行npm run lint即可消除相关语法报错。 #

内容的提问来源于stack exchange，提问作者Pratik Mehta