Visual Studio Code Tasks 快速上手篇


建立時間: 2023年4月3日 16:44
更新時間: 2023年4月4日 01:34

說明

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"
    }
  ]
}

結論

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

參考

觀看次數: 1319
codestudiotasktasksvisual
按讚追蹤 Enjoy 軟體 Facebook 粉絲專頁
每週分享資訊技術

一杯咖啡的力量,勝過千言萬語的感謝。

支持我一杯咖啡,讓我繼續創作優質內容,與您分享更多知識與樂趣!