ESLint 报错解决：Parsing error: Unexpected token <-JavaScript中文网-JavaScript教程资源分享门户

在编写前端代码的过程中，我们经常会使用 ESLint 来检测代码风格和规范。但是，有时候在运行 ESLint 时，会出现以下错误提示：Parsing error: Unexpected token <。这种错误通常会出现在我们引用了非 JS 文件（比如 HTML 或 CSS 文件）或者在 JS 中嵌入了 HTML 或 CSS。

在本文中，我们将深入探讨这个问题，并提供几种解决方法。

问题背景

首先，让我们来看一下这个错误是如何出现的。

假设我们有一个 index.js 文件，其中包含以下代码：

import React from 'react';
import App from './App';

ReactDOM.render(<App />, document.getElementById('root'));

当我们运行 ESLint 时，会出现以下错误提示：

Parsing error: Unexpected token <

这是因为在我们的代码中存在一个 HTML 标签 "<"，而 ESLint 并不支持在 JS 中嵌入 HTML。

解决方法

1. 将 HTML 和 JS 分离

最简单的解决方法是将 HTML 和 JS 分离。我们可以在 HTML 文件中引用 JS 文件，并在 JS 文件中编写 JS 代码。这样就能避免在 JS 中嵌入 HTML 导致的错误了。

HTML 文件：

-- -------------------- ---- -------
--------- -----
----- ----------
    ------
        ----- --------------- --
        -----------------------
    -------
    ------
        ---- ----------------
        ------- ------------------------
    -------
-------

JS 文件：

import React from 'react';
import ReactDOM from 'react-dom';
import App from './App';

ReactDOM.render(<App />, document.getElementById('root'));

2. 配置 ESLint

如果我们不想将 HTML 和 JS 分离，也有一些办法可以解决这个问题。

首先，我们可以在 .eslintrc.json 文件中添加 "parserOptions" 配置项：

-- -------------------- ---- -------
-
  ---------------- -
    -------------- -----
    ------------- ---------
    --------------- -
      ------ ----
    -
  --
  ---------- ---------------------- ----------------------------
  ---------- -
    -------
  -
-

这个配置项告诉 ESLint，我们的代码中可能包含 JSX 语法，需要使用相应的解析器进行解析。

3. 使用 eslint-plugin-html

还有另一个解决方法，就是使用 eslint-plugin-html 插件。这个插件可以让 ESLint 支持在 HTML 文件中编写 JS 代码。

首先，我们需要安装这个插件：

npm install --save-dev eslint-plugin-html

然后，我们需要在 .eslintrc.json 文件中添加 "plugins" 和 "processor" 配置项：

{
  "plugins": ["html"],
  "processor": "html/html",
  "rules": {
    "semi": ["error", "always"],
    "quotes": ["error", "double"]
  }
}

在 "rules" 配置项中，我们添加了一些常用的规则。

现在，我们就可以在 HTML 文件中编写 JS 代码了：

-- -------------------- ---- -------
--------- -----
----- ----------
    ------
        ----- --------------- --
        -----------------------
    -------
    ------
        ---- ----------------
        --------
            ------ ----- ---- --------
            ------ -------- ---- ------------
            ------ --- ---- --------

            -------------------- --- ---------------------------------
        ---------
    -------
-------

结论

ESLint 报错解决：Parsing error: Unexpected token <，是因为在 JS 中嵌入了 HTML 或 CSS 导致的。解决方法包括将 HTML 和 JS 分离、配置 ESLint 和使用 eslint-plugin-html 插件。我们可以根据自己的需求选择合适的方法来解决这个问题。

来源：JavaScript中文网，转载请注明来源 https://www.javascriptcn.com/post/66ff6f9a1b0bf82c71c980b4