在编写前端代码的过程中，我们经常会使用 ESLint 来检测代码风格和规范。但是，有时候在运行 ESLint 时，会出现以下错误提示：Parsing error: Unexpected token <。这种错误通常会出现在我们引用了非 JS 文件（比如 HTML 或 CSS 文件）或者在 JS 中嵌入了 HTML 或 CSS。
在本文中，我们将深入探讨这个问题，并提供几种解决方法。
问题背景
首先，让我们来看一下这个错误是如何出现的。
假设我们有一个 index.js 文件，其中包含以下代码：
------ ----- ---- -------- ------ --- ---- -------- -------------------- --- ---------------------------------
当我们运行 ESLint 时，会出现以下错误提示：
------- ------ ---------- ----- -
这是因为在我们的代码中存在一个 HTML 标签 "<"，而 ESLint 并不支持在 JS 中嵌入 HTML。
解决方法
1. 将 HTML 和 JS 分离
最简单的解决方法是将 HTML 和 JS 分离。我们可以在 HTML 文件中引用 JS 文件，并在 JS 文件中编写 JS 代码。这样就能避免在 JS 中嵌入 HTML 导致的错误了。
HTML 文件：
--------- -----
----- ----------
------
----- --------------- --
-----------------------
-------
------
---- ----------------
------- ------------------------
-------
-------JS 文件：
------ ----- ---- -------- ------ -------- ---- ------------ ------ --- ---- -------- -------------------- --- ---------------------------------
2. 配置 ESLint
如果我们不想将 HTML 和 JS 分离，也有一些办法可以解决这个问题。
首先，我们可以在 .eslintrc.json 文件中添加 "parserOptions" 配置项：
-
---------------- -
-------------- -----
------------- ---------
--------------- -
------ ----
-
--
---------- ---------------------- ----------------------------
---------- -
-------
-
-这个配置项告诉 ESLint，我们的代码中可能包含 JSX 语法，需要使用相应的解析器进行解析。
3. 使用 eslint-plugin-html
还有另一个解决方法，就是使用 eslint-plugin-html 插件。这个插件可以让 ESLint 支持在 HTML 文件中编写 JS 代码。
首先，我们需要安装这个插件：
--- ------- ---------- ------------------
然后，我们需要在 .eslintrc.json 文件中添加 "plugins" 和 "processor" 配置项：
-
---------- ---------
------------ ------------
-------- -
------- --------- ----------
--------- --------- ---------
-
-在 "rules" 配置项中，我们添加了一些常用的规则。
现在，我们就可以在 HTML 文件中编写 JS 代码了：
--------- -----
----- ----------
------
----- --------------- --
-----------------------
-------
------
---- ----------------
--------
------ ----- ---- --------
------ -------- ---- ------------
------ --- ---- --------
-------------------- --- ---------------------------------
---------
-------
-------结论
ESLint 报错解决：Parsing error: Unexpected token <，是因为在 JS 中嵌入了 HTML 或 CSS 导致的。解决方法包括将 HTML 和 JS 分离、配置 ESLint 和使用 eslint-plugin-html 插件。我们可以根据自己的需求选择合适的方法来解决这个问题。
来源：JavaScript中文网 ，转载请注明来源 本文地址：https://www.javascriptcn.com/post/66ff6f9a1b0bf82c71c980b4