前端项目中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…

原文链接:juejin.im

上一篇:calendar
下一篇:封装一下vue中的axios

相关推荐

  • 🔥手写大厂前端知识点源码系列(上)

    如今前端攻城狮的要求越来越高,会使用常见的API已经不能满足现如今前端日益快速发展的脚步。现在大厂基本都会要求面试者手写前端常见API的原理,以此来证明你对该知识点的理解程度。

    9 天前
  • 🔥前端面试大厂手写源码系列(上)

    如今前端攻城狮的要求越来越高,会使用常见的API已经不能满足现如今前端日益快速发展的脚步。现在大厂基本都会要求面试者手写前端常见API的原理,以此来证明你对该知识点的理解程度。

    6 天前
  • (本人)2019前端校招经历

    我是一个想要找前端工作的妹纸,最近电话面了挺多企业,在每次面试中都会发现自己的不足或者没涉及到的方面,一边被拒一边学习新知识。想要在这里记录、分享前端校招遇到的问题,希望每一次都有提升,下一次不会再犯...

    2 年前
  • (二)各大笔试网站(牛客网、赛码网、测评网)介绍和做题技巧——以前端开发为例

    (/public/upload/3855e8b808281493dde93db067f6b1c2) 进行笔试之前,我们首先要了解的是,我们春招、秋招的时候,企业用的是什么平台。

    1 个月前
  • 鲍尔注册本地的Git包

    鲍尔注册本地的Git包...

    2 年前
  • 高级前端面试题大汇总(只有试题,没有答案)

    面试题来源于网络,看一下高级前端的面试题,可以知道自己和高级前端的差距。有些面试题会重复。 ...

    1 年前
  • 高级前端知识点汇总

    高级前端知识点汇总 1.首屏加载优化 2.搜索引擎优化(SEO) 3.请求优化 4.Vue服务器端渲染 (SSR) 5.W3C标准 6.vue render优化...

    2 个月前
  • 高级前端基础-JavaScript抽象语法树AST

    前言 Babel为当前最流行的代码JavaScript编译器了,其使用的JavaScript解析器为babelparser(https://github.com/babel/babel/tree/...

    1 年前
  • 高效阅读Github源代码

    三种办法。如果你主要看前端项目的代码,直接看第三种。 1,用Chrome插件Octotree,左侧会出现树形结构,方便你浏览源代码。 (https://img.javascriptcn.com/6...

    2 年前
  • 高效前端开发 - Visual Studio Code

    本文是根据我在公司演讲(2019年8月)的高效开发主题PPT重新总结发布的一篇文章。有兴趣了解PPT的可以前往百度网盘下载:高效开发 VSCode.pptx(https://pan.baidu.c...

    6 个月前

官方社区

扫码加入 JavaScript 社区