如何解决意外令牌“ /”的ESLint解析错误？

Question

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

我今天在建立一个新的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遇到解析错误”。

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

由于我使用的是TypeScript，因此按照Sean的回答我don't want to use babel-eslint（尽管它确实解决了纯JS文件中的解析错误）。

  

关键的取舍可以归纳为：babel-eslint支持   TypeScript本身没有的其他语法，但是   typescript-eslint支持根据类型信息创建规则，   babel无法使用它，因为没有类型检查器。

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

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

注意：即使我删除了"parser"行，因此使用默认的eslint解析器，该错误也已在纯JS文件（不是TS）中得到解决。