前言
規(guī)范比業(yè)務(wù)開(kāi)發(fā)搬磚更為重要，沒(méi)有一個(gè)好的編碼規(guī)范恤浪，維護(hù)老的代碼或者是編寫(xiě)新的代碼都非常痛苦
Eslint與prettier
大大小小也做過(guò)了好幾個(gè)項(xiàng)目，每個(gè)項(xiàng)目都要做eslint校驗(yàn),所以我封裝了一個(gè)npm包以后直接安裝引入即可
yarn add osdoc-lint -D
yarn add prettier
- 新建
.eslintrc.js
module.exports = {
extends: [require.resolve('osdoc-lint/dist/eslint')],
rules: {
'react/require-default-props': 'off',// 也可以手動(dòng)覆蓋
},
};
- 新建
.prettierrc.js
const lint = require('osdoc-lint');
module.exports = {
...lint.prettier,
};
這樣省去了配置eslint規(guī)則都麻煩
git message校驗(yàn)
- 進(jìn)行
pre-commit代碼規(guī)范檢測(cè)
yarn add husky lint-staged --dev
修改package.json
"lint-staged": {
"components/**/*.ts?(x)": [
"prettier --write",
"eslint --fix",
"git add"
],
},
"husky": {
"hooks": {
"pre-commit": "lint-staged"
}
}
- 進(jìn)行
Commit Message檢測(cè)
yarn add @commitlint/cli @commitlint/config-conventional commitizen cz-conventional-changelog --dev
新增.commitlintrc.js寫(xiě)入以下內(nèi)容
module.exports = { extends: ['@commitlint/config-conventional'] };
修改package.json
"scripts": {
"commit": "git-cz",
}
"husky": {
"hooks": {
"commit-msg": "commitlint -E HUSKY_GIT_PARAMS",
"pre-commit": "lint-staged"
}
},
"config": {
"commitizen": {
"path": "cz-conventional-changelog"
}
}
后面提交代碼的時(shí)候使用yarn commit代替git commit
- 測(cè)試
image
選擇提交分類后回車進(jìn)行下一步
然后依次進(jìn)行下一步揩晴，如果有問(wèn)題筐钟，會(huì)自動(dòng)排出。
image
這里有提示不符合規(guī)則的代碼疹鳄，修復(fù)并重新提交即可
檢查完成之后會(huì)成功提交
image
到次拧略，配置工作就完成了。
關(guān)于
- 本文首發(fā)于:讓你的git message更加規(guī)范
- 參考https://github.com/vuejs/vue
