手撕vben 

第十九章-使用husky规范代码提交

1.说明

这一章要实现的东西很多，使用Git提交代码的时候，需要对暂存的代码进行如下操作：

  • 进行lint操作。
  • 对commit的消息进行格式化检查。
  • 进行prettier操作。

本章我们需要安装的依赖有：husky、lint-staged、@commitlint/cli、@commitlint/config-conventional、pretty-quick、is-ci。

  • husky：可以在Git的钩子函数中执行脚本。
  • lint-staged：针对暂存文件进行lint操作。
  • @commitlint/cli：对commit的消息进行格式检查。
  • @commitlint/config-conventional：commit的消息检查格式传统配置，对应还有很多其他配置，比如angular的提交规范@commitlint/config-angular。
  • pretty-quick：针对暂存文件进行prettier操作。
  • is-ci：husky好像不能在ci环境下执行，这个依赖是用来判断是不是ci环境的。我也不知道什么是ci环境。

参考链接：

2.安装

yarn add husky lint-staged @commitlint/cli @commitlint/config-conventional pretty-quick is-ci --dev

3.配置commitlint

在根目录下创建commitlint.config.js文件。

3.1.原代码

module.exports = {
  ignores: [(commit) => commit.includes('init')],
  extends: ['@commitlint/config-conventional'],
  parserPreset: {
    parserOpts: {
      headerPattern: /^(\w*|[\u4e00-\u9fa5]*)(?:[\(\（](.*)[\)\）])?[\:\：] (.*)/,
      headerCorrespondence: ['type', 'scope', 'subject'],
      referenceActions: [
        'close',
        'closes',
        'closed',
        'fix',
        'fixes',
        'fixed',
        'resolve',
        'resolves',
        'resolved',
      ],
      issuePrefixes: ['#'],
      noteKeywords: ['BREAKING CHANGE', '不兼容变更'],
      fieldPattern: /^-(.*?)-$/,
      revertPattern: /^Revert\s"([\s\S]*)"\s*This reverts commit (\w*)\./,
      revertCorrespondence: ['header', 'hash'],
      warn() {},
      mergePattern: null,
      mergeCorrespondence: null,
    },
  },
  rules: {
    'body-leading-blank': [2, 'always'],
    'footer-leading-blank': [1, 'always'],
    'header-max-length': [2, 'always', 108],
    'subject-empty': [2, 'never'],
    'type-empty': [2, 'never'],
    'type-enum': [
      2,
      'always',
      [
        'feat',
        'fix',
        'perf',
        'style',
        'docs',
        'test',
        'refactor',
        'build',
        'ci',
        'chore',
        'revert',
        'wip',
        'workflow',
        'types',
      ],
    ],
  },
};

3.2.带注释的代码

module.exports = {
  // ↓忽略包含init的提交消息
  ignores: [(commit) => commit.includes('init')],
  // ↓按照传统消息格式来验证
  extends: ['@commitlint/config-conventional'],
  // ↓这里是自定义解析器，看不太懂，直接搬代码吧
  // ↓https://commitlint.js.org/#/reference-configuration?id=parser-presets
  parserPreset: {
    parserOpts: {
      headerPattern: /^(\w*|[\u4e00-\u9fa5]*)(?:[\(\（](.*)[\)\）])?[\:\：] (.*)/,
      headerCorrespondence: ['type', 'scope', 'subject'],
      referenceActions: [
        'close',
        'closes',
        'closed',
        'fix',
        'fixes',
        'fixed',
        'resolve',
        'resolves',
        'resolved',
      ],
      issuePrefixes: ['#'],
      noteKeywords: ['BREAKING CHANGE', '不兼容变更'],
      fieldPattern: /^-(.*?)-$/,
      revertPattern: /^Revert\s"([\s\S]*)"\s*This reverts commit (\w*)\./,
      revertCorrespondence: ['header', 'hash'],
      warn() {},
      mergePattern: null,
      mergeCorrespondence: null,
    },
  },
  // ↓自定义提交消息规则
  rules: {
    // ↓body以空白行开头
    'body-leading-blank': [2, 'always'],
    // ↓footer以空白行开头
    'footer-leading-blank': [1, 'always'],
    // ↓header的最大长度
    'header-max-length': [2, 'always', 108],
    // ↓subject为空
    'subject-empty': [2, 'never'],
    // ↓type为空
    'type-empty': [2, 'never'],
    // ↓type的类型
    'type-enum': [
      2,
      'always',
      [
        'feat',
        'fix',
        'perf',
        'style',
        'docs',
        'test',
        'refactor',
        'build',
        'ci',
        'chore',
        'revert',
        'wip',
        'workflow',
        'types',
      ],
    ],
  },
};

4.配置husky

4.1.启动Git钩子

npx husky install

这个时候就在根目录下创建了.husky目录了。vben将里面的一个文件夹删除了，我不知道为什么。看不懂就先不动。

4.2.修复YarnOnWindowsBug

官方参考链接

在带有Git Bash（stdin is not a tty）的Windows上使用Yarn时，Git挂钩可能会失败。如果您有Windows用户，则强烈建议添加以下解决方法。

  1. 创建.husky/common.sh：
command_exists () {
  command -v "$1" >/dev/null 2>&1
}

# Workaround for Windows 10, Git Bash and Yarn
if command_exists winpty && test -t 1; then
  exec < /dev/tty
fi
  1. 在使用Yarn运行命令的地方将其来源：
#!/bin/sh
. "$(dirname "$0")/_/husky.sh"
. "$(dirname "$0")/common.sh"

yarn ...

这里是yarn命令的地方要这样用，其他地方要不要无所谓。第二步可以先不管。

5.创建lint-staged的配置文件

在.husky目录下创建lintstagedrc.js文件。

lint-staged的npm首页上有说如何使用配置文件。

module.exports = {
  '*.{js,jsx,ts,tsx}': ['eslint --fix', 'prettier --write'],
  '{!(package)*.json,*.code-snippets,.!(browserslist)*rc}': ['prettier --write--parser json'],
  'package.json': ['prettier --write'],
  '*.vue': ['prettier --write', 'stylelint --fix'],
  '*.{scss,less,styl,css,html}': ['stylelint --fix', 'prettier --write'],
  '*.md': ['prettier --write'],
};

6.修改脚本

在第十七章中，我们有许多的脚本未定义。这里重新修改一下：

6.1.lint:lint-staged

代码：

"lint:lint-staged": "lint-staged -c ./.husky/lintstagedrc.js",

目的：对Git暂存的文件进行lint检查。

6.2.lint:pretty

代码：

"lint:pretty": "pretty-quick --staged",

目的：对Git暂存文件进行pretty的操作。

6.3.install:husky

代码：

"install:husky": "is-ci || husky install",

目的：如果不是CI服务器，就启动Git钩子。

我不确定是不是这样的，感觉怪怪的。

6.4.postinstall

代码：

"postinstall": "npm run install:husky"

目的：执行install:husky命令。这个命令会自动启动Git钩子，参考文档。

7.给husky添加任务

# 启动husky
yarn install:husky

# 添加commit消息检查任务到`.husky/commit-msg`文件中
# 这里我一直执行不出来，是引号引其的问题，大家可以先创建空的然后把命令复制进去
# npx husky add .husky/commit-msg 'npx --no-install commitlint --edit "$1"'
npx husky add .husky/commit-msg

# 创建一个任务文件
npx husky add .husky/pre-commit

手动修改.husky/commit-msg文件：

这里面的$1一定要用双引号，不然后面执行会报错。

#!/bin/sh
. "$(dirname "$0")/_/husky.sh"

npx --no-install commitlint --edit "$1"

手动修改.husky/pre-commit文件：

内容参考链接：

#!/bin/sh
. "$(dirname "$0")/_/husky.sh"
. "$(dirname "$0")/common.sh"

[ -n "$CI" ] && exit 0

# Check the file name
# ! ls-lint cannot be used normally in mac pro of M1 system.
npm run lint:ls-lint

# Format and submit code according to lintstagedrc.js configuration
npm run lint:lint-staged

npm run lint:pretty

8.测试

8.1.失败测试

最好先重启你的ide。

git add .
git commit -m "随便打一些消息"

> vben3@0.0.0 lint:ls-lint F:\CodeLearn\vben\vben3
> ls-lint

> vben3@0.0.0 lint:lint-staged F:\CodeLearn\vben\vben3
> lint-staged -c ./.husky/lintstagedrc.js

[STARTED] Preparing...
# 一系列检查...
[SUCCESS] Cleaning up...

> vben3@0.0.0 lint:pretty F:\CodeLearn\vben\vben3
> pretty-quick --staged

�🔍  Finding changed files since git revision 1346762.
�🎯  Found 2 changed files.
✅  Everything is awesome!
⧗   input: 随便打一些消息
✖   subject may not be empty [subject-empty]
✖   type may not be empty [type-empty]

✖   found 2 problems, 0 warnings
ⓘ   Get help: https://github.com/conventional-changelog/commitlint/#what-is-commitlint

husky - commit-msg hook exited with code 1 (error)

8.2.格式

出错了，我们规范的提交消息试试：

@commitlint/config-conventional的规范+我们自定义的规则。

type: some message

8.3.类型

类型英文类型中文
build建立
chore杂事
cici
docs文档
feat壮举
fix修复
perf敷衍
refactor重构
revert恢复
style样式
test测试

8.4.成功测试

提交成功，当然你不用担心这样手敲太麻烦了，后面还有插件可以自动帮你敲这些格式。

git commit -m "feat: 我们成功的规范了Git提交!"

> vben3@0.0.0 lint:pretty F:\CodeLearn\vben\vben3
> pretty-quick --staged

�🔍  Finding changed files since git revision 1346762.
�🎯  Found 2 changed files.
✅  Everything is awesome!
[master 6c61fc5] feat: 我们成功的规范了Git提交!
 7 files changed, 104 insertions(+), 4 deletions(-)
 create mode 100644 .husky/.gitignore
 create mode 100644 .husky/commit-msg
 create mode 100644 .husky/common.sh
 create mode 100644 .husky/lintstagedrc.js
 create mode 100644 .husky/pre-commit
 
# 推送出去
git push -u origin master

上一章

第十八章-安装rimraf

下一章

第二十章-使用commitizen询问式commit消息

# vben  微技术 

您的支持，是对鱼某最大的鼓励!

第十八章-安装rimraf

评论

相关推荐

Your browser is out-of-date!

Update your browser to view this website correctly. Update my browser now

×

分类
他说
生活小技巧
致英子的情书
手撕vben
默认分类
标签
Node
ESLint
TS
vite
微技术
vsCode
Halo
vue3
vben