【VS Code插件开发】自定义指令实现 git 命令 (九)

🐱 个人主页:不叫猫先生,公众号:前端舵手
🙋‍♂️ 作者简介:前端领域优质作者、阿里云专家博主,共同学习共同进步,一起加油呀!
✨优质专栏:VS Code插件开发极速入门
📢 资料领取:前端进阶资料可以找我免费领取

在这里插入图片描述

我们通常会通过小乌龟、SourceTree、终端等实现 git 的相关操作,VS Code 开发工具也提供了 git 相关的操作 ,那么在VS Code中如何通过自定义命令实现 git 的相关操作?本文主要介绍了git clonegit addgit commitgit push等命令的实现。

创建终端

  1. 异步函数声明:

    async function executeGitCommand(command, options) {
    

    用于执行 Git 命令。command 参数表示要执行的 Git 命令字符串,options 参数是一个对象,包含了执行命令的选项。

  2. 检查终端是否存在:

    if (!terminal){terminal = vscode.window.createTerminal(terminalOptions);
    }
    

    检查全局变量 terminal 是否存在,如果不存在则创建一个新的终端。vscode.window.createTerminal 方法用于创建一个终端,terminalOptions 可能是在代码的其他地方定义的终端选项。

  3. 获取终端进程 ID:

    const pid = await terminal.processId;
    

    使用 await 关键字获取终端的进程 ID。这样可以在需要时使用进程 ID 进行其他操作,例如监控或结束进程。

  4. 发送 Git 命令到终端:

    terminal.sendText(command);
    

    使用 terminal.sendText 方法将 Git 命令发送到终端。这使得可以通过代码自动执行一系列 Git 命令。

  5. 显示终端:

    terminal.show();
    

    最后,使用 terminal.show 方法显示终端。这确保用户可以看到终端中执行的命令输出。

总体而言,这个函数的作用是在 VSCode 中执行 Git 命令,并通过终端显示命令的执行结果。该函数假设 terminal 是一个在全局范围内定义的终端变量,并在需要时创建。

async function executeGitCommand(command, options) {if (!terminal){terminal = vscode.window.createTerminal(terminalOptions);}const pid = await terminal.processId;terminal.sendText(command);terminal.show();
}

创建终端的命令再后续执行git命令时需要用到。

git add .

注册gitAdd命令

async function activate(context) {vscode.commands.registerCommand('wxRead.gitAdd', () => {executeGitCommand('git add .', { name: 'Git Add' });})
}

command + shift +p 之后选择gitAdd

在这里插入图片描述
之后控制台就会出现下图:
在这里插入图片描述

git commit

  1. 命令注册:
    vscode.commands.registerCommand('wxRead.gitCommit', async () => {
    

使用 registerCommand 方法注册一个名为 'wxRead.gitCommit' 的命令。当用户执行这个命令时,将触发后面的回调函数。

  1. 创建输入框:

    const defaultCommitMessage = "Your default commit message here";
    const input = await vscode.window.createInputBox();
    input.prompt = "Enter your commit message";
    input.value = defaultCommitMessage;
    input.show();
    

    创建一个输入框,用于用户输入提交消息。设置输入框的提示信息为 "Enter your commit message",并将默认值设置为 "Your default commit message here"。最后,通过 input.show() 显示输入框。
    在这里插入图片描述

  2. 监听输入框的 Accept 事件:

    input.onDidAccept(() => {
    

    使用 onDidAccept 事件监听器,当用户按下确认键(Enter)时触发。

  3. 获取提交消息:

    const commitMessage = input.value;
    

    获取用户在输入框中输入的提交消息。

  4. 销毁输入框:

    input.dispose();
    

    在获取提交消息后,销毁输入框,以避免占用资源。

  5. 执行 Git Commit 命令:

    if (commitMessage) {const commitCommand = `git commit -m "${commitMessage}"`;executeGitCommand(commitCommand, { name: 'Git Commit' });
    }
    

    检查用户是否输入了提交消息,如果有则构建 git commit 命令,并调用 executeGitCommand 函数执行该命令。传递的第二个参数是一个对象,包含了执行命令的名称,这里设置为 'Git Commit'

完整代码如下:

vscode.commands.registerCommand('wxRead.gitCommit', async () => {const defaultCommitMessage = "Your default commit message here";const input = await vscode.window.createInputBox();input.prompt = "Enter your commit message";input.value = defaultCommitMessage;input.show();input.onDidAccept(() => {const commitMessage = input.value;input.dispose();if (commitMessage) {const commitCommand = `git commit -m "${commitMessage}"`;executeGitCommand(commitCommand, { name: 'Git Commit' });}});})

git clone

  1. 注册gitClone命令后,在扩展程序中 command + shift +p (我是mac)之后选择wxRead.gitClone
    在这里插入图片描述

  2. 弹出输入框获取 Git 仓库 URL

    vscode.window.showInputBox({ prompt: 'Enter Git repository URL' }).then((gitRepoUrl) => {
    

    这一部分代码使用 showInputBox 方法弹出一个输入框,提示用户输入 Git 仓库的 URL。一旦用户输入完成,该输入的内容将作为参数传递给 then 函数中的回调函数,并存储在 gitRepoUrl 变量中。这里输入我的开源项目:https://github.com/zbsguilai/kedaxunfei.git
    在这里插入图片描述

  3. 随后会出现一个弹框,会让你选择一个文件作为项目的目录

  4. 显示进度条并执行克隆操作:

    vscode.window.withProgress({location: vscode.ProgressLocation.Notification,title: 'Cloning Git Repository',cancellable: false
    }, async (progress, token) => {
    

    使用 withProgress 方法显示一个进度条,该进度条位于通知区域,标题为 ‘Cloning Git Repository’。这个进度条将在克隆操作期间显示。async (progress, token) => {...} 是一个异步函数,用于处理进度和取消操作。

  5. 检查 Git 仓库 URL 是否存在:

    if (gitRepoUrl) {
    

    确保用户提供了有效的 Git 仓库 URL。

  6. 弹出文件夹选择框:

    vscode.window.showOpenDialog({canSelectFolders: true,canSelectFiles: false,openLabel: 'Select Destination Folder'
    }).then((folders) => {
    

    使用 showOpenDialog 方法弹出一个文件夹选择框,允许用户选择目标文件夹。选定的文件夹将在 folders 变量中。

  7. 执行 Git Clone 操作:

    const gitCloneProcess = spawn('git', ['clone', gitRepoUrl, cloneDirectory]);
    

    使用 Node.js 的 spawn 方法创建一个子进程,执行 git clone 命令。gitRepoUrl 是用户输入的 Git 仓库 URL,cloneDirectory 是用户选择的目标文件夹。

  8. 处理 Git 命令输出:

    gitCloneProcess.stdout.on('data', (data) => {console.log(data.toString());
    });
    gitCloneProcess.stderr.on('data', (data) => {console.error(data.toString());
    });
    

    将 Git 命令的标准输出和标准错误输出打印到控制台,以便在调试时查看执行的详细信息。

  9. 处理 Git Clone 完成事件:

    gitCloneProcess.on('close', (code) => {console.log('Git clone process exited with code:', code);if (code === 0) {vscode.window.showInformationMessage('Git clone completed successfully.');} else {vscode.window.showErrorMessage('Git clone failed. Please check the URL and try again.');}
    });
    

    当 Git Clone 进程完成时,检查其退出码。如果退出码为 0,显示成功消息;否则,显示错误消息。

完整代码如下:

 vscode.commands.registerCommand('wxRead.gitClone', () => {// 弹出输入框以获取用户提供的 Git 仓库 URLvscode.window.showInputBox({ prompt: 'Enter Git repository URL' }).then((gitRepoUrl) => {vscode.window.withProgress({location: vscode.ProgressLocation.Notification,title: 'Cloning Git Repository',cancellable: false}, async (progress, token) => {if (gitRepoUrl) {if (gitRepoUrl) {// 使用 QuickPick 来让用户选择目标文件夹vscode.window.showOpenDialog({canSelectFolders: true,canSelectFiles: false,openLabel: 'Select Destination Folder'}).then((folders) => {if (folders && folders[0]) {const cloneDirectory = folders[0].fsPath;// 执行 git clone 命令,将代码克隆到选定的目录const gitCloneProcess = spawn('git', ['clone', gitRepoUrl, cloneDirectory]);// 处理 Git 命令的输出gitCloneProcess.stdout.on('data', (data) => {console.log(data.toString());});gitCloneProcess.stderr.on('data', (data) => {console.error(data.toString());});gitCloneProcess.on('close', (code) => {console.log('Git clone process exited with code:', code); // 添加这行用于调试if (code === 0) {vscode.window.showInformationMessage('Git clone completed successfully.');}else {vscode.window.showErrorMessage('Git clone failed. Please check the URL and try again.');}});}});}}});});}));

git push

注册wxRead.gitPush命令,在扩展程序中 command + shift +p (我是mac)之后选择wxRead.gitPush

 vscode.commands.registerCommand('wxRead.gitPush', () => {executeGitCommand('git push', { name: 'Git Push' });})

好书推荐

TypeScript+React Web应用开发实战 :京东直达

本书适应于当今前端开发的流行趋势,注重理论与实战相结合的思想,配合大量的、基础且实用的代码实例,帮助读者学习基于TypeScript语言规范的React框架开发的相关知识。全书内容通俗易懂、覆盖面广、充分翔实、重点突出,涵盖了TypeScript语言规范和React框架开发的方方面面。

全书内容共10章,TypeScript语言部分包括TypeScript语言基础与开发环境的搭建、TypeScript项目开发与配置、TypeScript语法规范和TypeScript语法高级特性等方面的内容;React框架部分包括React框架基础与开发环境的搭建,React语法、组件、状态与生命周期,React框架高级指引和React Hook新特性等方面的内容。同时,为了突出本书项目实战的特点,针对性地开发了两个Web项目应用,以帮助读者深入学习基于TypeScript + React技术的开发流程。

本书是学习基于TypeScript + React技术开发的实战图书,全书内容简明、代码精练、实例丰富。希望本书的内容能够帮助前端开发的初学者快速入门,尽快提高Web应用程序开发的技术水平。

在这里插入图片描述

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处:http://www.mzph.cn/news/739455.shtml

如若内容造成侵权/违法违规/事实不符,请联系多彩编程网进行投诉反馈email:809451989@qq.com,一经查实,立即删除!

相关文章

什么是VR虚拟现实体验店|VR主题馆加盟|元宇宙文化旅游

VR虚拟现实体验店是一种提供虚拟现实技术体验的场所。在这样的店铺里,顾客可以通过专业的设备和技术,体验虚拟现实技术带来的沉浸式感觉。 通常,这些商店提供一系列VR体验,包括互动游戏、沉浸式模拟、虚拟旅游和其他VR内容。客户可…

【linux】02 :Linux基础命令

1.掌握linux系统的目录结构 linux只有一个顶级目录,称之为:根目录。 windows系统有多个顶级目录,即各个盘符。 2.linux路径的描述方式 /在Linux中的表示:出现在开头表示根目录,出现在后面表示层级关系。 3.什么是命…

Early if-conversion - 优化阅读笔记

Early if-conversion 用于对于没有很多可预测指令的乱序CPU。目标是消除可能误预测的条件分支。 来自分支两侧的指令都会被推测性地执行,并使用 cmov 指令选择结果。 // SSAIfConv 类在确定可能的情况下,对SSA形式的机器码执行if-conversion。该类不包…

揭秘建筑类中级职称申报:是否能越过初级直接评审?

揭秘建筑类中级职称申报:是否能越过初级直接评审? 很多人想知道越过初级直接评审建筑类中级职称可以不? 关于越过初级职称/助理工程师直接申报建筑类中级职称,原则上是不行的,实际上分情况而定。如果你有二级建造师也…

前端页面兼容pc和手机端设置,等比例缩小

html页面 <meta name"viewport" content"widthdevice-width, initial-scale0, user-scalableyes,shrink-to-fitno">vue 在public里面的index.html里面设置 <meta name"viewport" content"widthdevice-width,initial-scale1.0,use…

linux ,Windows部署

Linux部署 准备好虚拟机 连接好查看版本&#xff1a;java -version安装jdk 解压命令&#xff1a;tar -zxvf 加jdk的压缩文件名cd /etc 在编辑vim profile文件 在最底下写入&#xff1a; export JAVA_HOME/root/soft/jdk1.8.0_151&#xff08;跟自己的jdk保持一致&#xff0…

SpringSecurity 快速入门

文章目录 1. 认证授权概述1.1 认证授权概念1.1.1 认证1.1.2 授权 1.2 权限数据模型1.3 RBAC权限模型1.3.1 介绍1.3.2 基于角色访问控制1.3.3 基于资源访问控制 1.4 常见认证方式1.4.1 Cookie-Session1.4.2 jwt令牌无状态认证 1.5 技术实现 2. SpringSecurity入门2.1 介绍2.2 入…

「CISP题库精讲」CISP题库习题解析精讲20道

前言 本篇主要对CISP教材第九章《计算环境安全》的一些习题进行讲解&#xff0c;包括20道题&#xff0c;这里只是部分习题&#xff0c;针对第九章可能会多写几章的内容&#xff0c;如果我发布的这些习题里面没有你想找的那道题&#xff0c;你也可以直接私信我&#xff0c;我加…

求根节点到叶节点数字之和

题目链接 求根节点到叶节点数字之和 题目描述 注意点 树中节点的数目在范围 [1, 1000] 内0 < Node.val < 9树的深度不超过10 解答思路 深度优先遍历计算从根节点到叶子节点组成的所有数字&#xff08;每向下一层乘以10&#xff09;&#xff0c;再计算所有的数字之和…

中小型生产企业工业数据采集分析平台 规划生产流程

工业数据采集分析平台是一款优秀的工控自动化软件&#xff0c;可以用于数据采集、实时监测和过程控制、数据传输、系统联动、远程监控等多种应用&#xff0c;数据采集平台通过对设备运行状态及相关参数监视实现保证每个环节都能按照既定方案进行&#xff0c;同时缩短非正常停机…

shiro整合thymeleaf(接上一篇抛出的问题)

在上一篇末尾&#xff0c;讲到如何实现不同身份的用户&#xff0c;有不同的权限&#xff0c;从而看到不同的页面&#xff0c;下面我们就来实现下这个功能 1.导入依赖 <!--shiro整合thymeleaf--><dependency><groupId>com.github.theborakompanioni</group…

python(ogr)处理geojson为本地shp文件

前言 本次所利用的geojson数据来自https://geo.datav.aliyun.com/areas_v3/bound/410000_full.json &#xff0c;如果觉得下方代码看起来不方便&#xff0c;可以来GitHub上来看&#xff0c;在这上面还有一些辅助内容便于理解 GISpjd/GIS-union-Python (github.com)https://gi…

14.WEB渗透测试--Kali Linux(二)

免责声明&#xff1a;内容仅供学习参考&#xff0c;请合法利用知识&#xff0c;禁止进行违法犯罪活动&#xff01; 内容参考于&#xff1a; 易锦网校会员专享课 上一个内容&#xff1a;13.WEB渗透测试--Kali Linux&#xff08;一&#xff09;-CSDN博客 netcat简介内容:13.WE…

精品基于Springboot的体育用品租赁租用管理系统的设计与实现

《[含文档PPT源码等]精品基于Springboot的体育用品管理系统的设计与实现[包运行成功]》该项目含有源码、文档、PPT、配套开发软件、软件安装教程、项目发布教程、包运行成功&#xff01; 软件开发环境及开发工具&#xff1a; Java——涉及技术&#xff1a; 前端使用技术&…

【Kotlin】类和对象

1 前言 Kotlin 是面向对象编程语言&#xff0c;与 Java 语言类似&#xff0c;都有类、对象、属性、构造函数、成员函数&#xff0c;都有封装、继承、多态三大特性&#xff0c;不同点如下。 Java 有静态&#xff08;static&#xff09;代码块&#xff0c;Kotlin 没有&#xff1…

Spring AOP常见面试题

目录 一、对于AOP的理解 二、Spring是如何实现AOP的 1、execution表达式 2、annotation 3、基于Spring API&#xff0c;通过xml配置的方式。 4、基于代理实现 三、Spring AOP的实现原理 四、Spring是如何选择使用哪种动态代理 1、Spring Framework 2、Spring Boot 五…

博士推荐 | 纤维与聚合物科学博士,功能性纺织品研发主管

编辑 / 木子 审核 / 朝阳 伟骅英才 伟骅英才致力于以大数据、区块链、AI人工智能等前沿技术打造开放的人力资本生态&#xff0c;用科技解决职业领域问题&#xff0c;提升行业数字化服务水平&#xff0c;提供创新型的产业与人才一体化服务的人力资源解决方案和示范平台&#x…

二分查找【详解】

本期介绍&#x1f356; 主要介绍&#xff1a;二分查找的简单思路&#xff0c;为什么必须在有序的前提下才能使用二分查找&#xff0c;该怎么用C程序来实现二分查找&#xff0c;二分查找的局限性&#x1f440;。 文章目录 1. 题目2. 思路3. 前提条件4. 编写程序 1. 题目 在一个有…

【动态规划】代码随想录算法训练营第四十六天 |139.单词拆分,关于多重背包,你该了解这些! ,背包问题总结篇!(待补充)

139.单词拆分 1、题目链接&#xff1a;. - 力扣&#xff08;LeetCode&#xff09; 2、文章讲解&#xff1a;代码随想录 3、题目&#xff1a; 给定一个非空字符串 s 和一个包含非空单词的列表 wordDict&#xff0c;判定 s 是否可以被空格拆分为一个或多个在字典中出现的单词…

3分钟彻底搞懂Web UI自动化测试之【POM设计模式】

为什么要用POM设计模式 前期&#xff0c;我们学会了使用PythonSelenium编写Web UI自动化测试线性脚本 线性脚本&#xff08;以快递100网站登录举例&#xff09;&#xff1a; import time from selenium import webdriver from selenium.webdriver.common.by import By dri…