项目规范
提示
前端 Lint 是一个重要的工程化环节,它通过静态分析代码来发现错误并纠正它们,同时规范编码习惯,使团队的代码风格保持统一。
项目内集成了以下几种代码校验方式
- eslint 用于校验代码格式规范
- prettier 代码格式化
- stylelint 用于校验 css/less 规范
- commitlint 用于校验 git 提交信息规范
ESLint
用于规范并校验 ECMAScript/JavaScript code 的编写。
其配置文件为
- .eslintrc.cjs
- .eslintignore
prettier
用于统一代码排版格式
其配置文件为
- .prettierrc
- .prettierignore
stylelint
用于规范并校验 CSS/SCSS/LESS code 的编写
其配置文件为
- .stylelintrc
- .stylelintignore
commitlint
负责校验 commit msg 是否符合规范
export default {
// 继承的规则
extends: ['@commitlint/config-conventional'],
// 定义规则类型
rules: {
'body-leading-blank': [2, 'always'], // 确保提交消息正文之前有一行空白行
'type-empty': [2, 'never'], // 不允许提交消息的 type 类型为空
'subject-case': [0], // subject 大小写不做校验
// type 类型定义,表示 git 提交的 type 必须在以下类型范围内
'type-enum': [
2,
'always',
[
'feat', // 新功能 feature
'fix', // 修复 bug
'docs', // 文档注释
'style', // 代码格式(不影响代码运行的变动)
'refactor', // 重构(既不增加新功能,也不是修复bug)
'perf', // 性能优化
'test', // 添加疏漏测试或已有测试改动
'chore', // 构建过程或辅助工具的变动
'revert', // 回滚commit
'build', // 构建流程、外部依赖变更 (如升级 npm 包、修改打包配置等)',
'ci', // 修改CI配置、脚本
'types', // 类型定义文件修改
'wip', // 开发中
],
],
},
};
还有一些辅助工具,如:
- husky:能够监听 git hooks 的 nodejs 包,让 nodejs 开发者处理 git hooks 任务变得更加容易。
- lint-staged:可以将 git 的“已暂存(staged)”的文件作为参数传入你要执行的 shell script 之中。
vscode 配置
如果你使用的vscode, 则推荐使用 eslint、prettier以及stylelint这三个插件配合开发。
.vscode/extensions.json
{
"recommendations": [
"dbaeumer.vscode-eslint",
"stylelint.vscode-stylelint",
"esbenp.prettier-vscode",
"lokalise.i18n-ally",
]
}