大家好,我是Derek。
今天给大家介绍一下基于 vue-cli 脚手架生成的前端工程的代码格式和提交规范的配置流程。
代码格式规范
ESLint
ECMAScript/JavaScript 的代码检查和格式化工具。
module.exports = {
// ESLint 规则作用的范围
root: true,
// 启用 ESLint 检测的环境
env: {
node: true
},
// ESLint 基础配置继承的配置
extends: ['plugin:vue/essential', 'eslint:recommended', '@vue/prettier'],
// 解析器
parserOptions: {
parser: 'babel-eslint'
},
/**
* 需要修改的启用规则和相应的错误级别
* "off" 或 0 关闭规则
* "warn" 或 1 开启规则,使用警告级别的错误(不会导致程序退出)
* "error" 或 2 开启规则,使用错误级别的错误(程序会退出)
* */
rules: {
'no-console': process.env.NODE_ENV === 'production' ? 'warn' : 'off',
'no-debugger': process.env.NODE_ENV === 'production' ? 'warn' : 'off'
}
}
Prettier
代码风格格式化工具
{
// 不尾随分号
"semi": false,
// 使用单引号
"singleQuote": true,
// 多行逗号分割的语法中,最后一行不加逗号
"trailingComma": "none"
}
Prettier 和 ESLint 配合保存自动格式化代码
- VSCode
- 设置 保存自动格式化代码
- 设置 TabSize 为 2
- 设置 Prettier 为默认格式化工具
- ESLint 和 Prettier 冲突
- .eslintrc.js 文件的规则字段添加
space-before-function-paren': 'off'
- .eslintrc.js 文件的规则字段添加
Git提交规范
约定式提交规范
约定式提交规范是一种基于提交信息的轻量级约定。 它提供了一组简单规则来创建清晰的提交历史; 这更有利于编写自动化工具。 通过在提交信息中描述功能、修复和破坏性变更, 使这种惯例与 SemVer 相互对应。
<type>[optional scope]: <description>
[optional body]
[optional footer(s)]
译文:
<类型>[可选 范围]: <描述>
[可选 正文]
[可选 脚注]
commitizen
当您使用 Commilizen 提交时,其会提示您填写所有必填的提交字段并生成相应的提交信息。
1.全局安装 Commitizen
npm install -g commitizen
- 安装 cz-customizable
npm i cz-customizable --save-dev
3.在 package.json 中添加
"config": {
"commitizen": {
"path": "node_modules/cz-customizable"
}
}
4.项目根目录下创建 .cz-config.js
module.exports = {
// 可选类型
types: [
{ value: 'feat', name: 'feat: 新功能' },
{ value: 'fix', name: 'fix: 修复一个bug' },
{ value: 'docs', name: 'docs: 文档变更' },
{ value: 'style', name: 'style: 代码格式(不影响代码运行的变动)' },
{ value: 'conflict', name: 'conflict: 修复代码冲突' },
{ value: 'font', name: 'font: 字体文件更新' },
{ value: 'refactor', name: 'refactor: 重构(既不是增加feature,也不是修复bug)'},
{ value: 'perf', name: 'perf: 性能优化' },
{ value: 'test', name: 'test: 增加测试' },
{ value: 'chore', name: 'chore: 构建过程或辅助工具或配置工具修改' },
{ value: 'revert', name: 'revert: 回退' },
{ value: 'build', name: 'build: 影响构建系统或外部依赖项的更改(如:webpack、npm)' }
],
// 交互式消息提示步骤
messages: {
type: '请选择提交类型:',
customScope: '请输入修改范围(可选):',
subject: '请简要描述提交(必填):',
body: '请输入详细描述(可选):',
footer: '请输入要关闭的issue(可选):',
confirmCommit: '确认使用以上信息提交?(y/n/e/h)'
},
// 跳过问题
skipQuestions: ['body', 'footer'],
// subject文字长度默认是72
subjectLimit: 72
}
- 使用 git cz 代替 git commit 提交代码
Git Hooks
Git 在提交和合并等操作前后触发额外的操作
commit-msg
可以用来规范化标准格式,并且可以按需指定是否拒绝本次提交。
pre-commiy
会在提交前被调用,并且可以按需指定是否要拒绝本次提交。
commitlint
commitlint 用于检查提交的信息是否符合约定式规范
1.安装依赖
npm install -g @commitlint/cli @commitlint/config-conventional
2.项目根目录下创建 commitlint.config.js
echo "module.exports = {extends: ['@commitlint/config-conventional']}" > commitlint.config.js
3.打开 commitlint.config.js 增加自定义规则
module.exports = {
// 继承的规则
extends: ['@commitlint/config-conventional'],
// 自定义规则
roles: {
// type 的类型定义:表示 git 提交的 type 必须以下类型范围之内
'type-enum': [
// 当前验证的错误级别
2,
// 再什么情况下进行验证
'always',
// 反省内容
['feat', 'fix', 'docs', 'style', 'refactor', 'perf', 'test', 'chroe', 'revert', 'build']
],
// subject 大小写不做校验
'subject-case': [0]
}
}
注意:保存的编码格式应为 UTF-8
husky
现代原生 Git Hooks 工具
1.安装 husky
npm install husky --save-dev
2.启动 Git Hooks
npx husky install
3.编辑 package.json,安装后自动启动 Hooks
npm pkg set scripts.prepare="husky install"
4.运行 prepare 指令
npm run prepare
5.添加 hooks
npx husky add .husky/commit-msg 'npx --no-install commitlint --edit "$1"'
npx husky add .husky/pre-commit "npx eslint --ext .js,.vue src"
lint-staged
lint-staged 可以让当前的代码检查只检查本次修改更新的代码,并在出现错误的时候,自动修复并推送
1.修改 package.json
"lint-staged":{
"src/**/*.{js,vue}": [
"eslit --fix",
"git add"
]
},
2.修改 pre-commit
npx eslint --ext .js,.vue src
->
npx lint-staged
原文链接:https://juejin.cn/post/7236719086049361957 作者:ddddderek