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

Question

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

Answer 1

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

Answer 2

我不确定导致问题的原因，但这似乎解决了这个问题。我将.eslintrc.json更改为以下内容：

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

我也离开了原来的rules。

Answer 3

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

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

詹尼克斯的解决方案对我不起作用。我怀疑是因为"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解析器。