使用VS Code插件一键创建分支和Merge Request-五八三

背景

首先为什么要开发 VS Code 插件呢？

目前如果我要开发一个新需求时，工作流程基本上是：

打开 Jira，找到对应的需求，把需求的 Jira 号复制下来，例如：USER-666。
然后打开 VS Code，首先切到项目主分支（master），根据姓名和 Jira 号建立一个新的个人开发分支，例如：feat/username/user-666。
进行开发以及修复产生的 BUGS。
开发完成之后将本地代码推送到远程代码仓库（Gitlab）上，再新建一个 Merge request，由其他小伙伴进行 Code Review，没问题之后再合并到主分支上。
然后开启下一个需求的流程。

可以看到每次需求的流程都有一些重复的工作，而且涉及到两三个平台，需要在这些平台中切来切去。

如果我们把这些重复的工作都放到一个平台中来完成呢？VS Code 插件可以帮助我们来完成！

实现的功能

我们先看一下实现的插件可以完成哪些工作？

安装插件：easier
按键：shift + command + p
输入命令 Create branch and merge request
按键：回车键
出现 Jira 列表，从中选择本次要开发的需求
出现分支列表，从中选择从哪个分支切出新分支进行开发

之后，VS Code 会建立并切换至符合分支命名规范的新分支，在 Gitlab 上建立该分支的 Merge request，我们直接进行开发即可。

插件帮助我们通过命令一次性完成了上述工作流程中的1、2、4步。✌️

工作原理

了解完插件实现的功能之后，我们来看下具体是怎么实现的呢？

首先快速创建一个插件项目

确认已经安装了最新版本的 Node.js 和 npm，可以在终端中输入以下命令来检查它们的版本号。

node -v
npm -v

在终端中运行以下命令来安装 Yeoman Code Generator 插件。

npm install -g yo generator-code

在终端窗口中输入以下命令，生成基本的插件项目。

yo code

生成过程中会让我们选择插件的类型，有以下几种：

New Extension (TypeScript)：创建一个基于 TypeScript 的新插件项目。
New Extension (JavaScript)：创建一个基于 JavaScript 的新插件项目。
New Color Theme：创建一个新的颜色主题插件项目，用于定制 VSCode 的编辑器配色方案。
New Language Support：创建一个新的语言支持插件项目，用于为 VSCode 中的编程语言添加自动完成、语法高亮等功能。
New Code Snippets：创建一个新的代码片段插件项目，用于向 VSCode 添加您自己的代码片段、快速输入等功能。
New Keymap：创建一个新的键位映射插件项目，用于自定义 VSCode 的快捷键配置。

我们选择 New Extension (TypeScript)：创建一个基于 TypeScript 的新插件项目。

如何获取 Jira 任务列表

插件的第一步就是展示 Jira 的任务列表提供给我们选择，那么插件是怎么获取的呢？

我们可以使用第三方的 npm 包来实现与 Jira 的交互，以 jira.js（www.npmjs.com/package/jir… 为例：

首先我们需要获取和 Jira 交互的权限，提前拿到 Jira 的链接和个人账号的 ACCESS_TOKEN（获取 token 的方法该插件（easier）的说明文档上有，可以参考），然后传给 jira.js 进行身份验证。

import { Version2Client } from "jira.js";



const jira = new Version2Client({
  host: '<https://your-domain.atlassian.net>',
  authentication: {
    personalAccessToken: 'YOUR_ACCESS_TOKEN',
  },
});

通过 Jira API 获取当前用户的 Jira 任务列表。

const issuese = await jira.issueSearch.searchForIssuesUsingJqlPost({
  jql: "assignee = currentUser() ORDER BY priority, created DESC",
})

通过 VS Code 的 showQuickPick() 让用户选择 Jira，该方法可以提供选项并接收用户的选择。

// 显示选择框
const title = (await vscode.window.showQuickPick(jiraOptions, {
	placeHolder: "选择一个 jira 作为当前需求",
})) || "";

如何在本地新建分支

首先新建分支需要使用 Git，同样我们使用 npm 包进行交互，以 simple-git（www.npmjs.com/package/sim… 为例：

进行初始化配置

import simpleGit from "simple-git";



// repoPath 是项目仓库路径
const git = simpleGit(repoPath);

使用 simple-git 提供的 API 新建分支并推送到远程仓库

// 根据源分支创建新分支，并切换到新分支
git.checkoutBranch(newBranchName, sourceBranch)

// 将新分支推送到远程仓库
git.push(["-u", "origin", newBranchName]);

如何创建 Merge request

首先新建 MR 需要使用 Gitlab，同样我们使用 npm 包进行交互，以 @gitbeaker/node（www.npmjs.com/package/@gi…）为例：

进行初始化配置，和 Jira 一样，我们需要拿到 Gitlab 的个人 ACCESS_TOKEN 来进行身份验证以获取交互权限。

import { Gitlab } from "@gitbeaker/node";



const gitlab = new Gitlab({
  host: GITLAB_HOST,
  token: GITLAB_ACCESS_TOKEN,
});

获取当前用户信息。

const user = await gitlab.Users.current();

创建 Merge request。

const mergeRequest = await gitlab.MergeRequests.create(
  projectId, // 项目 id
  sourceBranch,
  targetBranch,
  title, // MR 名称
  { assigneeId: user.id } // 分配给哪个用户
);

VS Code 插件配置项

上面提到的 ACCESS_TOKEN，可以让用户在 VS Code 中进行配置，插件通过 API 来进行获取。

首先将 Jira token 和 Gitlab token 放到 package.json 文件的可配置项中。

// 在 package.json 添加配置项
	"configuration": {
    "easier.settings.jiraHost": {
      "type": "string",
      "default": "<https://your-domain.atlassian.net>",
      "description": ""
    },
    "easier.settings.gitlabHost": {
      "type": "string",
      "default": "<https://your-domain.atlassian.net>",
      "description": ""
    },
    "easier.settings.jiraUserPersonalAccessToken": {
      "type": "string",
      "default": "",
      "description": ""
    },
    "easier.settings.gitlabUserPersonalAccessToken": {
      "type": "string",
      "default": "",
      "description": ""
    }
  },

插件通过 getConfiguration() 方法获取配置信息。

// 获取相关配置
const JIRA_HOST = vscode.workspace
  .getConfiguration("easier.settings")
  .get("jiraUserPersonalAccessToken")

用户在 setting.json 文件中进行配置。

"easier.settings.jiraUserPersonalAccessToken": "djdkljajflkkdj",

发布插件

确保包含了 package.json 文件以及其他必须的元素。例如：
- version: 版本
- publisher: 扩展的 Publisher ID
- repository: 指定关联的源代码仓库
安装 vsce 命令行工具

npm install -g vsce

创建一个发布者身份，访问 Azure DevOps Services 页面，创建一个新的发布者。
配置密钥信息，可以参考这个教程。
使用 vsce login 命令登录发布者账户：

vsce login your-publisher-name

准备好发布。确保package.json中已经设置正确的版本号以及其他相关信息后，在项目根目录下使用 vsce package 命令打包扩展插件。命令将会生成一个名为your-extension.vsix的文件。
最后，使用vsce publish命令发布插件。

vsce publish

发布之后，过几分钟可以在插件商店进行下载，官方文档： Publishing Extensions。

总结

本文介绍了为什么需要开发 VS Code 插件以及插件的实现功能。

然后解释了插件的工作原理，包括如何获取 Jira 任务列表、如何在本地新建分支和如何创建 Gitlab Merge request。

最后提到了插件的配置项，给出了相关代码示例和配置方法，以及如何发布插件。

文章版权归作者所有，未经允许请勿转载，侵权请联系 admin@trc20.tw 删除。

THE END

# 前端 # Visual Studio Code