如何修復意外標記“/”的 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 。

---

這個問題似乎有多種不同的原因，所以也請查看其他答案。