前端开发离不开代码检查工具，这些工具可以帮助我们减少代码中的错误，增加代码的可读性和可维护性。ESLint 是其中一款经典的代码检查工具，但在使用 ESLint 检查 React 项目时，我们可能遇到一个问题，那就是 ESLint 未识别 JSX 语法。
问题表现
当我们在 React 项目中写 JSX 语法时，ESLint 可能会报错或不识别 JSX 语法，从而无法进行代码检查。比如在下面的代码中，我们使用了 JSX 语法，但 ESLint 报错了。
-- -------------------- ---- -------
------ ----- ---- --------
-------- ----- -
------ -
---- ----------------
--------- ----------
------
--
-
------ ------- ----错误提示内容如下：
Parsing error: Unexpected token <
这是因为 ESLint 默认不支持 JSX 语法，需要进行额外的配置和安装。
解决方法
我们可以通过修改 .eslintrc 文件，以支持 JSX 语法检查。具体步骤如下：
- 安装 eslint-plugin-react 、babel-eslint 和 eslint-config-airbnb 这三个依赖包。
npm install eslint-plugin-react babel-eslint eslint-config-airbnb --save-dev
- 打开项目中的
.eslintrc文件，添加如下内容：
-- -------------------- ---- -------
-
---------- -
---------
--------------------------
--
---------- -
-------
--
--------- ---------------
-------- -
------------------------------- ------ -- ---------
------------------- -
--------
-
--------- -
----------
-
-
-
-
-这一配置文件添加了三个主要的配置项：
extends：使用了 eslint-config-airbnb 设定的规则和 eslint-plugin-react 进行支持。plugins：引入了 eslint-plugin-react 插件。parser：使用了 babel-eslint 解析器以支持 JSX 语法。
还可以在 rules 中根据需求添加、关闭一些规则，以保证代码风格的一致性。
- 重新启动 ESLint 以应用新的设置。
npm run lint
- 如果上面的配置无法正常工作，可以查看下
babel-eslint是否没有安装或者是否安装的版本不与 eslint 版本兼容。(例: eslint v7.x 与 babel-eslint v10.x 兼容)
这样，我们就可以在 React 项目中正常使用 ESLint 进行代码检查了。
结语
在 React 项目中使用 ESLint 进行代码检查是一个非常好的实践，可以帮助我们更好地维护代码质量。以上是我对解决 ESLint 未识别 JSX 语法的问题的方法和思路的总结，希望能对你的项目有所帮助。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/64fdbe1095b1f8cacdcf574e