前端 eslint 代码规范
代码规范的落地-yjyz

什么时候需要？

  • 团队开发，每个人写法不统一
  • 低级错误如重复声明，声明后未使用等

背景

  • 已经上线的，仍在迭代的项目(换言之已经有即便设置了规则也需要手动改回来的代码)

本次实现功能

  • 团队内的前端项目可以使用同一份代码规范
  • 取代手动，保存时把代码自动更新为规范的格式
  • 开发可以根据情况，选择性规范化如： 旧代码不做按规范格式化 || 某些场景特殊，忽略某行、某文件的规范化 || 整个项目格式化
  • git提交前，检查本次提交的所有文件，所有文件都需要按规范格式化，检查到还有0问题了，才允许提交

技术栈的选用

  • 选用eslint，.eslintrc.js设置rule和.eslintignore设置忽略校验的文件
  • 选用prettier，vscode设置保存时修正代码
  • 选用husky书写git钩子，选用lint-staged实现找出在暂存区的文件，用eslint --fix指令实现暂存区的文件自动修正
  • 用vue-cli-service lint src/components/page/m/指令实现对某一文件夹内所有文件格式化，忽略路径即整个项目格式化
  • 在代码上注释 eslint-disable-next-line complexity 来阻止对这行代码的检查和报错
  • rule作为结合项目本身使用的vue-cli，脚手架也提供了对应的eslint插件，去检查，去自动修复文件，结合插件
  • 注意：自动格式化无法100%覆盖你的代码，仍有部分无法格式化的代码需要你手动修复

以上技术的选用，意味着你：

  1. 在每次本地git提交代码的时候，会出现两种情况：

A： 不是自己创建的，但之前已经存在的文件（你可能只写了一行），需要你接盘了(大笑)。你需要在本次提交中全部修正过来（具体看↓↓↓：迭代过程中落地 open.web.portal）

B： 新文件，同样是在本次提交中，同样需要负责全部按规则来书写。

  1. 不在本此提交的代码（也就是你有富余时间来修正了）可以有两种办法修正

A： npm run lint-fix（实际执行vue-cli-service lint --fix），全局检查且修正指令。 特点： 项目代码越多，耗时越久

B： vscode，下载安装eslint插件，通过tab《问题》，打开任意文件会及时反馈不符规则的具体情况

什么决定了规则规范能顺利落地的工作量?

  1. 看规则的多少
  2. 看代码的多少
  3. 看代码写法和规则的契合程度

具体规则：

迭代过程中落地

open.web.portal
// 0. 安装vscode的插件：eslint prettier


erp.web.portal-薪酬模块1202的代码根据规则修复
ops.web.portal-资金划拨模块1202的代码根据规则修复
  • 资金划拨模块
  • 用时参考：
  • 20个文件
  • 修复耗时2h
  • 其中走vue-cli-service lint指令的自动修复30s，占总修改代码80%
  • 走手动修复接近1h，占总修改代码20%
"lint-fix-funding": "vue-cli-service lint src/components/page/funding/"
yjyz.h5.portal-薪酬，海报模块
  • 薪酬，海报模块
  • 用时参考：
  • 19个文件
  • 修复耗时1h
  • 其中走vue-cli-service lint指令的自动修复10s，占总修改代码80%
  • 走手动修复接近1h，占总修改代码20%
"lint-fix-salary": "vue-cli-service lint src/components/page/salary/"

修复技巧汇总

  • 自动根据eslint和prettier保存vscode设置-打开json文件写入:
"editor.codeActionsOnSave": {    "source.fixAll": true},
  • 点击查看vue特有的规则

会打开规则解释的链接： https://eslint.vuejs.org/rules/no-mutating-props.html

  • 遇到不想处理或者有歧义的规则时，可以先置之不理，跟组员商量下怎么设置规则最后通知全部人：
  1. 鼠标悬浮并选择快速修复
  2. 加一行注释，跳过eslint
// eslint-disable-next-line complexity
  • 如果你认为网页上弹出了全局的eslint的错误和警告，配置一下vue.config.js就行了
devServer: {    port: 8888,    overlay: {        warnings: false, //不显示警告        errors: false	//不显示错误    }}

期待最终效果：

  • 提升代码编写质量与速度，可节省调试，解决问题时间开销
  • 避免无端而起的坏心情
  • 进一步促进工作效率

最后需要提醒的是：您在编写高质量代码时付出的努力越多，您花在调试上的时间就越少

参考：


日期：2020-11-20 12:03 | 阅读：251 | 评论：0