eslint“解析错误：JSX中的意外令牌”

Posted 2023-02-22

【中文标题】eslint“解析错误：JSX中的意外令牌”

【英文标题】：eslint "parsing error: Unexpected token " in JSXeslint“解析错误：JSX中的意外令牌”

【发布时间】：2019-05-05 16:10:39

【问题描述】：

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，因为令牌“

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

【问题讨论】：

但是代码没有错误。效果好吗？

@PraveenKumarPurushothaman 是的。它完全正确。我可以使用 babel 编译我的代码，并且它在我的浏览器上运行良好。但是，ESLint 说 Parsing Error.

能看看有没有ESLint升级吗？

@PraveenKumarPurushothaman 我的 ESLint 版本是最新版本 (5.9.0)。我使用命令“npm update”和npmjs.org site

检查它

【参考方案1】：

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

npm install --save-dev babel-eslint

或者用纱线：

yarn add -D babel-eslint

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

"parser": "babel-eslint"

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

【讨论】：

感谢您的回答。所有问题都已解决。当我不使用babel 时，我应该安装babel-eslint 吗？

你应该。你不需要使用 babel 来安装它。它只是帮助 eslint 解析代码@YouHoGeon

我只是这样做了，它破坏了很多其他的东西。这个答案可能已经过时了......

@JamesBender 不这么认为。你能稍微扩展一下你的问题吗？

您可能还需要 "parser": "babel-eslint" 在您的 .babelrc 中。

【参考方案2】：

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

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

1) 安装 babel-eslint：

npm install --save-dev babel-eslint

2) 添加 babel-eslint 作为 解析器 到 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
  

【参考方案3】：

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

"parserOptions": 
    "ecmaFeatures": 
      "jsx": true
    
  

【讨论】：

不幸的是，它的工作原理相同。谢谢你的评论。