create-react-app的cra模版，如何禁用eslint代码检测功能？

我们相信：世界是美好的，你是我也是。 来玩一下解压小游戏吧！

eslint经常会给出很多莫名其妙的错误信息，对新人很不友好，导致“十万个为什么”问题严重积压。在以前的electron-vue编程中，苏南大叔就曾经说过，最好要禁用eslint。那么在create-react-app的cra模版中，默认是开启eslint的。该如何禁用它呢？这就是本文要解决的主要问题。

苏南大叔的“程序如此灵动”博客，记录苏南大叔的代码编程经验总结。本文测试环境：nodejs@20.18.0，create-react-app@5.0.1，react-router-dom@6.27.0，react@18.3.1，eslint@2.1.4。create-react-app的cra模版，就是个龙套角色，其它项目禁用eslint的需求，也可以参考本文思路。

局部禁用eslint检查

局部禁用eslint检查功能的方式，就是在触发eslint警告信息的代码上面，添加特殊注释信息。例如：

useEffect(() => {
  setHistoryRecords([location].concat(historyRecords));
}, [location]);

这里会提示信息：

React Hook useEffect has a missing dependency: 'historyRecords'. 
Either include it or remove the dependency array. 
You can also do a functional update 'setHistoryRecords(h => ...)' if you only need 'historyRecords' in the 'setHistoryRecords' call  react-hooks/exhaustive-deps

解决方案：

// eslint-disable-next-line
}, [location]);

参考文章：

• https://newsn.net/say/react-router-listen.html

全局禁用eslint

在cra模版的项目根目录的package.json中，有一段关于eslint的配置信息，找到并删除，就可以禁用eslint了。参考删除的配置信息如下：

"eslintConfig": {
  "extends": [
    "react-app",
    "react-app/jest"
  ]
},

彻底删除eslint

如果一定要这样做，也可以直接npm uninstall。命令如下：

npm uninstall @eslint @eslint-community @typescript-eslint eslint eslint-config-react-app eslint-import-resolver-node eslint-module-utils eslint-plugin-flowtype eslint-plugin-import eslint-plugin-jest eslint-plugin-jsx-a11y eslint-plugin-react eslint-plugin-react-hooks eslint-plugin-testing-library eslint-scope eslint-visitor-keys eslint-webpack-plugin

这些第三方包，可以在根目录下面，执行下面的命令获得：

ls node_modules | grep eslint

参考文章：

• https://newsn.net/say/grep.html
• https://newsn.net/say/win-ls.html

结语

eslint确实可以提醒新手编码规范，但是也会干扰调试的视线。所以，大家根据需要禁用它即可。如果不是create-react-app的cra模版，其它项目也可以参考上面的思路进行禁用。

更多create-react-app的文章，请参考苏南大叔的博客文章集锦：

• https://newsn.net/tag/react/

如果本文对您有帮助，或者节约了您的时间，欢迎打赏瓶饮料，建立下友谊关系。
本博客不欢迎：各种镜像采集行为。请尊重原创文章内容，转载请保留作者链接。