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

Question

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 Code（使用 ESLint 插件）

部分.eslintrc.json ：

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

Answer 1

我在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 解析器。

Answer 2

我今天在建立一个新的 React 项目时遇到了同样的问题。 对我babel-eslint的修复是安装babel-eslint包（ npm install babel-eslint --save-dev或yarn add babel-eslint -D ）。 然后我将"parser": "babel-eslint"到我的.eslintrc配置文件中。 与使用默认解析器相比，这似乎有助于 babel 和 ESLint 更好地相处。

Answer 3

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

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

我也保留了原来的rules 。

---

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