code format&linter插件与Git Hooks组合拳

·  阅读 835

vscode Prettier vs Linter

Prettier

code格式化插件,支持以下语言:

  • JavaScript (including experimental features)
  • JSX
  • Angular
  • Vue
  • Flow
  • TypeScript
  • CSS, Less, and SCSS
  • HTML
  • JSON
  • GraphQL
  • Markdown, including GFM and MDX
  • YAML

Linter

检查code是否符合规范、是否存在潜在的bug

两者如何选择呢?引用官网的一段话:

Prettier for formatting and linters for catching bugs!
复制代码

Git Hooks

用于在Git特定的动作发生时,触发特定的脚本,譬如shell脚本、python脚本、Ruby脚本等。只管添加即可,不用管调用问题。

介绍

hooks分客户端和服务端两大类。

client:

  • git hooks code存放在.git/hooks文件夹中
  • 其中存放的都是一些示例脚本,以sample后缀。删除后缀后,即可激活。

server端,可以利用发送一些通知、构建等

分类

client

  • 提交工作流 Hooks

    • pre-commit - 提交文件到暂存区触发,可用于code lint校验等
    • prepare-commit-msg - pre-commit之后,产生一些默认提交信息
    • commit-msg - 提交注释信息时候,可以用正则检测是否符合特定模板要求,譬如以feat|test等开头
    • post-commit - 提交完毕,可用于通知
  • 邮件工作流 Hooks

    • applypatch-msg - 检查提交信息是否符合格式,或者用于脚本修正格式错误
    • pre-applypatch - 用于检测暂存区是否还有遗漏
    • post-applypatch - 可用于通知
  • 其他 Hooks

    • pre-rebase - 运行于变基之前
    • post-rewrite - 重写命令调用后
    • post-checkout - checkout发生后触发
    • post-merge - merge后
    • pre-push - push之前触发

server

  • pre-receive - 最新调用,同时向多个分支推送,仅触发一次
  • update - 同时向多个分支推送,每个分支触发一次,
  • post-receive - 可用于通知

如何组合

pre-commit

  • 把lint、prettier命令,写入到shell脚本

  • 然后对应的脚本放入.git/hooks下

post-receive

用于触发自动构建

小技巧

vscode打开git工程,可是.git目录不展示,如何fix ?

vscode 默认通过正则不展示.git, .svn等文件夹,可通过修改正则展示

上述组合有何问题?

hooks不会跟随项目fork走,只留在本地

如何解决

本文主要介绍方案二,原理大致相同

  • 方案一: 另外新建项目.hooksDir用于管理,建立软连接
 cd <repo>/.git/hooks
 ln -s ../../.githooks ./ 
复制代码
  • 方案二: 使用npm包git-hooks-plus
  • 方案三: 使用已有方案husky
  • 方案四: 使用imlint

解决方案实践

git-hooks-plus

npm包安装

npm install git-hooks-plus --save-dev
复制代码

code添加

mkdir -p .githooks/pre-commit
echo -e '#!/usr/bin/env node' "\nconsole.log('hi!');" > .githooks/pre-commit/hello.js
chmod +x .githooks/pre-commit/hello.js  # This may not working in Windows, but don't worry, hello.js will be executed
复制代码

shell脚本 添加

#!/bin/bash
echo 'hello world run by pre-commit sh'
复制代码

运行效果

如何实现的呢?

  • 修改.git/hooks文件夹,重新创建一份
  • git commit事件触发前,调用.git/hooks下pre-commit
  • 调用对应的git-hooks-plus js run 方法

  • git-hooks-plus 会依据hookName, 查找对应pre-commit目录中的可执行的js or sh文件,然后执行

  • 执行,使用了node 子线程spawn方法

options.stdio 选项用于配置在父进程和子进程之间建立的管道。 默认情况下,子进程的 stdin、 stdout 和 stderr 会被重定向到 ChildProcess 对象上相应的 subprocess.stdin、subprocess.stdout 和 subprocess.stderr 流。 这相当于将 options.stdio 设置为 ['pipe', 'pipe', 'pipe']。

为方便起见, options.stdio 可以是以下字符串之一:

'pipe' - 相当于 ['pipe', 'pipe', 'pipe'](默认值)。
'ignore' - 相当于 ['ignore', 'ignore', 'ignore']。
'inherit' - 相当于 ['inherit', 'inherit', 'inherit'] 或 [0, 1, 2]。
复制代码

参考

child_process

分类:
开发工具
标签: