?

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

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

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

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

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

?

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

?

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

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

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

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

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

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

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

按下一個快捷鍵。

連點兩下回車鍵。

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

Inkedtask2_LI.jpg

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

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

什么是VS Code任務系統？

?

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

?

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

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

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

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

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

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

vscode1.png

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

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

設置「熱鍵」

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

?

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

?

調用「任務」

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

?

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

?

選中任務，按下回車。

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

1. 在任務執行時選擇分支

上面，我們已經成功設置了最簡單的一任務，可以用來執行一些冗余的命令行，比如：
git pull base dev --rebase
但缺乏動態參數，也主動了它的使用場景不夠靈活。
以上面這條git pull base dev --rebase為例，如果你的項目有多個分支，而你需要用命令在多個分支之間切換的話，"分別給dev和release分支創建任務"可實在是個太笨的辦法了。
此時，如果有一個下拉框，讓我們選擇分支名，該多好啊...
嘿！
「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", // 輸入參數的id，與上面變量${input:branch}這個branch保持一致"type": "pickString","options": ["dev","release"],"description": "請輸入分支"}], }

執行'git-pull'任務，你會發現VS Code頂部彈出如下對話框：

2. 在任務執行時輸入參數

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

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

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

tasks.pngtasks02.png

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

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

正如文章開頭的例子，依次完成了 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", // 代表是依次執行，不設置會并行執行"problemMatcher": []}

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

控制臺內，已經依次執行了git-pull和git-push兩個任務。

xingye2.gif

更多能力

更多細節，還請參考官方網站：
官網地址

總結

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

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

總結

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

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