资讯专栏INFORMATION COLUMN

pre-commit钩子,代码质量检查

stefanieliang / 2634人阅读

摘要:目前基本使用三款代码质量检查工具。使用脚本检查,可以参考里面如何使用文件名是在之前启用的钩子函数,利用查看当前有哪些文件修改过,只对指定文件夹中修改的文件使用进行代码检查,渐进式对整个项目实现代码规范。

目前基本使用三款js代码质量检查工具: jslint, jshint, eslint。许多IDE里面也有对应的检查插件,在每次ctrl + s 保存文件的时候,检查当前文件是否符合规范,保证代码质量。
许多团队都会指定一套代码规范code review,更加严格的检查每次代码修改。 也可以在git commit之前,检查代码,保证所有提交到版本库中的代码都是符合规范的,

在看vue源码时,不免修改代码,就会触发里面配置好的钩子函数。于是,仔细研究了一下vue配置方法,可以发现配置非常简单。

git 钩子文档上介绍非常详细,git init后,在.git/hooks文件中,有一些.simple结尾的钩子示例脚本,如果想启用对应的钩子函数,只需手动删除后缀。所以,列出两种配置方法:

1. 手动修改钩子文件

按照文档上,配置钩子脚本,修改hooks中文件名对应的钩子文件,启用钩子。使用shell脚本检查,可以参考vue1.x 里面如何使用

    !/usr/bin/env bash
    
     # get files to be linted
    FILES=$(git diff --cached --name-only | grep -E "^src|^test/unit/specs|^test/e2e")
    
     # lint them if any
    if [[ $FILES ]]; then
      ./node_modules/.bin/eslint $FILES
    fi

文件名是pre-commit,在commit 之前启用的钩子函数, 利用 git diff查看当前有哪些文件修改过,只对指定文件夹中修改的文件使用eslint进行代码检查,渐进式对整个项目实现代码规范。

脚本写好后,不用每次都手动复制到.git/hooks目录下,只需对当前文件创建软连接,到指定目录,在package.json中配置脚本命令,

"scripts": {
   "install-hook": "ln -s ../../build/git-hooks/pre-commit .git/hooks/pre-commit",
}

在项目初始化后, 执行npm run install-hook,很方便地配置好了pre-commit 钩子

2. 利用yorkie or husky + lint-staged 构建钩子

在 vue最新的版本中,已经使用尤大改写的youkie, youkie实际是fork husky,然后做了一些定制化的改动, 使得钩子能从package.json的 "gitHooks"属性中读取,

{
  "gitHooks": {
    "pre-commit": "foo"
  }
}

使用方法跟husky 类似,可以查看husky 文档,介绍非常详细。

 npm install husky --save-dev
 # or npm install yorkie --save-dev

安装完成后,可以发现已经改写了hooks 目录中的文件,只需在package.json 中配置对应钩子要执行的脚本。
husky 配置:

// package.json
{
  "husky": {
    "hooks": {
      "pre-commit": "npm test",
      "pre-push": "npm test",
      "...": "..."
    }
  }
}

回头看看,vue中如何配置

// package.json
 "gitHooks": {
    "pre-commit": "lint-staged",
    "commit-msg": "node scripts/verify-commit-msg.js"
  }
 "lint-staged": {
    "*.js": [
      "eslint --fix",
      "git add"
    ]
  }

前面提到,利用git diff,只lint当前改动的文件,lint-staged就非常准确的解决了这一问题,从这个包名,就可以看出,Run linters on git staged files,只针对改动的文件进行处理。
结合husky一起使用,安装依赖:

npm install --save-dev lint-staged husky

修改package.json 文件

{
+ "husky": {
+   "hooks": {  
+     "pre-commit": "lint-staged"
+   }
+ },
+ "lint-staged": {
+   "*.js": ["eslint --fix", "git add"]
+ }
}

使用了eslint,需要配置.eslintrc, lint-staged还有一个好处,可以在lint后,更加灵活,执行其他脚本,尝试进行修改错误,比如 eslint --fix 检查后并修复错误。

上面列出的vue 文件使用了类似的配置,另外增加了 commit-msg 钩子,对提交说明进行检查,在 scripts/verify-commit-msg.js文件中可以找到检查脚本,

const chalk = require("chalk")
const msgPath = process.env.GIT_PARAMS
const msg = require("fs").readFileSync(msgPath, "utf-8").trim()

const commitRE = /^(revert: )?(feat|fix|polish|docs|style|refactor|perf|test|workflow|ci|chore|types|build)((.+))?: .{1,50}/

if (!commitRE.test(msg)) {
  console.log()
  console.error(
    `  ${chalk.bgRed.white(" ERROR ")} ${chalk.red(`invalid commit message format.`)}

` +
    chalk.red(`  Proper commit message format is required for automated changelog generation. Examples:

`) +
    `    ${chalk.green(`feat(compiler): add "comments" option`)}
` +
    `    ${chalk.green(`fix(v-model): handle events on blur (close #28)`)}

` +
    chalk.red(`  See .github/COMMIT_CONVENTION.md for more details.
`) +
    chalk.red(`  You can also use ${chalk.cyan(`npm run commit`)} to interactively generate a commit message.
`)
  )
  process.exit(1)
}

利用process.env.GIT_PARAMS 找到目录,读取msg 说明,进行检查。

使用 husky 要注意,对应属性名已经改为HUSKY_GIT_PARAMS , 而不是原始的 GIT_PARAMS 环境变量。

文章版权归作者所有,未经允许请勿转载,若此文章存在违规行为,您可以联系管理员删除。

转载请注明本文地址:https://www.ucloud.cn/yun/53111.html

相关文章

  • pre-commit钩子代码质量检查

    摘要:目前基本使用三款代码质量检查工具。使用脚本检查,可以参考里面如何使用文件名是在之前启用的钩子函数,利用查看当前有哪些文件修改过,只对指定文件夹中修改的文件使用进行代码检查,渐进式对整个项目实现代码规范。 目前基本使用三款js代码质量检查工具: jslint, jshint, eslint。许多IDE里面也有对应的检查插件,在每次ctrl + s 保存文件的时候,检查当前文件是否符合规范...

    Prasanta 评论0 收藏0
  • tslint pre-commit 配置教程

    摘要:而解决的需求既是拒绝向仓库提交错误代码。的配置就在项目文件夹下面的文件夹中。而存在报错的话,会终止提交。而只是单独钩子,因此还需要在这个钩子下去做相同的配置。 tslint 配合pre-commit的意义 为什么用pre-commit 加 tslint(jshint,eslint原理都类似),因为在项目中我们会经常忘记主动的去做代码检查,虽然结合webpack各种构建工具下,存在*sl...

    bang590 评论0 收藏0
  • 前端自动化工作流中的hooks

    摘要:例如提供的用于修改的钩子就需要在的同时从远程服务器下载到本地来替换,代码如下这当然是一种好方式。安装简单到看完配置就懂了吧,直接在中增加这一项,并直接把想执行的语句写在里面即可。在前端的日常工作中,经常会出现当执行一种操作之前(之后)需要同时执行另一种操作的情况,比如我们希望在每次git commit之前都运行eslint代码检查、npm install之前检查项目依赖等。作为经典的情况,各...

    marek 评论0 收藏0

发表评论

0条评论

stefanieliang

|高级讲师

TA的文章

阅读更多
最新活动
阅读需要支付1元查看
<