利用husky&lint-staged构建代码检查工作流

·  阅读 3971

对于具有一定工程素养的同学来说, 都会尤为注重编码规范, 而代码风格检查(lint)是确保编码规范一致性的重要手段.

lint, 即对代码进行静态分析, 并试图找出潜在问题的工具.

使用Lint好处

  • 更高的代码可读性. 代码写出来最终还是需要给其他人阅读的, 乱乱糟糟的代码, 会让代码阅读者望而却步, 代码通常难以理解, 也就无从谈起代码的可维护性了.
  • 更少的bug. 有研究表明, 全球因软件Bug造成的经济损失约3000多亿美金
  • 更高的开发效率, Lint能够很容易的帮助我们发现低级/显而易见的错误.

前端Lint工具

何时进行代码检查

目前比较常见的代码检查工作流分为本地和远程两种:

1. 本地提前代码前(git hooks触发)

代码commit => 触发git precommit钩子 => 代码检查发现问题(本地) => 
修复问题 => 代码重新commit => 触发git precommit钩子 => 代码检查发现问题(本地)
复制代码

2. 持续集成阶段(CI)

代码提交 => 代码检查发现问题(远程) => 修复问题 => 代码重新提交 => 代码检查通过(远程)
复制代码

远程Lint涉及多较多的配置, 且远程Lint的反馈链条太长,不作过多介绍.

这里主要讲解下本地提前代码前, 如何进行代码检查.

本地代码提交前Lint

在本地进行代码检查, 是比较方便的. 常见的做法是使用huskypre-commit在本地代码提交前进行Lint

这里, 我们以husky为例, 使用vue/cli 3.0创建的vue工程当中来实践下

vue/cli 3.0创建工程的过程, 这里不再介绍, 有需要的同学, 可以参考下vue/cli官网

使用husky

安装依赖

yarn add husky --dev
复制代码

或者

npm install -D husky
复制代码

修改package.json

修改package.json, 添加以下配置

"husky": {
  "hooks": {
    "pre-commit": "yarn lint"
  }
}
复制代码

"pre-commit"调用的"yarn lint"命令, 即package.json中"script"中配置的命令:

"scripts": {
  "serve": "vue-cli-service serve",
  "build": "vue-cli-service build",
  "lint": "vue-cli-service lint",
  "test:unit": "vue-cli-service test:unit"
}
复制代码

尝试git commit

此时, 修改本地代码, 故意写出一些错误代码, 然后提交代码, 在git commit时, 得到的结果可能如下:

$ git commit -m "test: add error code for test"
husky > pre-commit (node v10.15.3)
$ vue-cli-service lint
error: Parsing error: Unterminated string constant

  22 |   methods: {
  23 |     submit() {
> 24 |       this.$http.get('xxxxhello).then(res => {
     |                      ^
  25 |         this.list = res.data.data.list
  26 |
  27 |       }); at src\views\About.vue:38:21:
  36 |   methods: {
  37 |     submit() {
> 38 |       this.$http.get('xxxxhello).then(res => {
     |                     ^
  39 |         this.list = res.data.data.list
  40 |
  41 |       });


1 error found.
error Command failed with exit code 1.
info Visit https://yarnpkg.com/en/docs/cli/run for documentation about this command.
husky > pre-commit hook failed (add --no-verify to bypass)
error Command failed with exit code 1.
复制代码

渐进式使用Lint工具

按上面的做法, 会将整个仓库在提交时都会进行格式化. 但在实际工作当中, 有些仓库是存量的, 已经有不少代码编写不规范, 但并不影响功能. 因此, 多数情况下, 大家还是希望在项目当中能够渐进式的使用这些工具. 相对而言, 保证业务系统的稳定性是最重要的事情. 针对此种场景, 我们可以考虑使用lint-staged

lint-staged

lint-staged 就是基于此种场景开发的,其中 staged 是 Git 里面的概念,指待提交区,使用git commit -a,或者先 git add 然后 git commit 的时候,你的修改代码都会经过待提交区。

lint-staged用法

安装依赖

yarn add lint-staged --dev
复制代码

或者

npm install -D lint-staged
复制代码

修改package.json

修改package.json

"husky": {
  "hooks": {
    "pre-commit": "lint-staged"
  }
},
"lint-staged": {
  "src/**/*.{js,vue}": [
    "vue-cli-service lint",
    "git add"
  ]
}
复制代码

尝试提交代码

$ git commit -m "test: test lint "
husky > pre-commit (node v10.15.3)
‼ Some of your tasks use `git add` command. Please remove it from the config since all modifications made by tasks will be automatically added to the git commit index.

[STARTED] Preparing...
[SUCCESS] Preparing...
[STARTED] Running tasks...
[STARTED] Running tasks for src/**/*.{js,vue}
[STARTED] vue-cli-service lint
[FAILED] vue-cli-service lint [FAILED]
[FAILED] vue-cli-service lint [FAILED]
[SUCCESS] Running tasks...
[STARTED] Applying modifications...
[SKIPPED] Skipped because of errors from tasks.
[STARTED] Reverting to original state because of errors...
[SUCCESS] Reverting to original state because of errors...
[STARTED] Cleaning up...
[SUCCESS] Cleaning up...

× vue-cli-service lint:
error: Parsing error: Unterminated string constant

  22 |   methods: {
  23 |     submit() {
> 24 |       this.$http.get(xxxxhello").then(res => {
     |                               ^
  25 |         this.list = res.data.data.list;
  26 |       });
  27 |     } at src\views\About.vue:38:30:
  36 |   methods: {
  37 |     submit() {
> 38 |       this.$http.get(xxxxhello").then(res => {
     |                              ^
  39 |         this.list = res.data.data.list;
  40 |       });
  41 |     }


1 error found.
husky > pre-commit hook failed (add --no-verify to bypass)
error Command failed with exit code 1.
复制代码

更多选择

实际上, lint-staged可以让你在提交代码前有更多的操作自由度, 比如添加以下配置, 能够自动修复错误:

"lint-staged": {
  "src/**/*.{js,vue}": [
    "vue-cli-service lint --fix",
    "git add"
  ]
}
复制代码

或者使用下面的配置, 自动格式化代码(请谨慎使用)

"lint-staged": {
  "src/**/*.{js,vue}": [
    "vue-cli-service lint --fix",
    "prettier --write",
    "git add"
  ]
}
复制代码

相关链接

分类:
前端
标签: