规范代码提交 husky + lint-staged + prettier + commitlint上面pre-comm

Demo代码：github.com/zhounie/hus…

husky：https://typicode.github.io/husky/#/?id=features
lint-staged: https://github.com/okonet/lint-staged
prettier: https://prettier.io/
commitlint: https://github.com/conventional-changelog/commitlint

husky

husky作用是替换git的hooks，做到在执行git方法前做拦截，来执行我们要的操作；

使用方法

安装

npm i husky -D

创建.huskyrc文件

.huskyrc
{
    "hooks": {
        "pre-commit": "lint-staged", // 提交commit前的钩子
    },
}

上面pre-commit钩子会在commit提交前执行前执行lint-staged命令。

lint-staged

lint-staged作用是可以做到对git缓存区的代码(git add .) 进行独立处理。比如对我们要提交的代码进行eslint，而不是对全局代码校验。

使用方法

安装

npm i lint-staged -D

创建 .lintstagedrc

.lintstagedrc
{
  "*.{ts,js,vue,less}": "prettier --write"
}

上面规则是对git缓存区的文件进行代码格式规范化。

prettier

prettier代码风格美化工具

使用方法

安装

npm i prettier -D

创建.prettierrc

.prettierrc文件配置美化规则
{
  "singleQuote": true,
  "semi": true,
  "bracketSpacing": true,
  "tabWidth": 2,
  "useTabs": false,
  "htmlWhitespaceSensitivity": "strict",
  "trailingComma": "none"
}

创建 .prettierignore

.prettierignore 配置不需要美化的文件规则
**/*.html
**/*.txt
**/*.md
**/*.svg
**/*.ttf
**/*.woff
**/*.eot
package.json
lib/plugin/cli/site/doc/page
lib/plugin/cli/site/doc/view
node_modules

commitlint

作用：规范commit提交的msg，拦截不符合规范的msg。

使用

安装

npm install @commitlint/cli @commitlint/config-conventional -D

创建文件 commitlint.config.js

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

在.huskyrc文件中添加commit-msg钩子：

{
    "hooks": {
        "pre-commit": "lint-staged",
        "commit-msg": "commitlint -E HUSKY_GIT_PARAMS"
    }
}