如何修复意外令牌“/”的 ESLint 解析错误？答案

【问题标题】：How can I fix ESLint Parsing Error for unexpected token "/"?如何修复意外令牌“/”的 ESLint 解析错误？
【发布时间】：2019-04-03 23:05:55
【问题描述】：

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": {
    ...
}

【问题讨论】：

linter 绝对有问题。尝试删除该行，运行 linter 并再次添加该行。
@Phiter : 可惜没用
请向我们展示您的.eslintrc.json 文件。看起来您的 eslint 解析器未配置为理解 JSX。
@richardgirges：添加
尝试重新输入</p> 那里可能有一些隐藏字符。

标签： javascript reactjs visual-studio-code jsx eslint

【解决方案1】：

我在 Visual Studio 2017（非代码） 中收到了类似的错误。

import 语句开头出现“ESLint 遇到解析错误”错误。

janniks 的解决方案对我不起作用。我怀疑是因为"es6: true "enable[s] all ECMAScript 6 features except for modules"。

由于我使用的是 TypeScript，我 don't want to use 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 解析器。

【讨论】：

天啊！谢谢！！！我花了几乎一整天的时间来追查这个。每个人都说使用“babel-eslint”。奇怪的是，这只是偶尔起作用。每次我进行更改时，它都会再次抛出错误。这似乎终于解决了。

【解决方案2】：

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

【讨论】：

嗨 - 这可能是一个有用的答案 - 但是 - 如果你能解释 为什么 它会解决问题会更好。

【解决方案3】：

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

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

我也留下了原来的rules。

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

【讨论】：

对我来说，罪魁祸首是"standard-react"。