Vue项目Git提交流程集成

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

前置条件

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

一、规范化提交流程概述

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

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

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

二、安装必要依赖

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

bash 复制代码

# 使用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文件，确保在不同编辑器中保持一致的编码风格：

ini 复制代码

# .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文件：

javascript 复制代码

// .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文件：

json 复制代码

{
  "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

bash 复制代码

npx husky install

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

json 复制代码

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

5.2 添加pre-commit钩子

bash 复制代码

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

5.3 添加commit-msg钩子

bash 复制代码

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

六、配置lint-staged

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

json 复制代码

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

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

javascript 复制代码

// .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文件：

javascript 复制代码

// 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中添加：

json 复制代码

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

8.2 添加提交脚本

在package.json中添加：

json 复制代码

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

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

九、配置conventional-changelog

用于自动生成变更日志。

在package.json中添加脚本：

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

十、完整工作流演示

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

编写代码：开发新功能或修复bug
暂存更改 ：git add .
规范提交：npm run commit（而不是git commit）
- 选择提交类型（feat、fix等）
- 输入影响范围（可选）
- 输入简短描述
- 输入详细描述（可选）
- 输入是否有破坏性变更（可选）
- 输入是否修复了某个issue（可选）
推送代码 ：git push
版本发布前 ：npm run changelog生成新版本的变更日志

常见问题与解决方案

Husky钩子不生效

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

bash 复制代码

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

ESLint报错太多无法提交

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

bash 复制代码

npx eslint --fix src/

想临时跳过检查直接提交

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

bash 复制代码

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

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

自定义commit类型

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

中文commit信息支持

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

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