husky
git hooks
Git 本身除了代码版本管理之外,还提供了 Git Hooks 钩子机制,它能够让我们在 commit、push 之前(后)执行一些自定义的操作。
husky@6.0.0
husky 是一个为 git 客户端增加 hook 的工具。安装后,它会自动在仓库中的 .git/ 目录下增加相应的钩子;比如 pre-commit 钩子就会在你执行 git commit 的触发。 建议使用刚更新的6.0.0版本
npm set-script prepare "husky install" && npm run prepare
npx husky add .husky/pre-commit "npm test"
这样项目里出现了pre-commit脚本,在执行git commit
之前,会运行npm test
ESLint 自定义ESlint规则,和package.json同一目录下
// .eslintrc.js 例子
module.exports = {
env: {
browser: true,
es6: true
},
extends: [
'eslint:recommended',
'plugin:react/recommended',
'@enos/eslint-config-envision',
'plugin:react-hooks/recommended'
],
rules: {
eqeqeq: 0,
'no-unused-expressions': 0,
'array-callback-return': 0,
'max-classes-per-file': 0
}
};
想要直接在命令行使用eslint命令,需要全局安装eslint
npm i -g eslint
利用eslint修复文件
eslint --cache --fix [文件名或正则匹配]
prettier
用yarn安装prettier
自定义prettier规则,和package.json同一目录下
// .prettierrc 目前reporting项目使用的
{
"printWidth": 150,
"tabWidth": 2,
"useTabs": false,
"semi": true,
"singleQuote": true,
"quoteProps": "as-needed",
"jsxSingleQuote": true,
"trailingComma": "none",
"bracketSpacing": false,
"jsxBracketSameLine": false,
"arrowParens": "always",
"requirePragma": false,
"insertPragma": false,
"proseWrap": "preserve",
"htmlWhitespaceSensitivity": "css",
"endOfLine": "auto"
}
// .prettierignore prettier忽略的文件,目前reporting项目使用的
zh-CH.js
en-US.js
ja-JP.js
es-ES.js
如何在命令行使用prettier
yarn prettier --write [文件名或正则匹配]
lint-staged
如果每次commit之前,要对项目中每一个文件进行扫描,进行prettier和eslint的格式化,那么会非常慢,这时候,lint-staged派上用场了
- lint-staged对只变更的文件进行处理
安装
yarn add lint-staged --dev
在package.json中设置
// package.json
...
"lint-staged": {
"*.{js,jsx,ts,tsx,less,css}": [
"prettier --write"
]
},
...
运行命令
yarn lint-staged
相当于对项目中所有变更的文件进行了prettier --write
处理
commitlint
帮助规范团队的提交信息
安装
yarn add @commitlint/{cli,config-conventional}
新建 commitlint.config.js 文件
module.exports = {
extends: ['@commitlint/config-conventional']
};
commitlint.config.js 配置文件可以添加自己的规则,这里 @commitlint/config-conventional 提供了官方的规则扩展:
build:主要目的是修改项目构建系统(例如 glup,webpack,rollup 的配置等)的提交
ci:主要目的是修改项目继续集成流程(例如 Travis,Jenkins,GitLab CI,Circle等)的提交
docs:文档更新
feat:新增功能
merge:分支合并 Merge branch ? of ?
fix:bug 修复
perf:性能, 体验优化
refactor:重构代码(既没有新增功能,也没有修复 bug)
style:不影响程序逻辑的代码修改(修改空白字符,格式缩进,补全缺失的分号等,没有改变代码逻辑)
test:新增测试用例或是更新现有测试
revert:回滚某个更早之前的提交
chore:不属于以上类型的其他类型
错误示例
⧗ input: fix: ES-3375 get wrong template detail in cache
✖ subject must not be sentence-case, start-case, pascal-case, upper-case [subject-case]
错误原因:ES必须改为小写
综合配置
已安装prettier, eslint(全局), husky, commitlint
// package.json
...
"scripts": {
"prepare": "husky install",
}
"lint-staged": {
"*.{js,jsx,ts,tsx,less,css}": [
"prettier --write",
"eslint --cache --fix",
"git add"
]
},
...
husky钩子脚本
// .husky/pre-commit
#!/bin/sh
# 为了使sourcetree认识 yarn 和npm 等命令
PATH=$PATH:/usr/local/bin:/usr/local/sbin
. "$(dirname "$0")/_/husky.sh"
yarn lint-staged
exit 0
在.husky目录下创建commit-msg文件,在commit时,会调用该钩子,对commit message进行校验
// .husky/commit-msg
#!/bin/sh
# 为了使sourcetree认识 yarn 和npm 等命令
PATH=$PATH:/usr/local/bin:/usr/local/sbin
. "$(dirname "$0")/_/husky.sh"
yarn commitlint --edit $1
规则文件
// .eslintre.js 如上
// .prettierrc 如上
// .prettierignore 如上
// commitlint.config.js 如上
对于旧项目
依次运行命令
yarn prettier --write src/*
eslint --cache --fix src/*
注意点:
- 可能会有很多eslint报错,需要处理
- src下有components等文件夹不想被格式化的,可以缩小
src/yourPage
的范围 - 有很多css的报错,如果暂时不想处理可以在lint-staged中
"*.{js,jsx,ts,tsx,less,css}"
删掉less和css