一、真实项目代码案例
（一）识别未引用资源，减少非必要资源引入
当引入了资源，而没有实际使用，代码编辑器以非高亮颜色展示，鼠标移到代码，会提示
（二）识别重复定义的属性
当表单有大量字段的时候，一不留神容易出现重复定义字段，可能会影响程序功能，ESlint能识别后波浪线显示
小小挑战一下，如下代码有什么问题？
问题：代码重复定义了dataOptions，上面写的dataOptions不会生效，因为没有开启ESlint，忙碌的开发者并没有注意到这个问题，导致开发者debugger了好久。
（三）识别不符合框架的约定规则，警告提示
该错误是 Vue.js 项目中常见的 ESLint 规则警告，表示子组件直接修改了父组件传递的 fileList props，违反了 Vue 的单向数据流原则
（四）可识别未定义的变量
二、使用ESlint带来的收益
① 减少无用资源引用，意味着能提升页面渲染，减少带宽
② 标记语法问题，可让工程师快速知道问题，解决问题
③ 统一编码风格，提升协作效率
下图这部分代码并不需要修改，但因为格式设置问题，被修改了，代码评审，或者查看变更记录就要花费更多的时间。
三、如何使用ESlint
业界通常ESlint+Prettier搭配组合使用。ESLint 和 Prettier 是前端开发中常用的代码质量工具组合，它们分别承担不同的职责但需要协同工作：
核心功能差异
- ESLint：专注于代码质量检查，包括语法错误检测、潜在问题预警（如未使用变量）、代码风格约束（如引号类型）等，支持通过插件扩展规则
- Prettier：专注于代码格式化，自动处理缩进、换行、空格等视觉样式，支持多种语言但无代码逻辑分析能力
如你的项目还未配置ESlint，可参考 ESlint9+Prettier从0开始配置教程
在旧的项目中如何使用
（一） 首先用命令执行一遍ESlint自动修复一些不符合规则的语法以及统一格式。配置lint脚本，即可使用npm run lint批量处理一波。
！！！切记，不要格式化和改缺陷一起提交。ESlint应该是一个单独的提交记录。否则如果变动太大，将难以对比改缺陷改了哪些代码。
对于未使用格式化的页面，如果与他人一起协作，不要随意格式化，会导致冲突不好解决。
（二）对于某些不需要ESlint的页面，比如某些库你不想改动它，可使用eslint-disable忽略ESlint规则。
结语：现代开发使用ESlint已经是一个必选项，而不是可选项。如果你想提高代码质量，提升工作效率，应该毫不犹豫行动起来。
原创文章，如需转载，请注明出处。
