?

大廠技術(shù)??高級(jí)前端??Node進(jìn)階

點(diǎn)擊上方?程序員成長(zhǎng)指北，關(guān)注公眾號(hào)

回復(fù)1，加入高級(jí)Node交流群

📖「閱讀須知，閱讀本文你將學(xué)會(huì)以下知識(shí)：」

「1. 明白VS Code 任務(wù)系統(tǒng)是什么？」
「2. 按步驟學(xué)會(huì)一步步配置一些簡(jiǎn)易而實(shí)用的VS Code任務(wù)」

?

在不知道VSCode任務(wù)系統(tǒng)的人看來(lái)，它就像是「魔法」一樣！

?

利用任務(wù)，可以有多便捷？

「背景：」 我司的代碼合入采用的是 從主倉(cāng)庫(kù)fork => 從個(gè)人倉(cāng)庫(kù)提Merge Request這種github經(jīng)典模式。
「日常：」 因此我司員工經(jīng)常需要依次執(zhí)行以下4條指令或者在VSCode源代碼管理中依次執(zhí)行以下四個(gè)操作：

$ git stash push -u -m xxx (將當(dāng)前未提交的內(nèi)容存儲(chǔ))

$ git pull base --rebase (從主倉(cāng)庫(kù)變基拉取代碼)

$ git push origin --force (向個(gè)人倉(cāng)庫(kù)推送)

$ git stash pop (彈出之前存儲(chǔ)的內(nèi)容)

「魔法：」 熟悉VS Code任務(wù)系統(tǒng)的我，在執(zhí)行以上內(nèi)容時(shí)，只需要兩步：

按下一個(gè)快捷鍵。

連點(diǎn)兩下回車鍵。

如下：
接下來(lái)VS Code竟自行完成了以上四個(gè)步驟！

Inkedtask2_LI.jpg

這不僅能讓我把上面這種耗時(shí)的日常操作濃縮到「不到兩秒」的操作中，還讓能不經(jīng)意間在同事面前展示一下那神秘的極客范。

「那么？VS Code 任務(wù)系統(tǒng)到底是什么？它能做什么？我們要怎么使用它呢？」

什么是VS Code任務(wù)系統(tǒng)？

?

VS Code 任務(wù)系統(tǒng)支持用戶通過(guò)可視化界面、熱鍵來(lái)觸發(fā)運(yùn)行腳本或啟動(dòng)程序的效果。它的行為是通過(guò)配置來(lái)定義的。

?

官方地址：# VS Code 任務(wù)
關(guān)鍵詞解讀：

目標(biāo)：運(yùn)行腳本、啟動(dòng)程序；
任務(wù)系統(tǒng)的終極目標(biāo)，是去執(zhí)行一些你期望執(zhí)行的腳本或執(zhí)行程序。以本文開始時(shí)的例子為例，執(zhí)行g(shù)it 命令便是執(zhí)行腳本了。

觸發(fā)方式：可視化界面、熱鍵；
你可以通過(guò)快捷鍵喚出任務(wù)列表進(jìn)行選擇，或者直接執(zhí)行你設(shè)置了熱鍵的任務(wù)。

定義方式：配置；
JSON格式。

動(dòng)手一：配置一個(gè)最簡(jiǎn)單的git-fetch任務(wù)

在項(xiàng)目根目錄下創(chuàng)建一個(gè).vscode文件夾，并創(chuàng)建一個(gè).vscode/tasks.json文件。

vscode1.png

在tasks.json內(nèi)輸入如下內(nèi)容：

{"version": "2.0.0","tasks": [{// 任務(wù)的名稱"label": "git-fetch",// 任務(wù)類別，shell代表腳本"type": "shell",// 任務(wù)腳本，可以是yarn/npm/git 等"command": "git",// 命令參數(shù)"args": ["fetch"],// 聲明無(wú)需掃描腳本輸出"problemMatcher": []}] }

設(shè)置「熱鍵」

在VS Code中打開： 文件-首選項(xiàng)-鍵盤快捷方式，或者同時(shí)按下：Ctrl K S三個(gè)按鍵。 此時(shí)你的VS Code會(huì)進(jìn)入熱鍵設(shè)置頁(yè)面，在搜索欄搜索workbench.action.tasks.runTask或者任務(wù): 運(yùn)行任務(wù),選中,并設(shè)置一個(gè)你習(xí)慣的組合式快捷鍵。

?

比如我，設(shè)置的快捷鍵是：Ctrl + Alt + R

?

調(diào)用「任務(wù)」

使用你剛才定義的快捷鍵，如：Ctrl + Alt + R，你可以看到所有的任務(wù)列表，就包含你剛定義的內(nèi)容，輸入git-fetch，就能顯示你剛才定義的任務(wù)。

?

放心，只有第一次你需要輸入任務(wù)名搜索，后續(xù)它都會(huì)推薦你最近使用過(guò)的任務(wù)。

?

選中任務(wù)，按下回車。

動(dòng)手二：配置帶參數(shù)選擇或輸入的任務(wù)

1. 在任務(wù)執(zhí)行時(shí)選擇分支

上面，我們已經(jīng)成功設(shè)置了最簡(jiǎn)單的一任務(wù)，可以用來(lái)執(zhí)行一些冗余的命令行，比如：
git pull base dev --rebase
但缺乏動(dòng)態(tài)參數(shù)，也主動(dòng)了它的使用場(chǎng)景不夠靈活。
以上面這條git pull base dev --rebase為例，如果你的項(xiàng)目有多個(gè)分支，而你需要用命令在多個(gè)分支之間切換的話，"分別給dev和release分支創(chuàng)建任務(wù)"可實(shí)在是個(gè)太笨的辦法了。
此時(shí)，如果有一個(gè)下拉框，讓我們選擇分支名，該多好啊...
嘿！
「VS Code任務(wù)」剛好有這方面的能力。
把你剛才的tasks.json做一下調(diào)整，如下：

{"version": "2.0.0","tasks": [{"label": "git-pull","type": "shell","command": "git","args": ["pull","base","${input:branch}", // 變量，會(huì)在下面的inputs中搜尋名叫branch的id"--rebase"],"group": "build","problemMatcher": []},],"inputs": [{"id": "branch", // 輸入?yún)?shù)的id，與上面變量${input:branch}這個(gè)branch保持一致"type": "pickString","options": ["dev","release"],"description": "請(qǐng)輸入分支"}], }

執(zhí)行'git-pull'任務(wù)，你會(huì)發(fā)現(xiàn)VS Code頂部彈出如下對(duì)話框：

2. 在任務(wù)執(zhí)行時(shí)輸入?yún)?shù)

在上面2.1的例子里的inputs中加入一項(xiàng)：

{"type": "promptString","id": "branchName","description": "input your branch name","default": "release"}

并且，將tasks里，代表變量的那一行"${input:branch}"，改成"${input:branchName}"。
運(yùn)行任務(wù)：

tasks.pngtasks02.png

動(dòng)手三：復(fù)合式任務(wù)，完成任務(wù)的排列組合

雖然上面完成了一些簡(jiǎn)單的任務(wù)配置，但當(dāng)我們需要去完成「一系列」小任務(wù)時(shí)，就會(huì)顯得非常「不方便」。

?

正如文章開頭的例子，依次完成了 stash push => pull => stash pop => push四個(gè)操作。

?

在之前步驟的基礎(chǔ)上，在配置文件的tasks中增加兩項(xiàng)任務(wù)：

tasks: [ ...，{"label": "git-push","type": "shell","command": "git","args": ["pull","origin","${input:branchName}", // 變量],"problemMatcher": []}，{"label": "git-pull-push","type": "shell","dependsOn": [ // 依賴的任務(wù)"git-pull","git-push"],"dependsOrder": "sequence", // 代表是依次執(zhí)行，不設(shè)置會(huì)并行執(zhí)行"problemMatcher": []}

配置完成后，在任務(wù)中選中：git-pull-push并執(zhí)行。
在收入分支名時(shí)直接按下回車，使用默認(rèn)的release作為分支名。

控制臺(tái)內(nèi)，已經(jīng)依次執(zhí)行了git-pull和git-push兩個(gè)任務(wù)。

xingye2.gif

更多能力

更多細(xì)節(jié)，還請(qǐng)參考官方網(wǎng)站：
官網(wǎng)地址

總結(jié)

通過(guò)以上例子，我們可以一窺「VS Code任務(wù)系統(tǒng)」的一角，感受到VS Code在「私人訂制」上的巨大潛力。
可以進(jìn)行一些暢享，通過(guò)「任務(wù)系統(tǒng)」配合「代碼生成腳本」完成半自動(dòng)的開發(fā)等等~~
「快去配置你的VS Code任務(wù)配置吧！」

Node 社群我組建了一個(gè)氛圍特別好的 Node.js 社群，里面有很多 Node.js小伙伴，如果你對(duì)Node.js學(xué)習(xí)感興趣的話（后續(xù)有計(jì)劃也可以），我們可以一起進(jìn)行Node.js相關(guān)的交流、學(xué)習(xí)、共建。下方加 考拉 好友回復(fù)「Node」即可。如果你覺得這篇內(nèi)容對(duì)你有幫助，我想請(qǐng)你幫我2個(gè)小忙：1. 點(diǎn)個(gè)「在看」，讓更多人也能看到這篇文章2. 訂閱官方博客?www.inode.club?讓我們一起成長(zhǎng)點(diǎn)贊和在看就是最大的支持

總結(jié)

以上是生活随笔為你收集整理的手把手学会 VS Code 快捷任务神技，成为项目组最靓的崽！的全部?jī)?nèi)容，希望文章能夠幫你解決所遇到的問(wèn)題。

如果覺得生活随笔網(wǎng)站內(nèi)容還不錯(cuò)，歡迎將生活随笔推薦給好友。