项目中通过集成一些工具，比如 husky&commitlint&lint-staged&prettier，可以轻松实现代码格式化，代码校验，代码提交规范等等，使团队代码风格统一，便于阅读，便于理解。
项目环境
项目是 Vue 项目，Node 版本是 v14.18.2，npm 版本是 6.14.15。
注意：集成工具的版本也要和项目环境适配，不能直接使用最新版本。
> node -v
v14.18.2
> npm -v
6.14.15
工具介绍
husky
husky 是一个为 git 客户端增加 hook 的工具。它提供了很多git hooks（如commit, push, receive等），我们可以很方便在这些钩子中检测提交信息是否规范，运行测试用例，检测代码等等。
commitlint
commitlint 是一个用来校验提交信息的工具。
提交格式如下：
git commit -m <type>[optional scope]: <description>
其中type可以是以下值：
build：主要目的是修改项目构建系统(例如glup，webpack，rollup的配置等)的提交ci：主要目的是修改项目持续集成流程(例如Travis，Jenkins，GitLab CI，Circle等)的提交docs：文档更新feat：新增功能fix：bug修复perf：性能优化refactor：重构代码(既没有新增功能，也没有修复bug)style：不影响程序逻辑的代码修改(修改空白字符，补全缺失的分号等)test：新增测试用例或是更新现有测试revert：回滚某个更早之前的提交chore：不属于以上类型的其他类型(日常事务)
optional scope：一个可选的修改范围。用于标识此次提交主要涉及到代码中哪个模块。
description：一句话描述此次提交的主要内容，做到言简意赅。
注意：`type`和`description`之间有一个空格。
例如：
git commit -m "fix: 修复什么bug"
lint-staged
lint-staged 是一个用来检测 git 暂存区的文件的工具。
prettier
prettier 是一个用来格式化代码的工具。
集成 husky
安装
npm install husky@7.0.0 -D
启用
npx husky install
执行完上面命令后，根目录会出现一个.husky的目录。
配置
在package.json的scripts中加入"prepare": "husky install"。
{
"scripts": {
"prepare": "husky install"
}
}
并运行一次。
npm run prepare
这样其他人下载项目代码以后，自动启用hook。
集成commitlint
安装
npm install @commitlint/cli@13.1.0 @commitlint/config-conventional@13.1.0 @commitlint/core@16.0.0 -D
配置
在根目录新建一个commitlint.config.js文件，并输入以下内容：
module.exports = {
extends: [
'@commitlint/config-conventional'
]
}
创建commit-msg钩子
在.husky目录新建一个commit-msg文件，并输入以下内容：
#!/bin/sh
. "$(dirname "$0")/_/husky.sh"
npx --no-install commitlint --edit $1
这时，提交信息就会校验是否符合规范了。
可以试下。
git add .
git commit -m "随便写点什么"
不符合提交规范会给出提示，阻止提交。
集成lint-staged
安装
npm install lint-staged@11.1.2 -D
配置
根目录创建 .lintstagedrc 配置文件
{
"./src/**/*.{js,jsx,ts,tsx,vue,less,sass,scss,css.json}": ["prettier --write"]
}
集成prettier
安装
npm install prettier@1.19.1 -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, // 需要格式化的结束位置
};
创建pre commit钩子
在.husky目录新建一个pre-commit文件，并输入以下内容：
#!/bin/sh
. "$(dirname "$0")/_/husky.sh"
npx --no-install lint-staged
结语
这样，在提交代码前，会先执行lint-staged，利用prettier对代码进行格式化，然后执行commitlint对提交信息进行校验，最后提交的代码就是统一规范的了。
