作为前端工程师，我们经常需要使用 ESLint 对代码进行规范化和检验，从而提高代码的质量和可读性。而在使用 ESLint 进行代码检验时，我们有时会遇到 Unexpected token < 的报错。那么这个报错是怎么产生的呢？我们应该如何解决它呢？
报错分析
在使用 ESLint 进行代码检验时，如果代码出现了类似于下面的情况：
-- -------------------- ---- -------
------ ------ - --------- - ---- --------
------ -------- ---- ------------
----- --- ------- --------- -
-------- -
------ -
-----
---------- -----------
------
--
-
-
-------------------- --- ---------------------------------那么就会出现 Unexpected token < 的报错。这是因为在这段代码中，使用了 JSX 语法，而 ESLint 默认不支持 JSX 语法，因此会将 < 解析为运算符，从而报错。
解决方案
要解决 Unexpected token < 的报错，我们可以在 ESLint 中添加对 JSX 语法的支持。下面是具体的步骤：
安装 ESLint 插件
首先，我们需要安装一个 ESLint 插件，该插件可以让 ESLint 支持 JSX 语法。具体安装命令如下：
npm install eslint-plugin-react --save-dev
配置 ESLint
安装完插件后，我们需要在 ESLint 配置文件中添加对该插件的支持。具体配置如下：
{
"plugins": ["react"],
"rules": {
"react/jsx-uses-vars": 2
}
}其中，plugins 数组中添加了 "react"，表示启用了名为 react 的 ESLint 插件。而 rules 对象中的 "react/jsx-uses-vars": 2 则表示对未使用的变量进行警告：如果该变量没有使用，则会报一个错误级别的警告。
修改文件后缀名
最后，我们还需要修改文件后缀名。在 JSX 语法文件中，我们应该使用 .jsx 后缀名。而在我们的示例代码中，我们需要将 index.js 修改为 index.jsx。
完整的示例代码
下面是一个完整的示例代码，该代码使用了 JSX 语法，并对未使用的变量进行了警告：
-- -------------------- ---- -------
------ ------ - --------- - ---- --------
------ -------- ---- ------------
----- --- ------- --------- -
-------- -
----- -------------- - ------- --------
------ -
-----
-------------------------
------
--
-
-
-------------------- --- ---------------------------------总结
通过上面的分析，我们可以得出以下结论：
Unexpected token <的 ESLint 报错是由于代码中使用了 JSX 语法，而 ESLint 默认不支持 JSX 语法。- 要解决该报错，我们需要在 ESLint 中添加对 JSX 语法的支持，并修改文件后缀名。
- 在 JSX 语法文件中，应该使用
.jsx后缀名。 - 我们还可以在 ESLint 中对未使用的变量进行警告，提高代码的可读性和质量。
通过以上掌握，我们可以更好地使用 ESLint 进行代码检验，提高代码的可读性和质量，从而更好地完成开发任务。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/664ae9fdd3423812e49d4e95