项目规范
介绍
使用 lint 的好处
具备基本工程素养的同学都会注重编码规范，而代码风格检查（Code Linting，简称 Lint）是保障代码规范一致性的重要手段。
遵循相应的代码规范有以下好处
- 较少 bug 错误率
- 高效的开发效率
- 更高的可读性
项目内集成了以下几种代码校验方式
- eslint 用于校验代码格式规范
- commitlint 用于校验 git 提交信息规范
- stylelint 用于校验 css/less 规范
- prettier 代码格式化
WARNING
lint 不是必须的，但是很有必要，一个项目做大了以后或者参与人员过多后，就会出现各种风格迥异的代码，对后续的维护造成了一定的麻烦
ESLint
配置项
项目的 eslint 配置位于 config 文件夹下的 eslint 内，其中包括配置和忽略文件。可以根据团队自行修改代码规范。
vscode 配合
推荐安装 vscode 的 eslint 插件，因为在.vscode/settings.json中默认配置了自定义好的 eslint 相关配置文件。开发体验会更加舒适。
相关插件
项目是 vue 项目，所以添加了eslint-plugin-vue。
因为因为项目使用了 ts，所以添加了两个插件@typescript-eslint/eslint-plugin和@typescript-eslint/parser。
手动校验
执行npm run lint:eslint，然后查看控制台即可。
规则
如果有想要禁用的规则，只需要在 rules 下添加一条对应的规则名，然后值设置为 0 或 1 即可。
TIP
- "off" 或 0 - 禁用规则
- "warn" 或 1 - 只是个警告，不会阻塞进程
- "error" 或 2 - 错误，会阻塞进程
- 示例：
{
// 禁用不能使用any
"@typescript-eslint/no-explicit-any": 0,
// 禁用不能有未使用的变量
"@typescript-eslint/no-unused-vars": 0
}项目配置了多条规则，都是和 ts 相关的。具体查看.eslintrc.js。
如何关闭
WARNING
强烈不推荐关闭 eslint 的校验
在config/lintstaged/.lintstagedrc.js中删除所有npm run lint:eslint即可。
CommitLint
在一个团队中，每个人的 git 的 commit 信息都不一样，五花八门，没有一个机制很难保证规范化，如何才能规范化呢？可能你想到的是 git 的 hook 机制，去写 shell 脚本去实现。这当然可以，其实 JavaScript 有一个很好的工具可以实现这个模板，它就是 commitlint（用于校验 git 提交信息规范）。
配置项
项目的 commitlint 配置位于 config 文件夹下的 commitlint 内，其中只包括了配置文件。
提交信息规范
参考angular的主流规范
feat新功能fix修复 bugdocs文档变更style样式变更refactor既不是修复 bug，也不是新功能，字面可以理解为重构perf性能优化chore依赖更新/脚手架配置修改等revert撤销修改wip开发中build构建相关types类型修改
示例
git commit -m 'feat(home): add home page'规则
项目配置了一些 commitlint 的规则，具体查看.commitlintrc.js。
TIP
所有的 commitlint 规则请查看rules。
如何关闭
在config/husky/commit-msg中注释掉下面一行即可
# npx --no-install commitlint --config config/commitlint/.commitlintrc.js --verbose --edit $1自定义 commit 格式
为了高度自定义 commit 的格式，项目采用了cz-customizable来实现。cz-customizable的配置文件请查看.cz-config.js。
- 示例
{
// 提交字数不超过100
"subjectLimit": 100,
// 提交的scope，即指`feat(button)`这样信息的括号中的内容，下面四个是项目默认提供的scope
"scopes": [
{ "name": "dependencies" },
{ "name": "config" },
{ "name": "component" },
{ "name": "doc" }
]
}WARNING
因为采用了高度自定义的 commit 校验，所以如果想要新添加或删除 commit 的 header 信息的话，需要同时修改两个文件已保证不会出错：
一是先修改.cz-config.js中的 types，添加或删除对应的信息；
二是修改.commitlintrc.js中的 rules 的
type-enum中的第三个参数，添加或删除对应的 header。
此举是为了保障 commitlint 和 cz-customizable 的配置相同。当然后续我可以把这块的配置提到同一个文件中，以便修改。可以算是个 TODO 吧。
StyleLint
StyleLint 用于校验项目内部 css 的风格，加上编辑器的自动修复，可以很好的统一项目内部 css 风格。虽然但是，项目集中使用了 windicss，真正需要做样式校验的地方已经不多了。但用的少不代表就不用校验了，这是前端项目工程化很关键的一步。
配置项
项目的 stylelint 配置位于 config 文件夹下的 stylelint 内，其中只包括了配置文件。
vscode 配合
推荐安装 vscode 的 stylelint 插件，因为在.vscode/settings.json中默认配置了自定义好的 stylelint 相关配置文件。开发体验会更加舒适。
手动校验
执行npm run lint:stylelint，然后查看控制台即可。
规则
项目配置了一些 stylelint 的规则，具体查看.stylelintrc.js。
TIP
所有的 stylelint 规则请查看rules。
如何关闭
在config/lintstaged/.lintstagedrc.js中删除所有npm run lint:stylelint即可。
Prettier
配置项
项目的 prettier 配置位于 config 文件夹下的 prettier 内，其中包括配置和忽略文件。
vscode 配合
推荐安装 vscode 的 prettier 插件，因为在.vscode/settings.json中默认配置了自定义好的 prettier 相关配置文件。开发体验会更加舒适。
手动校验
执行npm run lint:prettier，然后查看控制台即可。
规则
项目配置了一些 prettier 的规则，具体查看.prettierrc.js。
TIP
所有的 prettier 规则请查看rules。
如何关闭
在config/lintstaged/.lintstagedrc.js中删除所有npm run lint:prettier即可。
Git Hook
git hook 一般结合各种 lint，在 git 提交代码的时候进行代码风格校验，如果校验没通过，则不会进行提交。需要开发者自行修改后再次进行提交。
husky
有一个问题就是校验会校验全部代码，但是我们只想校验我们自己提交的代码，这个时候就可以使用 husky。
最有效的解决方案就是将 Lint 校验放到本地，常见做法是使用 husky 或者 pre-commit 在本地提交之前先做一次 Lint 校验。
项目在 config/husky 内部定义了相应的 hooks。
如何关闭
# 删除husky依赖即可
npm uninstall huksy如何跳过检查
# 加上 --no-verify即可跳过git hook校验（--no-verify 简写为 -n）
git commit -m "xxx" --no-verifylint-staged
项目的 lint-staged 配置文件位于config/lintstaged/.lintstagedrc.js
module.exports = {
// 对指定格式文件 在提交的时候执行相应的修复命令
'*.{js,jsx,ts,tsx}': ['npm run lint:eslint', 'npm run lint:prettier'],
'*.vue': ['npm run lint:prettier'],
'*.{css,scss,less,styl}': ['npm run lint:prettier', 'npm run lint:stylelint'],
}