在React项目中添加ESLint
1. 安装eslint
npm install eslint --save-dev // 或者 yarn add eslint --dev
2. 初始化配置文件
npx eslint --init //进入问题配置页面
选择Airbnb会自动安装react相关的插件,包含eslint-plugin-react-hooks。
3.在VSCode的Extensions中安装Eslint
从插件说明中可知这个插件的默认配置文件位置:
它会默认查找当前工作目录下的根文件夹下的.eslintrc.*或者.eslintrc文件。即第2步生成的文件, 按照该文件的配置内容进行代码校验。
4. 错误分析
如果ESLint在VSCode中未起作用。根据上面的步骤分析可知有两个方向错误
1. VSCode未安装ESLint
2. 配置文件有问题
即当前工作目录下的根文件夹下找不到配置文件。
1)配置文件名称错误。如: .essslintrc.js
2)配置文件正确且在当前项目的根文件夹下,但是,当前项目不是当前工作目录。
如图所示,当前工作目录是当前项目的父文件夹,VSCode会到React下查找配置文件,查找失败!
解决该问题的办法:
1)将当前项目作为当前工作目录。
✅推荐使用这种。这样不需要额外配置。
2)修改VSCode中ESLint查找配置文件的位置。
Code->Perference(首选项)->settings(配置)
在配置文件中添加ESLint插件的配置文件路径:
// ❌不推荐使用,这样之后的所有项目都需要重新配置 { "eslint.options": {"configFile": "/Users/lyralee/Desktop/MyStudy/React/webpackdemo/.eslintrc.js"}, // ...其他的配置 }
5. 细节注意
1. 动态import校验
【推荐】编程新体验,更懂你的AI,立即体验豆包MarsCode编程助手
【推荐】凌霞软件回馈社区,博客园 & 1Panel & Halo 联合会员上线
【推荐】抖音旗下AI助手豆包,你的智能百科全书,全免费不限次数
【推荐】博客园社区专享云产品让利特惠,阿里云新客6.5折上折
【推荐】轻量又高性能的 SSH 工具 IShell:AI 加持,快人一步