19 
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，因为令牌“<”不会发生错误。（当我将 .eslintrc.js 文件中的扩展部分更改为“airbnb-base”时，会出现错误“ESLint Parsing Error: Unexpected token <。但现在，令牌“<”不会出现错误）

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

4

4 回答 4

31

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

npm install --save-dev babel-eslint

或者用纱线：

yarn add -D babel-eslint

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

"parser": "babel-eslint"

您可能也想安装eslint-plugin-babel，但我相信这不是必需的

于 2018-12-04T09:32:18.803 回答
15

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

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

1）安装babel-eslint：

npm install --save-dev babel-eslint

2) 将babel-eslint作为解析器添加到 eslint config

"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
  }
}
于 2019-01-02T19:09:56.083 回答
2

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

"parserOptions": {
    "ecmaFeatures": {
      "jsx": true
    }
  }
于 2018-12-04T09:32:32.897 回答
1

对于所有在 2020 年 3 月或之后发表这篇文章的人，已经有一些更新babel，eslint导致接受的答案已经过时。

基本上，如果您正在编写 React 而不是使用 Next.js 或 create-react-app 之类的框架，并且您需要eslint手动配置以正常工作，这里有一个快速指南可供参考。

假设

这是假设您在 2020 年 3 月开始一个新项目并使用eslint8.8 或更高版本

安装什么

运行以下

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

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

重要提示：如果您已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: {},
};

遵循这些更新后，我的项目开始按预期工作。

参考

于 2022-02-22T06:02:24.053 回答