ESLint 是前端开发中常用的代码检查工具。它可以根据一定的规则检查代码风格、格式、潜在的错误等，帮助开发者提高代码质量，减少出错率。然而，有时候在运行 ESLint 的时候，我们可能会遇到这样的报错：Unexpected token <。本文将会详细讲解这个错误的原因、解决方法和相关知识点，帮助读者更好地理解和使用 ESLint。
什么是 Unexpected token < 错误？
当 ESLint 在分析 JavaScript 代码时，如果遇到无法识别的字符或语法，就会抛出 Unexpected token < 错误。其中，< 符号是这个错误信息的关键，它通常表示分析器在读取文件时遇到了 HTML 标签等无法识别的字符，而导致了解析器语法错误。
以下是一个报告 Unexpected token < 错误的示例代码：
function someFunction() {
return (
<div>ES6 标签内不能使用单引号哦</div>
);
}
export default someFunction;该函数使用了 ES6 的标签语法，但 ESLint 却无法处理。在这种情况下，运行 ESLint 时就会抛出以下错误：
Error: Parsing error: Unexpected token <
这种错误信息通常会在控制台和编辑器提示框中显示，而且会使得代码运行时出现问题。
如何解决 Unexpected token < 错误？
有多种方法可以解决 Unexpected token < 错误，这里介绍几种常见的方法：
方法一：手动指定 ESLint 的配置文件
如果你在项目的 root 目录下已经有一个 .eslintrc 或 .eslintrc.json 的配置文件，那么可以尝试将文件名改为 .eslintrc.js，并在文件中加入以下代码：
-- -------------------- ---- -------
-------------- - -
---------------- -
-------------- -----
------------- ---------
--------------- -
------ ----
-
--
------ -
---------- -----
------ ----
--
-- --- ----
-这段代码指定了 ESLint 分析代码的一些基本规则和环境，同时也启用了 JSX 语法分析。更多的规则和配置可以参考官方文档。
方法二：安装并启用 eslint-plugin-react 插件
如果你的代码中有 React 框架的代码，那么可以考虑安装并启用 eslint-plugin-react 插件。安装命令：
npm install eslint-plugin-react --save-dev
在配置文件中添加以下信息：
{
"plugins": ["react"],
"rules": {
"react/jsx-uses-react": "error",
"react/jsx-uses-vars": "error"
}
}这里的配置规则可以帮助检查代码中的 React 组件、JSX 语法和变量是否存在等情况。
方法三：在 .eslintrc.js 中指定解析器
还有一种方法是在 .eslintrc.js 配置文件中指定解析器。在配置文件中添加以下信息：
-- -------------------- ---- -------
-
--------- ---------------
---------------- -
-------------- --
------------- ---------
--------------- -
------ ----
-
--
-------- -
-- --- ----
-
-这里的 babel-eslint 解析器可以帮助启用 ES6+ 语法解析，并解决 ESLint 报错问题。
总结
ESLint 报错：Unexpected token < 是开发中的一个常见问题，但是通过阅读本文，我们可以知道如何解决这个问题。该错误通常是由于代码中存在未识别的字符或语法导致，可以通过手动配置 ESLint 配置文件、安装插件，或者通过指定解析器地址解决。同时也要注意规范自己的代码风格，更好地提高开发效率，减少错误率。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/645f7bff968c7c53b0180189