Vue项目Git提交流程集成

Vue项目Git提交流程集成

本教程将指导你如何在Vue项目中集成一个规范化的Git提交流程，包括代码规范检查、提交信息规范和自动化工具配置。

前置条件

• Node.js 14.0+ 和 npm/yarn/pnpm
• Vue项目（Vue 2或Vue 3均可）
• Git已初始化的仓库

一、规范化提交流程概述

一个完整的Git提交流程通常包含以下环节：

1. 代码规范检查：使用ESLint和Prettier确保代码风格一致
2. 提交前检查：使用husky和lint-staged在提交前执行检查
3. 提交信息规范：使用commitlint和commitizen规范提交信息
4. 自动生成变更日志：使用conventional-changelog生成CHANGELOG

这样的流程可以帮助团队保持一致的代码风格和提交历史，提高协作效率。

二、安装必要依赖

首先，我们需要安装一系列开发依赖：

# 使用npm
npm install --save-dev eslint prettier @vue/eslint-config-prettier husky lint-staged @commitlint/cli @commitlint/config-conventional commitizen cz-conventional-changelog conventional-changelog-cli# 或使用yarn
yarn add --dev eslint prettier @vue/eslint-config-prettier husky lint-staged @commitlint/cli @commitlint/config-conventional commitizen cz-conventional-changelog conventional-changelog-cli# 或使用pnpm
pnpm add --save-dev eslint prettier @vue/eslint-config-prettier husky lint-staged @commitlint/cli @commitlint/config-conventional commitizen cz-conventional-changelog conventional-changelog-cli

三、配置EditorConfig

在项目根目录创建.editorconfig文件，确保在不同编辑器中保持一致的编码风格：

# .editorconfig
root = true[*]
charset = utf-8
indent_style = space
indent_size = 2
end_of_line = lf
trim_trailing_whitespace = true
insert_final_newline = true[*.md]
trim_trailing_whitespace = false

四、配置ESLint和Prettier

4.1 ESLint配置

如果你的Vue项目还没有ESLint配置，在项目根目录创建.eslintrc.js文件：

// .eslintrc.js
module.exports = {root: true,env: {node: true,browser: true,},extends: ['plugin:vue/vue3-recommended', // 或 'plugin:vue/recommended' 用于Vue 2'eslint:recommended','@vue/prettier',],parserOptions: {ecmaVersion: 2020,},rules: {'no-console': process.env.NODE_ENV === 'production' ? 'warn' : 'off','no-debugger': process.env.NODE_ENV === 'production' ? 'warn' : 'off',},
};

4.2 Prettier配置

创建.prettierrc文件：

{"semi": true,"singleQuote": true,"tabWidth": 2,"trailingComma": "es5","printWidth": 100,"bracketSpacing": true,"arrowParens": "avoid"
}

同时创建.prettierignore忽略某些文件：

/dist
/node_modules

五、配置Husky

Husky用于设置Git hooks，在关键Git操作前执行脚本。

5.1 初始化Husky

npx husky install

在package.json中添加一个脚本，确保其他开发者在安装依赖后自动启用husky：

{"scripts": {"prepare": "husky install"}
}

5.2 添加pre-commit钩子

npx husky add .husky/pre-commit "npx lint-staged"

5.3 添加commit-msg钩子

npx husky add .husky/commit-msg "npx --no -- commitlint --edit $1"

六、配置lint-staged

在package.json中添加lint-staged配置：

{"lint-staged": {"*.{js,vue,ts,jsx,tsx}": ["eslint --fix","prettier --write"],"*.{css,scss,less,styl}": ["prettier --write"],"*.{json,md}": ["prettier --write"]}
}

或者创建单独的.lintstagedrc.js文件：

// .lintstagedrc.js
module.exports = {'*.{js,vue,ts,jsx,tsx}': ['eslint --fix','prettier --write',],'*.{css,scss,less,styl}': ['prettier --write',],'*.{json,md}': ['prettier --write',],
};

七、配置commitlint

创建commitlint.config.js文件：

// commitlint.config.js
module.exports = {extends: ['@commitlint/config-conventional'],rules: {'type-enum': [2,'always',['feat',     // 新功能'fix',      // 修复Bug'docs',     // 文档变更'style',    // 代码格式（不影响代码运行的变动）'refactor', // 重构（既不是新增功能，也不是修改bug的代码变动）'perf',     // 性能优化'test',     // 增加测试'chore',    // 构建过程或辅助工具的变动'revert',   // 回滚到上一个版本'build',    // 打包'ci',       // CI相关变更],],'type-case': [2, 'always', 'lower'],'type-empty': [2, 'never'],'subject-empty': [2, 'never'],'subject-full-stop': [2, 'never', '.'],'header-max-length': [2, 'always', 72],},
};

八、配置commitizen

Commitizen可以帮助开发者创建符合约定的提交信息。

8.1 配置commitizen适配器

在package.json中添加：

{"config": {"commitizen": {"path": "cz-conventional-changelog"}}
}

8.2 添加提交脚本

在package.json中添加：

{"scripts": {"commit": "cz"}
}

这样开发者可以使用npm run commit（或yarn commit、pnpm commit）来代替git commit进行提交。

九、配置conventional-changelog

用于自动生成变更日志。

在package.json中添加脚本：

{"scripts": {"changelog": "conventional-changelog -p angular -i CHANGELOG.md -s","changelog:init": "conventional-changelog -p angular -i CHANGELOG.md -s -r 0"}
}

• changelog会在现有CHANGELOG.md上追加最新版本信息
• changelog:init会重新生成整个CHANGELOG.md

十、完整工作流演示

下面是一个典型的开发和提交流程：

1. 编写代码：开发新功能或修复bug

2. 暂存更改：git add .

3. 规范提交：npm run commit（而不是git commit）

   • 选择提交类型（feat、fix等）
   • 输入影响范围（可选）
   • 输入简短描述
   • 输入详细描述（可选）
   • 输入是否有破坏性变更（可选）
   • 输入是否修复了某个issue（可选）

4. 推送代码：git push

5. 版本发布前：npm run changelog生成新版本的变更日志

常见问题与解决方案

Husky钩子不生效

确保husky正确安装并且文件有执行权限：

chmod +x .husky/pre-commit
chmod +x .husky/commit-msg

ESLint报错太多无法提交

可以先使用--fix选项批量修复：

npx eslint --fix src/

想临时跳过检查直接提交

可以使用--no-verify参数：

git commit -m "紧急修复" --no-verify

但请注意，这应该只用于特殊情况。

自定义commit类型

修改commitlint.config.js中的type-enum规则，添加你需要的类型。

中文commit信息支持

默认配置支持中文提交信息，无需额外配置。

---

通过遵循本教程，你可以在Vue项目中建立一套完整的Git提交工作流，提高团队协作效率和代码质量。这套流程既适用于个人项目，也适用于团队协作。