公司项目开发中，都会有很多种规范，代码规范，提交规范等等，目的就是为了使团队代码风格统一，便于阅读，便于理解。
通过使用以上工具，项目将会具备校验提交信息是否规范，提交前格式化代码，lint代码等功能。
1介绍
1.1 husky
如很多其他版本控制系统一样，git也具有在特定时间执行特定动作的脚本功能。husky 其实就是一个为 git 客户端增加 hook 的工具。它提供了很多git hooks（如commit, push, receive等），我们可以很方便在这些钩子中检测提交信息是否规范，运行测试用例，检测代码等等。
1.2 commitlint
commitlint 可以校验提交信息是否规范，提交格式如下：
git commit -m <type>: <description>
其中type可以是以下值：
build：主要目的是修改项目构建系统(例如 glup，webpack，rollup 的配置等)的提交ci：主要目的是修改项目继续集成流程(例如 Travis，Jenkins，GitLab CI，Circle等)的提交docs：文档更新feat：新增功能fix：bug 修复perf：性能优化refactor：重构代码(既没有新增功能，也没有修复 bug)style：不影响程序逻辑的代码修改(修改空白字符，补全缺失的分号等)test：新增测试用例或是更新现有测试revert：回滚某个更早之前的提交chore：不属于以上类型的其他类型(日常事务)
例如：
git commit -m "fix: 修复什么bug"
1.3 lint-staged
可以运行相关lint插件进行代码检测。
1.4 prittier
可以对代码进行格式化，保证代码统一格式。
2 配置husky
- 安装
yarn add husky -D
- 启用，执行完下面命令后，根目录会出现一个
.husky的目录。
yarn husky install
{
"scripts": {
"postinstall": "husky install"
}
}
注意：如果是npm安装，可以参照这里
2 配置commitlint
- 安装
yarn add @commitlint/cli @commitlint/config-conventional -D
- 创建配置文件
第一种方式：
echo "module.exports = {extends: ['@commitlint/config-conventional']}" > commitlint.config.js
其中需要注意的是使用这种命令生成的文件格式可能是utf-16的，如果当时用git commit报下面的错误时：
说明要将改文件保存为
utf-8格式的。
第二种方式：
在根目录新建这个commitlint.config.js文件，然后输入下面内容：
module.exports = {extends: ['@commitlint/config-conventional']}
- 增加
commit-msg钩子
yarn husky add .husky/commit-msg 'yarn commitlint --edit "$1"'
执行完上述命令以后，.husky下面会有commit-msg的文件。
至此，项目可以校验提交信息，是否符合规范，有想尝试的可以试下。
#!/bin/sh
command_exists () {
command -v "$1" >/dev/null 2>&1
}
# Windows 10, Git Bash and Yarn workaround
if command_exists winpty && test -t 1; then
exec < /dev/tty
fi
然后在对应的勾子文件中（commit-msg,pre-commit等文件），增加一行 . "$(dirname "$0")/common.sh" 代码
#!/bin/sh
. "$(dirname "$0")/_/husky.sh"
. "$(dirname "$0")/common.sh"
yarn …
注意：所有*.sh文件的第一行必须是#!/bin/sh,否则会出现报错：error: cannot spawn git: No such file or directory
3 配置lint-staged
- 安装
yarn add lint-staged -D
- 根目录创建
.lintstagedrc配置文件
{
"./src/**/*.{js,jsx,ts,tsx,vue,less,sass,scss,css.json}": ["prettier --write"],
}
4 配置prettier
- 安装
yarn add prettier -D
- 根目录创建
.prettierrc.js文件
// 详见https://prettier.io/docs/en/options.html
module.exports = {
printWidth: 80, // 每行的长度
tabWidth: 2, // 缩进的空格数
useTabs: false, // 用tabs而不是空格缩进
semi: true, // 每个语句末尾是否加分号，false只有在编译报错时才加
singleQuote: false, // 使用单引号代替双引号，jsx引号规则将会忽略此配置。
quoteProps: "as-needed", //
jsxSingleQuote: false, // 在jsx中使用单引号代替双引号
trailingComma: "es5", // 是否有末尾的逗号，例如数组或对象的最后一项。/es5/none/all
bracketSpacing: false, // 在对象字面量{}的语法中打印空格
jsxBracketSameLine: false, // 开始标签的>是否和之前内容在同一行
arrowParens: "always", // 箭头函数的参数是否加括号 /always/avoid
rangeStart: 0, // 需要格式化的开始位置
rangeEnd: Infinity, // 需要格式化的结束位置
};
5 配置pre commit钩子
- 执行下面命令，会在
.husky目录下面有个文件pre-commit
yarn husky add .husky/pre-commit 'yarn lint-staged --allow-empty "$1" && yarn lint'
项目如果使用vue-cli创建的，package.json的scripts中会有lint: vue-cli-service lint。如果想执行其他lint插件，可以将上面的yarn lint修改。
注意：如果commit出现stdin is not a tty的报错。参考
至此。完结。
6 额外补充
-
如果不想加入 配置
husky中的第3步，可以删除.husky下的.gitignore文件。 -
如果不想安装
lint-staged，可以将文件pre-commit里的命令改为:
yran prettier "./src/**/*.{js,jsx,ts,tsx,vue,less,sass,scss,css.json}" --write && yarn lint
