前言

规范比业务开发搬砖更为重要,没有一个好的编码规范,维护老的代码或者是编写新的代码都非常痛苦

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​

  • 测试

让你的git message更加规范_git

选择提交分类后回车进行下一步

然后依次进行下一步,如果有问题,会自动排出。

让你的git message更加规范_git_02

这里有提示不符合规则的代码,修复并重新提交即可

检查完成之后会成功提交

让你的git message更加规范_git_03

到次,配置工作就完成了。