介绍
- lint-staged：对暂存的git文件运行linter，不要让💩 溜进你的代码库！
- prettier：按照规则解析代码来强制执行一致的样式，用来优化代码格式，比如缩进、空格、分号等。
- gitHooks： 在.git/hooks文件下，保存了一些 shell 脚本，Git Hooks就是那些在Git执行特定事件(如commit、push、receive等)后触发运行的脚本。
一. lint-staged
为什么使用 lint-staged ?
在commit代码之前运行Linting更有意义，这样可以确保没有错误格式的代码提交到仓库；但是在整个项目中运行一个lint校验的进程会很缓慢，而且lint的结果可能不相关，然而其实你只希望lint校验将要提交的文件。
lint-staged项目中有一个可以运行任意shell任务的脚本，并将暂存文件作为参数，通过指定的glob模式过滤。
package.json中配置
{
"lint-staged": {
"*": "your-cmd"
}
}
二. prettier
将Prettier与一个pre-commit的工具(例: gitHooks)一起使用，在commit代码之前通过git add重新格式化标记为“暂存”的文件。
"scripts": {
"format": "prettier --write ." // your-cmd, 需手动添加额外的文件类型，默认为js,css,md
},
三.gitHooks
git commit 时触发 pre-commit 钩子，运行 lint-staged 命令。
"gitHooks": {
"pre-commit": "lint-staged --concurrent false"
}
示例
Installation
npm install lint-staged prettier --save-dev
例如：
"scripts": {
"format": "prettier --write ." // your-cmd
},
"lint-staged": {
"*": [
"prettier --write"
]
},
"gitHooks": {
"pre-commit": "lint-staged --concurrent false"
}
在根目录创建.prettierrc.json
创建Prettier的配置文件，让编辑器和其他工具知道项目正在使用Prettier
例如：
{
"semi": false,
"tabWidth": 2,
"singleQuote": true,
"printWidth": 80,
"trailingComma": "none",
"overrides": [
{
"files": ["*.json5"],
"options": {
"singleQuote": false,
"quoteProps": "preserve"
}
},
{
"files": ["*.yml"],
"options": {
"singleQuote": false
}
}
]
}
在根目录创建.prettierignore文件
创建一个.prettierignore文件，让Prettier CLI和编辑器知道哪些文件不需要格式化。
例：
packages/plugin-vue/dist/
packages/*/CHANGELOG.md
LICENSE.md
.prettierignore
yarn.lock
命令行执行 npm run format
执行npm run format，就可以按照.prettierrc.json中的规则对代码进行格式化了。
小结
- 当在终端输入 git commit 提交代码时，linter 会自动检查本次提交所修改的文件是否符合本项目的代码规范，不符合规范的会提交失败。
- 使用 linter 最大的好处就是在团队协作中可以使代码风格统一。
参考资料
lint-staged - npm
prettier - npm
prettier - 规则选项
一文带你彻底学会 Git Hooks 配置
