javascript - 如何修复意外 token "/"的 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(不是代码) 中收到了类似的错误。

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

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

因为我使用的是 TypeScript，所以我 don't want to use babel-eslint ，根据 Sean 的回答(尽管它确实解决了普通 JS 文件中的解析错误)。

The key trade-off can be summarized as: babel-eslint supports additional syntax which TypeScript itself does not, but typescript-eslint supports creating rules based on type information, which is not available to babel because there is no type-checker.

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

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

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