Python社区  »  Git

前端项目中git规范化提交方案

邹R-ainna • 7 月前 • 57 次点击  
阅读 51

前端项目中git规范化提交方案

团队项目中,一般我们会统一代码提交规范。这里简单介绍下使用git钩子插件来规范化提交代码。

1. 简介

在git中,每次执行git commit, git push等操作时,会触发一个或多个shell脚本,这些脚本称为钩子,存放在 .git/hooks 目录下。钩子分为前置钩子和后置钩子,前置钩子为git命令调用前执行,后置钩子为git命令完成后执行。

所以在git命令提交时,我们可以额外做一些事情,比如提交前的代码检测,提交后的部署等功能。下面我们借助插件来实现代码提交前的commit信息校验,代码格式化,代码检测等功能。

2. 步骤

2.1 安装插件

首先安装husky, pretty-quick,lint-staged,commitlint, eslint插件。

cnpm i husky pretty-quick lint-staged commitlint eslint --save-dev
复制代码
  • husky: 在 .git/hooks 中写入 pre-commit 等脚本激活钩子,在 Git 操作时触发
  • pretty-quick:代码格式化
  • lint-staged:每次提交时只检查本次提交的暂存区的文件
  • commitlint:对git每次提交的commit信息做格式校验
  • eslint: 代码质量检测

2.2 修改package.json

修改package.json配置,设置lint-staged和husky。

"lint-staged": {
    "linters": {
      "**/*.{js,vue}": [
        "eslint --fix",
        "git add"
      ]
    }
  }
复制代码
  "husky": {
    "hooks": {
      "pre-commit": "pretty-quick --staged && lint-staged",
      "commit-msg": "commitlint -E HUSKY_GIT_PARAMS"
    }
  }
复制代码
  • 安装husky后在.git/hooks里写入pre-commit钩子,git commit提交之前执行 pretty-quick --staged && lint-staged 命令。
  • pretty-quick 对提交的文件进行格式化,需要配置prettier.config.js。
  • lint-staged 参考package.json里lint-staged的设置,利用linters对暂存区的文件路径应用过滤规则,匹配的文件执行后面配置的任务,这里是执行eslint代码检测,把没有问题的代码执行git add命令放入暂存区。
  • 第二个是对提交信息做格式校验,commitlint -E HUSKY_GIT_PARAMS,需要配置commitlint.config.js文件。
  • 如果任务执行过程中有报错,就退出,不执行代码commit提交。

2.3 添加配置文件

下面的配置文件仅供参考。

// prettier.config.js
module.exports = {
  printWidth: 120, //一行的字符数,如果超过会进行换行,默认为80
  tabWidth: 2, //一个tab代表几个空格数,默认为80
  useTabs: false, //是否使用tab进行缩进,默认为false,表示用空格进行缩减
  singleQuote: true, //字符串是否使用单引号,默认为false,使用双引号
  semi: true, //行位是否使用分号,默认为true
};
复制代码
// commitlint.config.js
module.exports = {
  rules: {
    'type-enum': [
      2,
      'always',
      [
        'build',
        'ci',
        'chore',
        'merge',
        'docs',
        'feat',
        'fix',
        'test'
      ]
    ],
    'body-leading-blank': [1, 'always'],
    'footer-leading-blank': [1, 'always'],
  }
};
复制代码
// .eslintrc.js
module.exports = {
  root: true,
  env: {
    node: true
  },
  extends: ['plugin:vue/essential', '@vue/prettier'],
  rules: {
    'no-console': process.env.NODE_ENV === 'production' ? 'error' : 'off',
    'no-debugger': process.env.NODE_ENV === 'production' ? 'error' : 'off',
    quotes: [1, 'single'],
    'vue/no-parsing-error': [2, { 'x-invalid-end-tag': false }]
  },
  parserOptions: {
    parser: 'babel-eslint'
  }
};
复制代码

参考地址: www.jianshu.com/p/dc55ddd6c…

Python社区是高质量的Python/Django开发社区
本文地址:http://www.python88.com/topic/54659
 
57 次点击  
分享到微博