一、安裝相關(guān)的包
npm install -D husky
npm install -D lint-staged // lint鉤子
npm install -D prettiernpm install -g @commitlint/cli @commitlint/config-conventional // commit 規(guī)范
husky npm地址：https://www.npmjs.com/package/husky
lint-staged npm/github地址： https://www.npmjs.com/package/lint-staged / https://github.com/okonet/lint-staged
prettier npm地址：https://www.npmjs.com/package/prettier
二密似、新增配置文件
1焙矛、添加.prettierrc.js文件
// .prettierrc.jsmodule.exports = {
printWidth: 80,
semi: false, // 在每個語句的末尾添加分號
singleQuote: false, // 使用單引號而不是雙引號
trailingComma: "none", // 多行時盡可能打印尾隨逗號<none|es5|all>
bracketSpacing: true, // 對象文字中打印括號之間的空格
jsxBracketSameLine: true, // 將>多行JSX元素放在最后一行的末尾，而不是單獨放在下一行
arrowParens: "avoid", // 在單個箭頭函數(shù)參數(shù)周圍加上括號<avoid|always>
requirePragma: false,
proseWrap: "preserve"
};
其他配置可以查閱相關(guān)文檔：https://prettier.io/docs/en/options.html
2残腌、添加commitlint配置文件
在項目根路徑執(zhí)行
echo "" > commitlint.config.js
復(fù)制下面代碼到文件中
// commitlint.config.jsmodule.exports = {
extends: ["@commitlint/config-conventional"],
rules: {
"type-enum": [
2,
"always",
["feat", "fix", "docs", "style", "refactor", "test", "chore", "revert"]
],
"subject-full-stop": [0, "never"],
"subject-case": [0, "never"]
}
}
用于說明 commit 的類別村斟，只允許使用下面7個標(biāo)識。
feat：新功能（feature）
fix：修補bug
docs：文檔（documentation）
style： 格式（不影響代碼運行的變動）
refactor：重構(gòu)（即不是新增功能抛猫，也不是修改bug的代碼變動）
test：增加測試
chore：構(gòu)建過程或輔助工具的變動
3蟆盹、修改package.json文件
增加如下配置
// package.json
{
"lint-staged": {
"src/**/*.{js,ts,tsx}": [
"prettier --write",
"tslint --project tsconfig.json",
"git add ."
]
},
"husky": {
"hooks": {
"pre-commit": "lint-staged",
"commit-msg": "commitlint -e $GIT_PARAMS"
}
},
"config": {
"commitizen": {
"path": "cz-customizable"
}
}
}
tslint 相關(guān)配置：https://palantir.github.io/tslint/rules/
4、如需配置eslint
（1）新增eslint相關(guān)的插件
npm install -D eslint eslint-config-ali eslint-plugin-import babel-eslint eslint-plugin-prettier eslint-config-prettier eslint-plugin-react
（2）新增.eslintrc.js文件邑滨，文件中寫入以下配置
module.exports = {
root: true,
env: {
node: true
},
'extends': [
"eslint-config-ali",
"prettier",
"plugin:prettier/recommended",
'plugin:react/recommended',
'eslint:recommended'
],
rules: {
'no-console': process.env.NODE_ENV === 'production' ? 'error' : 'off',
'no-debugger': process.env.NODE_ENV === 'production' ? 'error' : 'off',
'no-mixed-spaces-and-tabs': 'off',
'no-unused-vars': 'off',
"prettier/prettier": "error",
"strict": "off",
"import/no-dynamic-require": "off",
"global-require": "off",
"require-yield": "off",
},
plugins: ["prettier"],
parserOptions: {
parser: 'babel-eslint'
}
}
eslint相關(guān)配置規(guī)則： https://cloud.tencent.com/developer/section/1135842
（3）修改package.json
"scripts": {
...,
"lint": "eslint . --ext .js,.ts --ignore-path .gitignore",
"fix": "npm run lint -- --fix"
},
"lint-staged": {
"src/**/*.{js,ts,tsx}": [
"prettier --write",
"eslint --fix --ext .js",
"git add ."
]
},
"husky": {
"hooks": {
"pre-commit": "lint-staged",
"commit-msg": "commitlint -e $GIT_PARAMS"
}
}
三、使用結(jié)果
1钱反、任意修改一個文件不符合ts要求
執(zhí)行結(jié)果
detanxdeMacBook-Pro:kyc_flatform detanx$ sudo git commit -m 'feat: add format'
husky > pre-commit (node v12.4.0)
↓ Stashing changes... [skipped]
→ No partially staged files found...
? Running tasks...
? Running tasks for src/**/*.{js,ts,tsx}
? prettier --write
? tslint --project tsconfig.json
git add .
? tslint --project tsconfig.json found some errors. Please fix them and try committing again.
ERROR: /Users/detanx/Desktop/kyc_flatform/src/components/MoneyManage/GoldenIn/index.tsx:92:7 - Forbidden 'var' keyword, use 'let' or 'const' instead
husky > pre-commit hook failed (add --no-verify to bypass)
如果想忽略這個提示可以在執(zhí)行命令時加 --no-verify
例如：
git commit -m 'feat: add format' --no-verify
2掖看、當(dāng)代碼格式和tslint校驗通過后，提交信息不規(guī)范時
detanxdeMacBook-Pro:kyc_flatform detanx$ sudo git commit -m 'feat:add format'
husky > pre-commit (node v12.4.0)
No staged files match any of provided globs.
husky > commit-msg (node v12.4.0)
? input: feat:add format
? subject may not be empty [subject-empty]
? type may not be empty [type-empty]
? found 2 problems, 0 warnings
? Get help: https://github.com/conventional-changelog/commitlint/#what-is-commitlint
husky > commit-msg hook failed (add --no-verify to bypass)
注： 提交信息必須是規(guī)定的7個標(biāo)識開始面哥，并跟隨一個英文輸入法下的冒號':'和一個空格哎壳，接著是提交的內(nèi)容
舉例：
git commit -m 'feat: add format'
3、提交成功
[detanxdeMacBook-Pro:kyc_flatform detanx$ git commit -m 'feat: add format'
husky > pre-commit (node v12.4.0)
↓ Stashing changes... [skipped]
→ No partially staged files found...
? Running tasks...
husky > commit-msg (node v12.4.0)
[master 3b341a99] feat: add forma
四尚卫、配置過程中遇到的一些問題
1归榕、pre-commit 放置在scripts對象中會報一個waring
Warning: Setting commit-msg script in package.json > scripts will be deprecated
Please move it to husky.hooks in package.json, a .huskyrc file, or a husky.config.js file
Or run ./node_modules/.bin/husky-upgrade for automatic update
See https://github.com/typicode/husky for usage
意思就是這個命令需要放置在husky對象的hooks中，或者配置在.huskyrc的配置文件中吱涉，類似下面這樣
{
"husky": {
"hooks": {
"pre-commit": "lint-staged",
"commit-msg": "commitlint -e $GIT_PARAMS"
}
},
}
