前言

程式開發的過程中，或多或少會有處理下列需求的經驗：

• compiler
  • TypeScript -> JavaScript
  • SASS/SCSS -> CSS
• linting
  • ESLint
  • TSLint
• packaging
• testing
• building systems
  • Make
  • Ant
  • Gulp
  • Jake
  • Rake
  • MSBuild

處理的方式不外乎是一行一行輸入指令，
VS Code 嘗試將需要輸入的指令收集起來，藉由 tasks.json 來實踐自動化處理的可能。

目前支援的環境

目前 vs code 有支援的自動化類型有：

• npm（by package.json.scripts）
• typescript（by tsconfig.json）
• MSBuild
• maven
• .NET Core

如果要使用其他類型的自動化腳步，方法有兩個：

• 自己手刻。
• 使用 extension 來補充。
  • 會在未來詳細介紹。

如何建立

建立的步驟如下：

• 按下 F1。
• 輸入 task。
• 選擇 Tasks: Configure Task。
  • 此時，系統會自動檢查當下可能會使用到的 task。
  • 
  • 這邊我選擇 npm : lint
• 系統會自動建立 tasks.json。

{
// 如需 tasks.json 格式的文件，
  // 請參閱 https://go.microsoft.com/fwlink/?LinkId=733558
  "version": "2.0.0",
  "tasks": [
    {
      "type": "npm",
      "script": "lint",
      "problemMatcher": []
    }
  ]
}

到此，完成建立 tasks.json。

如何啟動

啟動的步驟如下：

• 按下 F1。
• 輸入 task。
• 選擇 Tasks: Run Task。
• 選擇剛剛撰寫的選項。
• 啟動後，下方面板會顯示訊息。
  • 

接著來講一些特殊情況。

使用 shell

前提：尚未建立 tasks.json。

要建立 shell 專用的 tasks.json，步驟如下：

• 按下 F1。
• 輸入 task。
• 選擇 Tasks: Configure Task。
• 直接拉到選單最下方，選擇 從範本建立 tasks.json 檔案。
  • 
• 選擇 Others。
  • 
• 系統會自動建立 shell 專用的 tasks.json。

{
  // See https://go.microsoft.com/fwlink/?LinkId=733558
  // for the documentation about the tasks.json format
  "version": "2.0.0",
  "tasks": [
    {
      "label": "echo",
      "type": "shell",
      "command": "echo Hello"
    }
  ]
}

如何處理 argument

執行 shell 指令，幾乎大部分都需要輸入 argument 才能順利指行，因此在撰寫上，可以這樣做：

// 一行版本（注意 "" 與 '' 的使用）
{
  "label": "dir",
  "type": "shell",
  "command": "dir 'folder with spaces'"
}

// 使用 args
{
  "label": "dir",
  "type": "shell",
  "command": "dir",
  "args": ["folder with spaces"]
}

// args 設定更詳細
{
  "label": "dir",
  "type": "shell",
  "command": "dir",
  "args": [
    {
      "value": "folder with spaces",
      "quoting": "escape"
    }
  ]
}

同時啟動 client 與 server 端

先寫好兩組 task 的內容，接著再用第三組負責啟動。

{
  "version": "2.0.0",
  "tasks": [
    {
      "label": "Client Build",
      "command": "gulp",
      "args": ["build"],
      "options": {
        "cwd": "${workspaceRoot}/client"
      }
    },
    {
      "label": "Server Build",
      "command": "gulp",
      "args": ["build"],
      "options": {
        "cwd": "${workspaceRoot}/server"
      }
    },
    {
      "label": "Build",
      "dependsOn": ["Client Build", "Server Build"]
    }
  ]
}

這邊要注意的是，嘗試撰寫多個 tasks 時，背景任務（background task）或是監控任務（watch task）是不被允許的。

結論

平心而論，Tasks 的設定比起昨天的 Debugging，複雜許多。原因很簡單：

• Tasks 的設定幾乎是 case by case，需要不少範例讓人學習，才能進一步了解如何使用。
• Debugging 則是觀念通，則馬上全通。

之後介紹語言時，盡可能提供 Task 的案例，來補足範例不足的問題。