如何修复意外标记“/”的 ESLint 解析错误?

新手上路,请多包涵

在此处输入图像描述

 const Index = () => (
    <div>
        <p>Hello World</p>
        <Link href="/posts">
            <a>Posts</a>
        </Link>
    </div>
)

ESLint 正在为结束标记 </p> 返回解析错误(意外标记)。我错过了什么? JSX 中不允许使用普通的 HTML 属性吗? ( div 似乎工作正常)

确切的错误是:

 [eslint] Parsing error: Unexpected token "/"

  • ESLint 已安装
  • ESLint React 已安装
  • ESLint React 配置在 .eslintrc.json

编辑:

  • 使用 VS 代码(使用 ESLint 插件)

部分 .eslintrc.json

 "env": {
    "browser": true,
    "commonjs": true,
    "es6": true
},
"extends": "eslint:recommended",
"parserOptions": {
    "ecmaFeatures": {
    "experimentalObjectRestSpread": true,
    "jsx": true
    },
    "sourceType": "module"
},
"plugins": [
    "react"
],
"rules": {
    ...
}

原文由 janniks 发布,翻译遵循 CC BY-SA 4.0 许可协议

阅读 706
2 个回答

我不确定是什么导致了问题,但这为我解决了。我将 .eslintrc.json 更改为以下内容:

 {
    //"env": {
    //    "browser": true,
    //    "commonjs": true,
    //    "es6": true
    //},
    "extends": [
        "standard",
        "standard-react"
    ]
}

我也留下了原来的 rules


这个问题似乎有多种不同的原因,因此也请查看其他答案。

原文由 janniks 发布,翻译遵循 CC BY-SA 4.0 许可协议

我在 Visual Studio 2017 (not Code) 中收到了类似的错误。

错误“ESLint 遇到解析错误”发生在 import 语句的开头。

janniks 的解决方案对我不起作用。我怀疑是因为 "es6: true “启用 [s] 除模块之外的所有 ECMAScript 6 功能”

由于我使用的是 TypeScript,我 不想使用 babel-eslint ,根据 Sean 的回答(尽管它确实解决了普通 JS 文件中的解析错误)。

关键的权衡可以概括为: babel-eslint 支持 TypeScript 本身不支持的附加语法,但是 typescript-eslint 支持基于类型信息创建规则,这对于 babel 是不可用的,因为有没有类型检查器。

相反,我继续使用“@typescript-eslint/parser”。下面是我的最小工作 .eslintrc

 {
    "parser": "@typescript-eslint/parser",
    "parserOptions": {
        "sourceType": "module"
    },
    "rules": {
        "quotes": [ "error", "single" ]
    }
}

注意:即使我删除了 "parser" 行,该错误也已在普通 JS 文件(而非 TS)中解决,因此使用默认的 eslint 解析器。

原文由 crenshaw-dev 发布,翻译遵循 CC BY-SA 4.0 许可协议

撰写回答
你尚未登录,登录后可以
  • 和开发者交流问题的细节
  • 关注并接收问题和回答的更新提醒
  • 参与内容的编辑和改进,让解决方法与时俱进
推荐问题