?

大廠技術??高級前端??Node進階

點擊上方?程序員成長指北，關注公眾號

回復1，加入高級Node交流群

📖「閱讀須知，閱讀本文你將學會以下知識：」

「1. 明白VS Code 任務系統(tǒng)是什么？」
「2. 按步驟學會一步步配置一些簡易而實用的VS Code任務」

?

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

?

利用任務，可以有多便捷？

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

$ git stash push -u -m xxx (將當前未提交的內容存儲)

$ git pull base --rebase (從主倉庫變基拉取代碼)

$ git push origin --force (向個人倉庫推送)

$ git stash pop (彈出之前存儲的內容)

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

按下一個快捷鍵。

連點兩下回車鍵。

如下：
接下來VS Code竟自行完成了以上四個步驟！

Inkedtask2_LI.jpg

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

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

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

?

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

?

官方地址：# VS Code 任務
關鍵詞解讀：

目標：運行腳本、啟動程序；
任務系統(tǒng)的終極目標，是去執(zhí)行一些你期望執(zhí)行的腳本或執(zhí)行程序。以本文開始時的例子為例，執(zhí)行git 命令便是執(zhí)行腳本了。

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

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

動手一：配置一個最簡單的git-fetch任務

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

vscode1.png

在tasks.json內輸入如下內容：

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

設置「熱鍵」

在VS Code中打開： 文件-首選項-鍵盤快捷方式，或者同時按下：Ctrl K S三個按鍵。 此時你的VS Code會進入熱鍵設置頁面，在搜索欄搜索workbench.action.tasks.runTask或者任務: 運行任務,選中,并設置一個你習慣的組合式快捷鍵。

?

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

?

調用「任務」

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

?

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

?

選中任務，按下回車。

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

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

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

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

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

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

在上面2.1的例子里的inputs中加入一項：

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

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

tasks.pngtasks02.png

動手三：復合式任務，完成任務的排列組合

雖然上面完成了一些簡單的任務配置，但當我們需要去完成「一系列」小任務時，就會顯得非?！覆环奖恪?。

?

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

?

在之前步驟的基礎上，在配置文件的tasks中增加兩項任務：

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

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

控制臺內，已經(jīng)依次執(zhí)行了git-pull和git-push兩個任務。

xingye2.gif

更多能力

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

總結

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

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

總結

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

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