GitHook 工具 —— stylelint , husky , cz-cli , commitlint ,lint-staged

stylelint:

自动修复错误、格式化样式代码

安装 stylelint、stylelint-config-standard 两个依赖到我们的项目中

1
yarn add stylelint stylelint-config-standard -D

根目录，创建一个 .stylelintrc 配置文件

1
2
3
4
5
6
7
8
9
10
11
12
{
  "extends": "stylelint-config-standard",
  "rules": {
    "indentation": [
      2,
      {
        "baseIndentLevel": 1
      }
    ],
    "declaration-block-semicolon-newline-after": "always"
  }
}

Husky:

husky是一个git hook工具，可以帮助我们触发git提交的各个阶段：pre-commit、commit-msg、pre-push

安装:

1
yarn add husky-init --dev && yarn husky-init

or npm:

1
npx husky-init && npm install

Commitlint:

限制提交 , 不符合的提交会被拒绝

1
yarn add @commitlint/config-conventional @commitlint/cli -D

根目录创建 commitlint.config.js 文件，配置commitlint

1
2
3
module.exports = {
  extends: ['@commitlint/config-conventional']
}

使用husky生成commit-msg文件，验证提交信息

1
yarn husky add .husky/commit-msg 'yarn commitlint --edit "$1"'

or npm:

1
npx husky add .husky/commit-msg "npx --no-install commitlint --edit $1"

lint-staged

只会对修改的文件进行检查、修复处理

install : 

1
yarn add lint-staged -D

根目录，创建一个 .lintstagedrc 配置文件

1
{  "*.{js,vue}": ["yarn lint"],  "*.{html,vue,css,scss,sass,less}": ["stylelint --fix"]}

or npm

1
{  "*.{js,vue}": ["npm run lint"],  "*.{html,vue,css,scss,sass,less}": ["stylelint --fix"]}

增加 pre-commit 勾子

1
yarn husky add .husky/pre-commit 'yarn lint-staged --allow-empty "$1"'

Commitizen: 是一个帮助我们编写规范 commit message

1
yarn  add commitizen -D
1
commitizen init cz-conventional-changelog --yarn --dev --exact

Or npm

1
npm install commitizen -Dnpx commitizen init cz-conventional-changelog --save-dev --save-exact

以后提交使用:

1
yarn cz or npx cz
Type 作用
feat 新增特性 (feature)
fix 修复 Bug(bug fix)
docs 修改文档 (documentation)
style 代码格式修改(white-space, formatting, missing semi colons, etc)
refactor 代码重构(refactor)
perf 改善性能(A code change that improves performance)
test 测试(when adding missing tests)
build 变更项目构建或外部依赖（例如 scopes: webpack、gulp、npm 等）
ci 更改持续集成软件的配置文件和 package 中的 scripts 命令，例如 scopes: Travis, Circle 等
chore 变更构建流程或辅助工具(比如更改测试环境)
revert 代码回退

问题:

当我们在 Windows 的 Git Bash 上使用 Yarn，git hooks 会失败（stdin is not a tty）。

解决方案：

1.在 .husky 目录下创建一个 common.sh 文件

1
#!/bin/sh command_exists () {  command -v "$1" >/dev/null 2>&1} # Windows 10, Git Bash and Yarn workaroundif command_exists winpty && test -t 1; then  exec < /dev/ttyfi

在对应的勾子文件中，增加一行 . "$(dirname "$0")/common.sh" 代码

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

CI 持续集成 :

CI 是不需要 git hooks 的问题，就直接将代码合并到测试服的分支上，通过 Jenkins 构建出现了 husky install 失败。

解决方案：
使用 is-ci，在 ci 场景不会执行 husky install

安装 is-ci

1
yarn add is-ci -D

在 .husky 目录下，创建一个 install.js 文件

1
const { spawnSync } = require('child_process')const isCI = require('is-ci') if (!isCI) {  spawnSync('husky', ['install'], {    stdio: 'inherit',    shell: true  })}

修改 package.json 文件

1
"script": {   "postinstall": "node .husky/install.js"}

代码规范

1.1. 集成editorconfig配置

EditorConfig 有助于为不同 IDE 编辑器上处理同一项目的多个开发人员维护一致的编码风格。

.editorconfig

1
# http://editorconfig.orgroot = true[*] # 表示所有文件适用charset = utf-8 # 设置文件字符集为 utf-8indent_style = space # 缩进风格（tab | space）indent_size = 2 # 缩进大小end_of_line = lf # 控制换行类型(lf | cr | crlf)trim_trailing_whitespace = true # 去除行首的任意空白字符insert_final_newline = true # 始终在文件末尾插入一个新行[*.md] # 表示仅 md 文件适用以下规则max_line_length = offtrim_trailing_whitespace = false

VSCode需要安装一个插件：EditorConfig for VS Code

2.配置.prettierrc文件：

  • useTabs：使用tab缩进还是空格缩进，选择false；
  • tabWidth：tab是空格的情况下，是几个空格，选择2个；
  • printWidth：当行字符的长度，推荐80，也有人喜欢100或者120；
  • singleQuote：使用单引号还是双引号，选择true，使用单引号；
  • trailingComma：在多行输入的尾逗号是否添加，设置为 none；
  • semi：语句末尾是否要加分号，默认值true，选择false表示不加；
1
{  "useTabs": false,  "tabWidth": 2,  "printWidth": 80,  "singleQuote": true,  "trailingComma": "none",  "semi": false}

3.创建.prettierignore忽略文件

1
/dist/*.local.output.js/node_modules/****/*.svg**/*.sh/public/*