?? 個(gè)人主頁(yè)：不叫貓先生，公眾號(hào)：前端舵手
???♂? 作者簡(jiǎn)介：前端領(lǐng)域優(yōu)質(zhì)作者、阿里云專家博主，共同學(xué)習(xí)共同進(jìn)步，一起加油呀！
?優(yōu)質(zhì)專欄：VS Code插件開發(fā)極速入門
?? 資料領(lǐng)取：前端進(jìn)階資料可以找我免費(fèi)領(lǐng)取
我們通常會(huì)通過小烏龜、SourceTree、終端等實(shí)現(xiàn) git 的相關(guān)操作，VS Code 開發(fā)工具也提供了 git 相關(guān)的操作 ，那么在VS Code中如何通過自定義命令實(shí)現(xiàn) git 的相關(guān)操作？本文主要介紹了git clone、git add、 git commit 、git push等命令的實(shí)現(xiàn)。
創(chuàng)建終端
-
異步函數(shù)聲明:
async function executeGitCommand(command, options) {用于執(zhí)行 Git 命令。
command參數(shù)表示要執(zhí)行的 Git 命令字符串，options參數(shù)是一個(gè)對(duì)象，包含了執(zhí)行命令的選項(xiàng)。 -
檢查終端是否存在:
if (!terminal){ terminal = vscode.window.createTerminal(terminalOptions); }檢查全局變量
terminal是否存在，如果不存在則創(chuàng)建一個(gè)新的終端。vscode.window.createTerminal方法用于創(chuàng)建一個(gè)終端，terminalOptions可能是在代碼的其他地方定義的終端選項(xiàng)。 -
獲取終端進(jìn)程 ID:
const pid = await terminal.processId;使用
await關(guān)鍵字獲取終端的進(jìn)程 ID。這樣可以在需要時(shí)使用進(jìn)程 ID 進(jìn)行其他操作，例如監(jiān)控或結(jié)束進(jìn)程。 -
發(fā)送 Git 命令到終端:
terminal.sendText(command);使用
terminal.sendText方法將 Git 命令發(fā)送到終端。這使得可以通過代碼自動(dòng)執(zhí)行一系列 Git 命令。 -
顯示終端:
terminal.show();最后，使用
terminal.show方法顯示終端。這確保用戶可以看到終端中執(zhí)行的命令輸出。
總體而言，這個(gè)函數(shù)的作用是在 VSCode 中執(zhí)行 Git 命令，并通過終端顯示命令的執(zhí)行結(jié)果。該函數(shù)假設(shè) terminal 是一個(gè)在全局范圍內(nèi)定義的終端變量，并在需要時(shí)創(chuàng)建。
async function executeGitCommand(command, options) {
if (!terminal){
terminal = vscode.window.createTerminal(terminalOptions);
}
const pid = await terminal.processId;
terminal.sendText(command);
terminal.show();
}
創(chuàng)建終端的命令再后續(xù)執(zhí)行g(shù)it命令時(shí)需要用到。
git add .
注冊(cè)gitAdd命令
async function activate(context) {
vscode.commands.registerCommand('wxRead.gitAdd', () => {
executeGitCommand('git add .', { name: 'Git Add' });
})
}
command + shift +p 之后選擇gitAdd
之后控制臺(tái)就會(huì)出現(xiàn)下圖：
git commit
-
命令注冊(cè):
vscode.commands.registerCommand('wxRead.gitCommit', async () => {
使用 registerCommand 方法注冊(cè)一個(gè)名為 'wxRead.gitCommit' 的命令。當(dāng)用戶執(zhí)行這個(gè)命令時(shí)，將觸發(fā)后面的回調(diào)函數(shù)。
-
創(chuàng)建輸入框:
const defaultCommitMessage = "Your default commit message here"; const input = await vscode.window.createInputBox(); input.prompt = "Enter your commit message"; input.value = defaultCommitMessage; input.show();創(chuàng)建一個(gè)輸入框，用于用戶輸入提交消息。設(shè)置輸入框的提示信息為
"Enter your commit message"，并將默認(rèn)值設(shè)置為"Your default commit message here"。最后，通過input.show()顯示輸入框。
-
監(jiān)聽輸入框的 Accept 事件:
input.onDidAccept(() => {使用
onDidAccept事件監(jiān)聽器，當(dāng)用戶按下確認(rèn)鍵（Enter）時(shí)觸發(fā)。 -
獲取提交消息:
const commitMessage = input.value;獲取用戶在輸入框中輸入的提交消息。
-
銷毀輸入框:
input.dispose();在獲取提交消息后，銷毀輸入框，以避免占用資源。
-
執(zhí)行 Git Commit 命令:
if (commitMessage) { const commitCommand = `git commit -m "${commitMessage}"`; executeGitCommand(commitCommand, { name: 'Git Commit' }); }檢查用戶是否輸入了提交消息，如果有則構(gòu)建
git commit命令，并調(diào)用executeGitCommand函數(shù)執(zhí)行該命令。傳遞的第二個(gè)參數(shù)是一個(gè)對(duì)象，包含了執(zhí)行命令的名稱，這里設(shè)置為'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
-
注冊(cè)
gitClone命令后，在擴(kuò)展程序中command + shift +p（我是mac）之后選擇wxRead.gitClone
-
彈出輸入框獲取 Git 倉(cāng)庫(kù) URL
vscode.window.showInputBox({ prompt: 'Enter Git repository URL' }).then((gitRepoUrl) => {這一部分代碼使用
showInputBox方法彈出一個(gè)輸入框，提示用戶輸入 Git 倉(cāng)庫(kù)的 URL。一旦用戶輸入完成，該輸入的內(nèi)容將作為參數(shù)傳遞給then函數(shù)中的回調(diào)函數(shù)，并存儲(chǔ)在gitRepoUrl變量中。這里輸入我的開源項(xiàng)目：https://github.com/zbsguilai/kedaxunfei.git
-
隨后會(huì)出現(xiàn)一個(gè)彈框，會(huì)讓你選擇一個(gè)文件作為項(xiàng)目的目錄
-
顯示進(jìn)度條并執(zhí)行克隆操作:
vscode.window.withProgress({ location: vscode.ProgressLocation.Notification, title: 'Cloning Git Repository', cancellable: false }, async (progress, token) => {使用
withProgress方法顯示一個(gè)進(jìn)度條，該進(jìn)度條位于通知區(qū)域，標(biāo)題為 ‘Cloning Git Repository’。這個(gè)進(jìn)度條將在克隆操作期間顯示。async (progress, token) => {...}是一個(gè)異步函數(shù)，用于處理進(jìn)度和取消操作。 -
檢查 Git 倉(cāng)庫(kù) URL 是否存在:
if (gitRepoUrl) {確保用戶提供了有效的 Git 倉(cāng)庫(kù) URL。
-
彈出文件夾選擇框:
vscode.window.showOpenDialog({ canSelectFolders: true, canSelectFiles: false, openLabel: 'Select Destination Folder' }).then((folders) => {使用
showOpenDialog方法彈出一個(gè)文件夾選擇框，允許用戶選擇目標(biāo)文件夾。選定的文件夾將在folders變量中。 -
執(zhí)行 Git Clone 操作:
const gitCloneProcess = spawn('git', ['clone', gitRepoUrl, cloneDirectory]);使用 Node.js 的
spawn方法創(chuàng)建一個(gè)子進(jìn)程，執(zhí)行git clone命令。gitRepoUrl是用戶輸入的 Git 倉(cāng)庫(kù) URL，cloneDirectory是用戶選擇的目標(biāo)文件夾。 -
處理 Git 命令輸出:
gitCloneProcess.stdout.on('data', (data) => { console.log(data.toString()); }); gitCloneProcess.stderr.on('data', (data) => { console.error(data.toString()); });將 Git 命令的標(biāo)準(zhǔn)輸出和標(biāo)準(zhǔn)錯(cuò)誤輸出打印到控制臺(tái)，以便在調(diào)試時(shí)查看執(zhí)行的詳細(xì)信息。
-
處理 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.'); } });當(dāng) Git Clone 進(jìn)程完成時(shí)，檢查其退出碼。如果退出碼為 0，顯示成功消息；否則，顯示錯(cuò)誤消息。
完整代碼如下：
vscode.commands.registerCommand('wxRead.gitClone', () => {
// 彈出輸入框以獲取用戶提供的 Git 倉(cāng)庫(kù) URL
vscode.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 來(lái)讓用戶選擇目標(biāo)文件夾
vscode.window.showOpenDialog({
canSelectFolders: true,
canSelectFiles: false,
openLabel: 'Select Destination Folder'
}).then((folders) => {
if (folders && folders[0]) {
const cloneDirectory = folders[0].fsPath;
// 執(zhí)行 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); // 添加這行用于調(diào)試
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
注冊(cè)wxRead.gitPush命令，在擴(kuò)展程序中 command + shift +p （我是mac）之后選擇wxRead.gitPush
vscode.commands.registerCommand('wxRead.gitPush', () => {
executeGitCommand('git push', { name: 'Git Push' });
})
好書推薦
TypeScript+React Web應(yīng)用開發(fā)實(shí)戰(zhàn) ：京東直達(dá)
本書適應(yīng)于當(dāng)今前端開發(fā)的流行趨勢(shì)，注重理論與實(shí)戰(zhàn)相結(jié)合的思想，配合大量的、基礎(chǔ)且實(shí)用的代碼實(shí)例，幫助讀者學(xué)習(xí)基于TypeScript語(yǔ)言規(guī)范的React框架開發(fā)的相關(guān)知識(shí)。全書內(nèi)容通俗易懂、覆蓋面廣、充分翔實(shí)、重點(diǎn)突出，涵蓋了TypeScript語(yǔ)言規(guī)范和React框架開發(fā)的方方面面。
全書內(nèi)容共10章，TypeScript語(yǔ)言部分包括TypeScript語(yǔ)言基礎(chǔ)與開發(fā)環(huán)境的搭建、TypeScript項(xiàng)目開發(fā)與配置、TypeScript語(yǔ)法規(guī)范和TypeScript語(yǔ)法高級(jí)特性等方面的內(nèi)容；React框架部分包括React框架基礎(chǔ)與開發(fā)環(huán)境的搭建，React語(yǔ)法、組件、狀態(tài)與生命周期，React框架高級(jí)指引和React Hook新特性等方面的內(nèi)容。同時(shí)，為了突出本書項(xiàng)目實(shí)戰(zhàn)的特點(diǎn)，針對(duì)性地開發(fā)了兩個(gè)Web項(xiàng)目應(yīng)用，以幫助讀者深入學(xué)習(xí)基于TypeScript + React技術(shù)的開發(fā)流程。
本書是學(xué)習(xí)基于TypeScript + React技術(shù)開發(fā)的實(shí)戰(zhàn)圖書，全書內(nèi)容簡(jiǎn)明、代碼精練、實(shí)例豐富。希望本書的內(nèi)容能夠幫助前端開發(fā)的初學(xué)者快速入門，盡快提高Web應(yīng)用程序開發(fā)的技術(shù)水平。文章來(lái)源：http://www.zghlxwxcb.cn/news/detail-839649.html
文章來(lái)源地址http://www.zghlxwxcb.cn/news/detail-839649.html
到了這里，關(guān)于【VS Code插件開發(fā)】自定義指令實(shí)現(xiàn) git 命令 （九）的文章就介紹完了。如果您還想了解更多內(nèi)容，請(qǐng)?jiān)谟疑辖撬阉鱐OY模板網(wǎng)以前的文章或繼續(xù)瀏覽下面的相關(guān)文章，希望大家以后多多支持TOY模板網(wǎng)！
