资讯专栏INFORMATION COLUMN

手把手教你结合commitizen 搭建属于自己的项目git commit 校验工具

kel / 3123人阅读

摘要:其实有点耗时间,所以我们做了一下自动化初步自动化修改中的初始化将部分脚本写入到中询问是否全部使用是否默认使用开始安装依赖正在安装正在安装清除掉以前配置的只要两部安装即可提交代码的时候直接执行即可更智能摸索中

先丢出最终版的index.js文件内容
#!/usr/bin/env node
"use strict";
const path = require("path");
const editJsonFile = require("edit-json-file");
const arg = process.argv
// 初始化my-commit ,将部分脚本写入到package.json中
if (arg[2] && arg[2] === "init") {
  // If the file doesn"t exist, the content will be an empty object by default.
  let file = editJsonFile(`${process.cwd()}/package.json`);
  // Set a couple of fields
  file.set("husky", {"hooks": {
    "pre-commit": "lint-staged"
  }});
  file.set("lint-staged", {
    "src/*.js": "["eslint --fix"]"
  });
  // 询问是否全部使用git add .
  var List = require("prompt-list");
  var list = new List({
    name: "order",
    message: "是否默认使用git add .",
    // choices may be defined as an array or a function that returns an array
    choices: [
      "yes",
      "no"
    ]
  })
  // async
  list.ask(function(answer) {
    file.set("scripts", {
      "my-ci": answer === "yes" ? "git add . && cross-env ./node_modules/.bin/my-commit" : "cross-env ./node_modules/.bin/my-commit"
    });
    // Output the content
    file.save();
    var shell = require("shelljs");
    console.log("开始安装依赖");
    shell.exec("npm i husky --save-dev", {async: true})
    console.log("正在安装 husky---- ");
    shell.exec("npm i cross-env --save-dev", {async: true})
    console.log("正在安装cross-env ---- ");
    shell.exec("npm i lint-staged --save-dev", {async: true})
  })
} else {
  const bootstrap = require("commitizen/dist/cli/git-cz").bootstrap;
  bootstrap({
    cliPath: path.join(__dirname, "../../node_modules/commitizen"),
    // this is new
    config: {
      "path": "cz-conventional-changelog",
      "path": "cz-emoji"
    }
  });
}
步骤 一、创建工具项目
1.使用git/gitlab创建一个空的仓库
2.在空仓库中添加index.js 内容如下
// index.js

#!/usr/bin/env node
"use strict";
const bootstrap = require("commitizen/dist/cli/git-cz").bootstrap;
  bootstrap({
    cliPath: path.join(__dirname, "../../node_modules/commitizen"),
    // this is new
    config: {
      "path": "cz-conventional-changelog"
    }
  });
使用工具到相应的项目(假设插件名称my-commit
1.先发布你的工具项目到npm,相当于创建一个npm包、具体怎么发布 这里不做赘述,网上很多教程
2.安装工具(假设插件名称my-commit
npm install my-commit --save-dev
3.配置

需要在package.jsonscript中添加如下

// my-ci 是自己定义的写成什么都可以

"my-ci": "./node_modules/.bin/my-commit"
4.配置之后 执行了git add .之后 执行npm run my-ci 将会出现选填补充信息的选项

如果觉得git add.之后再执行 npm run my-ci 有点麻烦,可以直接改成

// my-ci 是自己定义的写成什么都可以

"my-ci": "git add. && ./node_modules/.bin/my-commit"
5 因为以上命令存在不同系统路径不兼容问题 需要加入 cross-env
npm install cross-env --save-dev 
6 再次修改package.json
// my-ci 是自己定义的写成什么都可以

"my-ci": "git add. && cross-env ./node_modules/.bin/my-commit"

当需要提交代码的时候,不用执行git add . 直接执行npm run my-ci即可

7 提示信息加上可爱的表情

需要在index.js文件中添加 cz-emoji 如下

// index.js

#!/usr/bin/env node
"use strict";

const bootstrap = require("commitizen/dist/cli/git-cz").bootstrap;
  bootstrap({
    cliPath: path.join(__dirname, "../../node_modules/commitizen"),
    // this is new
    config: {
      "path": "cz-conventional-changelog",
      "path": "cz-emoji"
    }
  });

这个时候 重新发npm包之后再安装到自己的项目下,执行提交的时候

8 为了增强校验功能,加入eslint对文件进行

这个有点复杂,需要通过lint-staged来判断

所以先安装以下依赖

npm i husky --save-dev
npm i lint-stage --save-dev

配置package.json

// 增加属性
  "husky": {
    "hooks": {
      "pre-commit": "lint-staged"
    }
  },
  "lint-staged": {
    "src/*.js": [
      "eslint --fix"
    ]
  },
// 其中src的具体路径是可以自己配置
// 校验规则是基于当前目录的.eslintrc.js 文件,如果有些规则不想要,就配置这个文件

这个时候我们提交代码的时候再输入基本的信息之后会执行一个eslint的代码规则

总结以上配置文件 我们需要

安装的库有

npm i my-commit --save-dev
npm i cross --save-dev
npm i husky --save-dev
npm i lint-stage --save-dev

需要配置package.json属性有

  "script": {
      ...
      "my-ci": "git add. && cross-env ./node_modules/.bin/my-commit"
    },

  "husky": {
    "hooks": {
      "pre-commit": "lint-staged"
    }
  },
  "lint-staged": {
    "src/*.js": [
      "eslint --fix"
    ]
  },

如果每个项目都这么玩。其实有点耗时间,所以我们做了一下自动化

10 初步自动化

修改my-commit中的 index.js

#!/usr/bin/env node
"use strict";
const path = require("path");
const editJsonFile = require("edit-json-file");
const arg = process.argv
// 初始化my-commit ,将部分脚本写入到package.json中
if (arg[2] && arg[2] === "init") {
  // If the file doesn"t exist, the content will be an empty object by default.
  let file = editJsonFile(`${process.cwd()}/package.json`);
  // Set a couple of fields
  file.set("husky", {"hooks": {
    "pre-commit": "lint-staged"
  }});
  file.set("lint-staged", {
    "src/*.js": "["eslint --fix"]"
  });
  // 询问是否全部使用git add .
  var List = require("prompt-list");
  var list = new List({
    name: "order",
    message: "是否默认使用git add .",
    // choices may be defined as an array or a function that returns an array
    choices: [
      "yes",
      "no"
    ]
  })
  // async
  list.ask(function(answer) {
    file.set("scripts", {
      "my-ci": answer === "yes" ? "git add . && cross-env ./node_modules/.bin/my-commit" : "cross-env ./node_modules/.bin/my-commit"
    });
    // Output the content
    file.save();
    var shell = require("shelljs");
    console.log("开始安装依赖");
    shell.exec("npm i husky --save-dev", {async: true})
    console.log("正在安装 husky---- ");
    shell.exec("npm i cross-env --save-dev", {async: true})
    console.log("正在安装cross-env ---- ");
    shell.exec("npm i lint-staged --save-dev", {async: true})
  })
} else {
  const bootstrap = require("commitizen/dist/cli/git-cz").bootstrap;
  bootstrap({
    cliPath: path.join(__dirname, "../../node_modules/commitizen"),
    // this is new
    config: {
      "path": "cz-conventional-changelog",
      "path": "cz-emoji"
    }
  });
}
 

清除掉以前配置的package.json

只要两部安装即可

npm i my-commit
npx my-commit init

提交代码的时候直接执行 npm run my-ci 即可

11 更智能(摸索中)

文章版权归作者所有,未经允许请勿转载,若此文章存在违规行为,您可以联系管理员删除。

转载请注明本文地址:https://www.ucloud.cn/yun/98628.html

相关文章

  • 把手教你github提交记录

    摘要:但是,毕竟是人,哪天忙了就会忘记提交,所以想着能不能实现在自己阿里云服务器系统上,设置,定制下命令,实现每天定点自动提交。 前言 进入自己github主页会看到自己的提交记录,如果某天没有提交记录,那天的小方框就显示灰色。强迫症的我,每次进来看着就感觉不爽,想着自己每天记得提交点东西,争取像阮一峰大神一样,每天都有提交记录。 showImg(https://www.wty90.co...

    ChanceWong 评论0 收藏0
  • 把手教你使用Hexo + Github Pages搭建个人独立博客

    摘要:设置什么是本用于介绍托管在的项目,不过,由于他的空间免费稳定,用来做搭建一个博客再好不过了。你可以通过来访问你的个人主页。执行过程中可能需要让你输入账户的用户名及密码,按照提示操作即可。推荐使用腾讯公益。 系统环境配置 要使用Hexo,需要在你的系统中支持Nodejs以及Git,如果还没有,那就开始安装吧! 安装Node.js 下载Node.js参考地址:安装Node.js 安装Git...

    刘福 评论0 收藏0
  • 打造个人or团队适用开源项目规范

    摘要:打造个人团队适用的开源项目规范是一个用来优化托管在上的多代码库的工作流的一个管理工具可以让你在主项目下管理多个子项目,从而解决了多个包互相依赖,且发布时需要手动维护多个包的问题。 打造个人or团队适用的开源项目规范 lerna Lerna 是一个用来优化托管在gitnpm上的多package代码库的工作流的一个管理工具,可以让你在主项目下管理多个子项目,从而解决了多个包互相依赖,且发布...

    huangjinnan 评论0 收藏0
  • 工程搭建---代码风格统一

    摘要:为此我们需要安装这个是用于提交代码的钩子函数安装完之后,我们就需要在增加运行钩子函数。等钩子函数这样就简单的成功对代码进行效验了,当然这边更进一步的可以使用这个可以将取得所有被提交的文件依次执行写好的任务。 一个项目是会有多个成员来开发的,因此统一开发规范是很有必要的,不然每个人都有自己的风格,同步之后代码都会报错。我这边是用Vscode编译器的。 首先用vue-cli3.0创建一个工...

    levius 评论0 收藏0

发表评论

0条评论

kel

|高级讲师

TA的文章

阅读更多
最新活动
阅读需要支付1元查看
<