项目规范
提交代码
项目中使用 husky 校验提交信息是否规范,提交代码只需执行如下命令,然后根据提示填写必要信息即可
pnpm commit
lint
使用 lint 的好处
具备基本工程素养的同学都会注重编码规范,而代码风格检查(Code Linting,简称 Lint)是保障代码规范一致性的重要手段。
遵循相应的代码规范有以下好处
- 较少 bug 错误率
- 高效的开发效率
- 更高的可读性
项目内集成了以下几种代码校验方式
- eslint 用于校验代码格式规范
- commitlint 用于校验 git 提交信息规范
- stylelint 用于校验 css/less 规范
- prettier 代码格式化
注意
lint 不是必须的,但是很有必要,一个项目做大了以后或者参与人员过多后,就会出现各种风格迥异的代码,对后续的维护造成了一定的麻烦
ESLint
ESLint 是一个代码规范和错误检查工具,有以下几个特性
- 所有东西都是可以插拔的。你可以调用任意的 rule api 或者 formatter api 去打包或者定义 rule or formatter。
- 任意的 rule 都是独立的
- 没有特定的 coding style,你可以自己配置
手动校验代码
# 执行下面代码.能修复的会自动修复,不能修复的需要手动修改
yarn run lint:eslint
配置项
项目的 eslint 配置位于根目录下 .eslintrc.js 内,可以根据团队自行修改代码规范
编辑器配合
推荐使用 vscode 进行开发,vscode 自带 eslint 插件,可以自动修改一些错误。
同时项目内也自带了 vscode eslint 配置,具体在 .vscode/setting.json 文件夹内部。只要使用 vscode 开发不用任何设置即可使用
CommitLint
在一个团队中,每个人的 git 的 commit 信息都不一样,五花八门,没有一个机制很难保证规范化,如何才能规范化呢?可能你想到的是 git 的 hook 机制,去写 shell 脚本去实现。这当然可以,其实 JavaScript 有一个很好的工具可以实现这个模板,它就是 commitlint(用于校验 git 提交信息规范)。
配置
commit-lint 的配置位于configs/lint/commitlint.js
Git 提交规范
- 参考 vue 规范(Angular)
feat增加新功能fix修复问题/BUGstyle代码风格相关无影响运行结果的perf优化/性能提升refactor重构revert撤销修改test测试相关docs文档/注释chore依赖更新/脚手架配置修改等workflow工作流改进ci持续集成types类型定义文件更改wip开发中
Stylelint
stylelint 用于校验项目内部 css 的风格,加上编辑器的自动修复,可以很好的统一项目内部 css 风格
配置
stylelint 的配置位于configs/lint/stylelint.js
编辑器配合
如果您使用的是 vscode 编辑器的话,只需要安装下面插件,即可在保存的时候自动格式化文件内部 css 样式
插件
Prettier
prettier 可以用于统一项目代码风格,统一的缩进,单双引号,尾逗号等等风格
配置
prettier 的配置位于configs/lint/prettier.js
编辑器配合
如果您使用的是 vscode 编辑器的话,只需要安装下面插件,即可在保存的时候自动格式化文件内部 js 格式
插件
Git Hook
git hook 一般结合各种 lint,在 git 提交代码的时候进行代码风格校验,如果校验没通过,则不会进行提交。需要开发者自行修改后再次进行提交
husky
有一个问题就是校验会校验全部代码,但是我们只想校验我们自己提交的代码,这个时候就可以使用 husky。
最有效的解决方案就是将 Lint 校验放到本地,常见做法是使用 husky 或者 pre-commit 在本地提交之前先做一次 Lint 校验。
项目在 .husky 内部定义了相应的 hooks
如何关闭
# 删除husky依赖即可
pnpm remove huksy
如何跳过某一个检查
# 加上 --no-verify即可跳过git hook校验(--no-verify 简写为 -n)
git commit -m "xxx" --no-verify
lint-staged
用于自动修复提交文件风格问题
lint-staged 的配置位于configs/lint/lintstaged.js
module.exports = {
'*.{js,jsx,ts,tsx}': ['pnpm eslint --fix', 'pnpm prettier --write'],
'*.vue': [
'pnpm eslint --fix',
'pnpm stylelint --fix',
'pnpm prettier --write',
],
'*.{scss,less,styl,html}': ['pnpm stylelint --fix', 'pnpm prettier --write'],
}
