让你的git message更加规范

前言

规范比业务开发搬砖更为重要，没有一个好的编码规范，维护老的代码或者是编写新的代码都非常痛苦

Eslint与prettier

大大小小也做过了好几个项目，每个项目都要做eslint校验,所以我封装了一个npm包以后直接安装引入即可

yarn add osdoc-lint -D
yarn add prettier

• 新建.eslintrc.js

module.exports = {
  extends: [require.resolve('osdoc-lint/dist/eslint')],
  rules: {
    'react/require-default-props': 'off',// 也可以手动覆盖
  },
};

• 新建.prettierrc.js

const lint = require('osdoc-lint');
module.exports = {
  ...lint.prettier,
};

这样省去了配置eslint规则都麻烦

git message校验

• 进行pre-commit代码规范检测

yarn add husky lint-staged --dev

修改package.json

"lint-staged": {
  "components/**/*.ts?(x)": [
    "prettier --write",
    "eslint --fix",
    "git add"
  ],
},
"husky": {
  "hooks": {
    "pre-commit": "lint-staged"
  }
}

• 进行 Commit Message 检测

yarn add @commitlint/cli @commitlint/config-conventional commitizen cz-conventional-changelog --dev

新增.commitlintrc.js写入以下内容

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

修改package.json

"scripts": {
  "commit": "git-cz",
}

"husky": {
  "hooks": {
    "commit-msg": "commitlint -E HUSKY_GIT_PARAMS",
    "pre-commit": "lint-staged"
  }
},
"config": {
  "commitizen": {
    "path": "cz-conventional-changelog"
  }
}

后面提交代码的时候使用yarn commit代替git commit

• 测试

image

选择提交分类后回车进行下一步

然后依次进行下一步，如果有问题，会自动排出。

image

这里有提示不符合规则的代码，修复并重新提交即可

检查完成之后会成功提交

image

到次，配置工作就完成了。

关于

• 本文首发于:让你的git message更加规范
• 参考https://github.com/vuejs/vue