前言
规范比业务开发搬砖更为重要，没有一个好的编码规范，维护老的代码或者是编写新的代码都非常痛苦
Eslint与prettier
大大小小也做过了好几个项目，每个项目都要做eslint校验,所以我封装了一个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',// 也可以手动覆盖
},
};
- 新建
.prettierrc.js
const lint = require('osdoc-lint');
module.exports = {
...lint.prettier,
};
这样省去了配置eslint规则都麻烦
git message校验
- 进行
pre-commit代码规范检测
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"
}
}
- 进行
Commit Message检测
yarn add @commitlint/cli @commitlint/config-conventional commitizen cz-conventional-changelog --dev
新增.commitlintrc.js写入以下内容
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"
}
}
后面提交代码的时候使用yarn commit代替git commit
- 测试
image
选择提交分类后回车进行下一步
然后依次进行下一步，如果有问题，会自动排出。
image
这里有提示不符合规则的代码，修复并重新提交即可
检查完成之后会成功提交
image
到次，配置工作就完成了。
