eslint "parsing error: Unexpected token {" in JSX

Question

const title = 'My Minimal React Webpack Babel Setups';

const App = () => (<div><b>{title}</b><img src={img} /></div>)

这段代码出现错误"ESLint Parsing Error: Unexpected token {"

我的.eslintrc.js文件就是这样

module.exports = {
    "extends": "airbnb"
};

然后我就这样安装了包

"eslint": "^5.9.0",
"eslint-config-airbnb": "^17.1.0",
"eslint-loader": "^2.1.1",
"eslint-plugin-import": "^2.14.0",
"eslint-plugin-jsx-a11y": "^6.1.2",
"eslint-plugin-react": "^7.11.1",

我以为 ESLint 可以读取 JSX，因为 token "<" 不会出现错误。（当我将 .eslintrc.js 文件中的扩展部分更改为 "airbnb-base" 时，会出现错误 "ESLint Parsing Error: Unexpected token <. But now, the token "<" 不会出现错误）

但是，我的 ESLint 无法读取 JSX 语法行 {variable}

Answer 1

Eslint 本身还不够好。首先安装 babel-eslint:

npm install --save-dev babel-eslint

或者用纱线：

yarn add -D babel-eslint

然后添加到您的 .eslintrc 文件：

"parser": "babel-eslint"

您可能还想安装 eslint-plugin-babel，但我认为这不是必需的

Answer 2

我的 .eslintr 有这个额外的配置来启用 JSX

"parserOptions": {
    "ecmaFeatures": {
      "jsx": true
    }
  }

Answer 3

我在 Next.js 上遇到了同样的错误。

这些步骤解决了我的问题：

1) 安装babel-eslint:

npm install --save-dev babel-eslint

2) 添加 babel-eslint 作为 parser 到 eslint 配置

"parser": "babel-eslint"

我的 eslint 配置如下所示 (.eslintrc):

{
  "env": {
    "browser": true,
    "es6": true,
    "commonjs": true,
    "node": true
  },
  "extends": ["eslint:recommended", "plugin:react/recommended"],
  "parser": "babel-eslint",
  "parserOptions": {
    "ecmaVersion": 9,
    "ecmaFeatures": {
      "jsx": true
    },
    "sourceType": "module"
  },
  "plugins": ["react"],
  "rules": {
    "react/react-in-jsx-scope": 0,
    "no-console": 1
  }
}

Answer 4

对于所有在 2020 年 3 月或之后来到这个 post 的人来说，babel 和 eslint 有一些更新导致接受的答案不在日期。

基本上，如果您正在编写 React 而不是使用像 Next.js 或 create-react-app 这样的框架，并且您需要手动配置 eslint 以适当地工作，在这里是一个快速指南。

假设

这是假设您从 2020 年 3 月开始一个新项目并使用 eslint 8.8 或更高版本

安装什么

运行以下

npm install @babel/eslint-parser @babel/preset-react

如果您没有安装 eslint-plugin-react，您也需要安装它，以便为 React 项目使用推荐的 eslint 设置。

重要：如果您安装了 babel-eslint 或出现在您的 package.json 静止图像中，npm uninstall 它。

如何配置

示例 .eslintrc.js 文件（或 .eslintrc 或 .eslintrc.json）

module.exports = {
  env: {
    browser: true,
    es2021: true,
  },
  extends: ['eslint:recommended', 'plugin:react/recommended'],
  parser: '@babel/eslint-parser', // <<<< Important
  parserOptions: {
    requireConfigFile: false, // <<<< Allows you to skip Eslint complaining that you don't have a .babelrc file 
    babelOptions: {
      presets: ['@babel/preset-react'], // <<<< Important
    },
    ecmaFeatures: {
      jsx: true, // <<<< Important
    },
    ecmaVersion: 'latest',
    sourceType: 'module',
  },
  rules: {},
};

进行这些更新后，我的项目开始按预期运行。

参考资料

https://tjaddison.com/blog/2021/03/updating-babel-eslint-to-babeleslint-parser-for-react-apps/

eslint "parsing error: Unexpected token {" in JSX