1. eslint概述
eslint是前端script 代码规范检测工具.
作用是啥:
-
保证一致的代码风格,提升项目可维护性
-
根据最佳实践减少语法问题导致的潜在bug,提升项目稳定性和安全性
能做啥:
- 包括但不限于js,ts及各种前端框架vue,react,angular,svelt......
不能做啥
- json,css,markdown非js代码无法检测.这些语言由其他检测工具检测,比如stylelint,markdownlint,htmlhint
2. eslint工作流程
我们要让规范意识深入到每个开发人员的内心中去,在开发各环节进行代码质量把控,确保发布的代码具有较高的稳定性和安全性.
- 开发阶段:
- 在项目中配置eslint
- 通过IDE的eslint插件对编辑中的文档进行实时检测
- 在编辑过程中及时发现解决问题
- 上传阶段:
- 配置git钩子
- 上传代码时由eslint cli工具对增量代码进行检测
- 确保进入仓库的代码都是符合规范的
- 部署阶段:
- 各种devops工具(gitlibci/genkins/sonarqube)触发
- 由eslint cli工具对全量代码检测
- 确保发布的代码都是符合规范的
3. eslint配置文件构成
内置规则
- eslint官方内置的ecmascript规则
第3方插件
- 各个框架相关的规则
自研插件
- 根据公司独特规范开发的规则
所有规则默认禁用状态.根据公司实际情况,启用对应规则,形成自己的eslint标准规范.并输出npm包进行统一管理 .
4. eslint规范开发流程
规范是动态更新的过程.并不是你设设定好一个规范就完事儿了,根据项目进度,团队成员能力要时刻更新规范和完善工具.
比如
- 圈复杂度,在团队成员能力还需要提升的时候,就不要强制要求函数的圈复杂度.经过一段时间训练后,再将圈复杂度的规范给添加进去
- 单元测试规范,在团队还没有编写单元测试的习惯时,做单元测试的规范要求就是纯属纸上谈兵,毫无实际用处,待团队成员真正开始写单元测试的时候,再来更新完善单元的规范
