eslint在JSX中出现“解析错误：意外的令牌{”

Question

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

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

这段代码出现了一个错误 "ESLint 解析错误：意外的标记 { "

我的.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 语法，因为出现 "<" 标记时没有错误。(当我将 .eslintrc.js 文件中的 extends 部分更改为 "airbnb-base" 时，会出现 "ESLint Parsing Error: Unexpected token < 的错误。但现在，这个 "<" 标记不会出现错误)

然而，我的 ESLint 无法读取包含变量的 JSX 语法行。

- YouHoGeon

---

但是代码没有错误啊。它能正常工作，对吧？ - Praveen Kumar Purushothaman

@PraveenKumarPurushothaman 是的。它可以完美地工作。我可以使用 babel 编译我的代码，并且在我的浏览器上它能够正常运行。但是，ESLint 报错 解析错误。 - YouHoGeon

你能看一下是否有任何 ESLint 升级吗？ - Praveen Kumar Purushothaman

@PraveenKumarPurushothaman 我的ESLint版本是最新版本(5.9.0)。我使用命令“npm update”和npmjs.org网站来检查它。 - YouHoGeon

Answer 1

Eslint本身是不够好的。首先安装babel-eslint：

npm install --save-dev babel-eslint

或者使用yarn：

yarn add -D babel-eslint

然后将以下内容添加到你的.eslintrc文件中：

"parser": "babel-eslint"

您可能还想安装eslint-plugin-babel，但我认为这并非必需

- Brian Le

---

谢谢您的回答。所有问题都已解决。如果我不使用babel，那么我应该安装babel-eslint吗？ - YouHoGeon

你不必使用Babel来安装它。它只是帮助ESLint解析代码的工具。@YouHoGeon - Brian Le

我刚刚做了那个，结果导致很多其他的东西出问题了。这个答案可能已经过时了... - James Bender

@JamesBender 不这么认为。你能详细说明一下你的问题吗？ - Brian Le

潜在地，你可能还需要在.babelrc中加入"parser": "babel-eslint"。 - troy

Answer 2

我在使用 Next.js 时遇到了相同的错误。

以下步骤解决了我的问题：

1) 安装 babel-eslint：

npm install --save-dev babel-eslint

2) 将 babel-eslint 添加为 eslint 配置文件中的一个 解析器(parser)

"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
  }
}

- bekliev

Answer 3

对于所有在2020年3月或之后查看此帖子的人，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`设置。

重要提示：如果您已经安装或在`package.json`中仍然存在`babel-eslint`，请使用`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/

- John T

Answer 4

我的.eslintr文件有额外的配置，以启用JSX。

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

- Eponyme Web

---

很遗憾，它的工作方式是相同的。感谢您的评论。 - YouHoGeon