Visual Studio Code Tasks 快速上手篇

說明

Visual Studio Code tasks，後面稱任務是一個功能強大的工具，它允許你定義和運行特定的任務，例如編譯代碼、運行測試、啟動應用程序等，可以提高生產力，減少重複性任務的時間和精力。

本篇將分享比較常用的任務技巧，讓讀者可以快速上手。

因為任務水很深，所以我盡我所能把我已知的內容寫在這裡，若有任何錯誤或需補充的請再私訊 Enjoy 軟體 FB 官方粉絲專頁。

tasks.json 存放位置

tasks.json 可以存放在兩個地方

1. .vscode/tasks.json，影響範圍僅在此專案底下
2. 按 ⇧⌘P 顯示指令面板，輸入 Tasks: Open User Tasks，影響範圍是此使用者，代表所有專案都可以用

如果你是第一次開啟 User Tasks，它會提供四個選項，不知道要選哪個時，可以選 Others

shell 任務

這是最基本的 shell task，他會在終端輸出 Hello World，你可以在 .vscode/tasks.json 新增此任務來練習。

tasks.json

{
  "version": "2.0.0",
  "tasks": [
    {
      "command": "echo Hello World",
      "label": "Hello World",
      "problemMatcher": [],
      "type": "shell"
    }
  ]
}

• command: 指令
• label: 任務名稱，執行任務會顯示 label
• problemMatcher: 解析和處理執行過程中產生的問題，可以先忽略
• type: 任務類型

執行任務

按 ⇧⌘P 顯示指令面板，輸入 Tasks: Run Task，選擇任務名稱，如上一個範例，可以選擇 Hello World 這個任務練習。

執行 Visual Studio Code 內部 Command

Visual Studio Code 有很多 Command 可以按 ⌘K ⌘S 開啟快捷鍵表，第一欄就是 Command。

示範 View: Close All Editors

假設我要關閉所有的編輯器，我先在快捷鍵表搜尋 close all editors，找到後在那一列資料上按右鍵，選擇 Copy Command ID，就可以把指令複製下來，貼到 task 上面。

tasks.json

{
  "version": "2.0.0",
  "tasks": [
    {
      "command": "${command:workbench.action.closeAllEditors}",
      "label": "Close All Editors",
      "problemMatcher": []
    }
  ]
}

注意看 command 格式為 “${command:command id}”

同時執行多個任務

以下示範一次執行三任務，並且按照順序執行。

tasks.json

{
  "version": "2.0.0",
  "tasks": [
    // 執行指令範例
    {
      // 指令
      "command": "echo Clean",
      // 任務名稱
      "label": "SubCommand: Clean",
      // 問題匹配，忽略
      "problemMatcher": [],
      // 任務類型
      "type": "shell"
    },
    {
      "command": "echo Build",
      "label": "SubCommand: Build",
      "problemMatcher": [],
      "type": "shell"
    },
    {
      "command": "echo Deploy",
      "label": "SubCommand: Deploy",
      "problemMatcher": [],
      "type": "shell"
    },
    {
      // 執行三個任務
      "dependsOn": [
        "SubCommand: Clean",
        "SubCommand: Build",
        "SubCommand: Deploy"
      ],
      // 按照順序執行任務，而不是同時執行
      "dependsOrder": "sequence",
      "label": "MainCommand: Build All",
      "problemMatcher": []
    },
  ]
}

可以看到 dependsOn 是一個陣列，內含3筆 labels，執行 MainCommand: Build All 任務就會依序執行 dependsOn 內的所有任務。

當然你也可以只用一個任務，使用 && 連接所有的指令，就看個人需求而定。

自訂快捷鍵綁定任務

我的 Visual Studio Code 無法在 .vscode/keybindings.json 運作，原因不明，所以我會設定在 User keybindings.json。

首先打開 User keybindings.json

開啟方式有兩種，任選一種即可。

1. 按 ⇧⌘P 顯示指令面板，輸入 Preferences: Open Keyboard Shortcuts (JSON)
2. 按 ⌘K ⌘S 開啟快捷鍵表，點擊右上角 Open Keyboard Shortcuts (JSON) 按鈕

設定快捷鍵

keybindings.json

[
  {
    "key": "alt+d",
    "command": "workbench.action.tasks.runTask",
    "args": "MainCommand: Build All"
  }
]

• key: 設定快捷鍵
• command: 執行指令，上述範例是運行任務
• args: 參數帶入任務的 label 名稱

inputs 提示要求輸入參數

此範例為用 visual studio code 打開一個檔案，並且出現一個輸入框，要求使用者輸入檔名。

keybindings.json

{
  "version": "2.0.0",
  "tasks": [
    {
      "label": "Open File",
      "type": "shell",
      "command": "code",
      // 帶入 inputs id 為 fileName 的參考
      "args": ["${input:fileName}"],
      "problemMatcher": []
    }
  ],
  "inputs": [
    {
      "id": "fileName",
      // 提示輸入字串
      "type": "promptString",
      // 描述
      "description": "Enter a file name",
      // 預設值
      "default": "example.txt"
    }
  ]
}

結論

任務還有很多技巧可以探索，未來如果還有發現不錯的技巧也會在這裡更新。

參考

• Integrate with External Tools via Tasks