「这是我参与2022首次更文挑战的第2天，活动详情查看：2022首次更文挑战」
ESLint
简介：
知名的JavaScript(以下简称JS)代码检测工具 官网
配置：
在使用VUE-Cli部署VUE项目时会有ESLint的安装配置项，他提供了三种：
1. 仅包含错误的ESLint
2. Airbnb的ESLint延伸规则
3. 标准的ESLint规则
ESLint的相关文件：
.eslintrc.js
相关配置：
// 参考文档：https://segmentfault.com/a/1190000014230857
rules: {
"no-console": process.env.NODE_ENV === "production" ? "warn" : "off",
"no-debugger": process.env.NODE_ENV === "production" ? "warn" : "off",
// 使用双引号并且违反规则报Warn
quotes: ["warn", "double"],
// if while function 后面的{必须与if在同一行，java风格。
"brace-style": ["warn", "1tbs", { allowSingleLine: true }],
// 数组和对象键值对最后一个逗号， never参数：不能带末尾的逗号, always参数：必须带末尾的逗号，
// always-multiline：多行模式必须带逗号，单行模式不能带逗号
"comma-dangle": ["warn", "always-multiline"],
// 控制逗号前后的空格
"comma-spacing": ["warn", { before: false, after: true }],
// 语句强制分号结尾
semi: [2, "always"],
// 为了解决ESLint和Prettier在函数名后是否加空格的冲突
"space-before-function-paren": 'off',
// 关闭Tab数量检查，因为默认ESLint把Tab当作两个空格
indent: "off",
// 不使用空格来替换tab
indent: 0,
"no-tabs": 0,
"no-mixed-spaces-and-tabs": 0,
},
Prettier
简介：
知名的代码格式化工具，一般配合ESLint使用 官网
配置：
相关文件：
.prettierrc
相关配置：记得去除注释
{
// 行尾是否分号
"semi": true,
// 是否单引号代替双引号
"singleQuote": false,
// 多行对象是否末尾逗号
"trailingComma": "all",
// 使用Tab来代替空格
"useTabs": true,
// HTML标签末尾的>可能会掉下一行，加上后就没事了
"htmlWhitespaceSensitivity": "ignore",
// 把一个Tab视作4个空格
"tabWidth": 4
}
Git
简介：
著名的团队管理工具，不多介绍
配置：
使用Angular团队规范延伸出的约定式提交规范
参考模板：
<本次提交的类型> [本次提交的范围]：<描述信息>
[正文]
[脚注]
其中，[]为可选参数，<为必选>。本次提交的类型可以是修改，新增之类。
样例：
修改 [登录API]：修改了登录API的请求方式
请求方式由POST改为GET
第233个ISSUE
工具：
Commitizen
安装：
使用npm install -g commitizen@4.2.4全局安装，之后安装cz-customizable：npm i cz-customizable@6.3.0 -S
配置：
首先添加配置到package.json中：
"lint-staged": {
"*.{js,jsx,vue}": [
"vue-cli-service lint",
"git add"
]
},
// ↓↓↓↓↓↓↓↓↓↓↓需要添加的内容↓↓↓↓↓↓↓↓↓↓↓
"config": {
"commitizen": {
"path": "node_modules/cz-customizable"
},
"cz-customizable": {
"config": "cz-config.js"// 别忘了添加配置文件的路径，不然可能会报错！
}
}
这样，commitizen就知道去使用cz-customizable的配置了！
可以使用git cz来测试一下配置的结果：
但是为了防止成员不使用git cz就直接提交，所以需要额外配置一些东西：
husky + commitlint
简介
- commitlint：用于检查提交信息
- husky：是
git hooks工具
本文关于Git hooks不多赘述，可以自行查阅。
安装
注意npm版本需在7.x以上，如果是根据本教程安装的最新版npm，就没有问题。
npm i -g husky@7.0.1
npm i --save-dev @commitlint/config-conventional@12.1.4 @commitlint/cli@12.1.4
配置
创建 commitlint.config.js 文件，并添加如下内容：
module.exports = {
// 继承的规则
extends: ["@commitlint/config-conventional"],
// 定义规则类型
rules: {
// type 类型定义，表示 git 提交的 type 必须在以下类型范围内
"type-enum": [
2,
"always",
[
"新增功能", // 新功能 feature
"问题修复", // 修复 bug
"文档变更", // 文档注释
"代码格式", // 代码格式(不影响代码运行的变动)
"代码重构", // 重构(既不增加新功能，也不是修复bug)
"性能优化", // 性能优化
"测试变更", // 增加测试
"工具变更", // 构建过程或辅助工具的变动
"代码回退", // 回退
"代码打包", // 打包
],
],
// subject 大小写不做校验
"subject-case": [0],
},
};
记得确保 commitlint.config.js 文件的编码格式为UTF-8。如何在VSCode中修改文件编码
之后配置husky。
执行npx husky install来生成.husky文件夹，然后执行npm set-script prepare "husky install"在package.json 中生成 prepare 指令，最后执行npx husky add .husky/commit-msg 'npx --no-install commitlint --edit "$1"'来添加GitHooks相关的指令。
可以在生成prepare指令后通过npm run prepare来检验是否成功。
整体结果如图所示：
如果有指令执行报错可以尝试来回切换VSCode和CMD终端来执行。
我们可以通过随意一次提交来检验是否成功配置：
提交时的代码规范化检查及自动修正
代码规范校验配置
在终端执行npx husky add .husky/pre-commit "npx eslint --ext .js,.vue src"添加指令。
此时，如果有不合规的代码提交后，将会抛出错误导致无法提交。测试如图：
自动修正配置
我们使用lint-staged来自动修复。
首先修改package.json:
"lint-staged": {
"src/**/*.{js,vue}": [
"prettier --write",
"eslint",
"git add"
]
}
然后修改pre-commit文件中的npx那行为：npx lint-staged即可。
参考文献
慕课网《基于Vue3最新标准，实现后台前端综合解决方案》第二章节
