Code Review效率工具

前言

在code review的时候，代码风格是其中审查的指标之一。在审查代码风格其实是有一定工作量的。为了减少代码审查的工作量，我们何不把代码风格在提交代码之前就规范掉？这样我们就可以在代码审查中节约出很多时间，来做更多的其他更有意义的事情。

正文

Git Hooks

在git中提供了hook,就是在触发代码提交，push等一系列操作的时候，提供了触发其他程序的钩子。

官方文档: https://git-scm.com/docs/githooks

husky

Git hooks made easy

Husky can prevent bad git commit, git push and more 🐶 woof! huasky 官方

安装

npm install husky --save-dev

// package.json
{
  ...
  "scripts":{
    "lint":"eslint src --ext .js,.jsx,.ts,.tsx --fix"
  },
  "husky": {
    "hooks": {
      "pre-commit":"lint",
      "commit-msg":"commitlint -E HUSKY_GIT_PARAMS"
    }
  },
}

尝试 Git 提交，会自动触发 npm run lint，如果不通过就会抛出错误。这样我们就可以在代码提交之前验证一下我们的代码lint是否通过。

对于一些以前从来没有用过eslint的项目来说，突然引入这种工具。你可能面临的是把所有文件都按照eslint都格式化一遍。那不是疯了吗?

lint-staged

Run linters against staged git files and don't let 💩 slip into your code base!

可以实现 eslint只检查本次提交的文件。这样我们就可以做到渐进式的改善我们的代码质量。 lint-staged 官网

安装

npm install lint-staged --save-dev

{
  "scripts":{
    "lint":"eslint src --ext .js,.jsx,.ts,.tsx --fix"
  },
  "husky": {
    "hooks": {
      "pre-commit": "lint-staged"
    }
  },
  "lint-staged":{
    "*.{js,jsx,ts,tsx}":[
      "npm run lint",
      "git add"
    ]
  },
}

尝试 Git 提交，会自动触发 lint-stage，只对本次改动的文件执行npm run lint。这样我们就可以在代码提交之前验证一下我们当前发生变动的代码lint是否通过。

后记