VSCode 如何創建自定義的任務

VSCode 如何創建自定義的任務，學習完本文你可以掌握如何在VSCode中創建自定義的任務，首先我們在命令面板里，搜索 “配置任務”（Configure Task）并執行。

Visual Studio Code(代碼編輯器) v1.80.1 32位 官方中文免費綠色版

• 類型：編譯工具
• 大小：123MB
• 語言：簡體中文
• 時間：2023-07-15

查看詳情

我們能夠看到一個下拉框，這里面提供了多個不同的選項。

如果我們選擇第一個，也就是npm: install這一項的話，VS Code 會立刻在 .vscode文件夾下創建一個 tasks.json 文件，它的格式是 JSON，可讀性很好且易于修改。

{
 // See https://go.microsoft.com/fwlink/?LinkId=733558
 // for the documentation about the tasks.json format
 "version": "2.0.0",
 "tasks": [
  {
   "type": "npm",
   "script": "install",
   "problemMatcher": []
  }
 ]
}

我們能夠看到，這個文件里有一個屬性叫做tasks，它的值是一個數組，這就是我們可以在當前文件夾下使用的所有任務了。現在這個模板里，只有一個任務 npm，它有三個屬性。

第一個屬性是 type，它代表著你要使用哪個腳本工具，我們這里使用是 npm。

第二個是 script 腳本，則是我們想要 npm 工具執行的某個腳本。

第三個屬性 problemMatcher，這個我放在后面的內容里介紹，暫時看不懂也沒關系，稍安勿躁。

可以看得出來，這個任務相當于上面自動檢測的任務系統的一個映射。我們把 npm 腳本自己的配置文件，轉變成了 VS Code 任務系統的配置文件，也就是tasks.json。

但是這種類型的任務，受限于 VS Code 或者插件所支持的腳本工具，缺乏一定的靈活性。我們把 .vscode/tasks.json 文件先刪除，然后重新打開命令面板，執行 “配置任務”（Configure Task）。不過這一次，我們選擇最后一項，使用模板創建 tasks.json 文件。（請注意，這里我們是為了從 0 了解任務系統，所以才把之前的 tasks.json 文件刪除，如果你已經在項目中使用 tasks.json ，大可不必這么做，照著文章讀下去就可以了。）

緊接著 VS Code 就問我們了，希望使用哪種模板。這里模板的多少，同樣取決于你裝了哪些插件。默認情況下，VS Code 為 MSBuild、Maven、.NET Core 提供了模板，而最后一個 Others，則是一個通用的模板，我們一起來看下它。

選擇完 Others 之后，VS Code 在當前文件夾根目錄下的 .vscode 文件夾中，創建了 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"
  }
 ]
}

這個文件跟最開始我們看到的非常接近，tasks 屬性下有一個任務，只不過它的三個屬性跟之前很不一樣。

第一個屬性是 label 標簽，就是這個任務的名字。我們在命令面板里執行任務會需要讀到它，所以它的值應該盡可能地描述這個任務是干什么的。

第二個屬性是 type 類型。對于自定義的任務來說，這個類型可以有兩種選擇，一種是這個任務被當作進程來運行，另一種則是在 shell 中作為命令行來運行。默認情況下我們會在 shell 下運行，而且這個 shell 命令行將會在集成終端里執行，shell 的選擇則會尊重我們在集成終端的配置。比如在我的例子中，我是在 macOS 下運行的，系統默認的 shell 是 zsh，那么當我運行這個腳本時，就會在 zsh 里執行。

第三個屬性是命令command，它代表著我們希望在 shell 中運行哪一個命令，或者我們希望運行哪個程序。

好了，看完這三個屬性，你一定希望第一時間試試看這個任務。下面我們要做的就是打開命令面板，搜索“運行任務”，選擇“echo”這個任務（這個就是我們在label里寫的名字），按下回車后，VS Code 會問我們 “選擇根據何種錯誤和警告掃描任務輸出”，這個問題涉及到任務系統的另一個重要功能，我會在后面介紹，現在就選擇第一個選項 “繼續而不掃描任務輸出” 好了。

到這里你可能會吐槽，為了完成一個任務，搞得好復雜啊。別著急，等我們把各個功能都介紹完畢，就能夠選擇快速的方式運行了。

剛才上面我們提到了 “type” 類型，還支持 “process”， 也就是以進程的形式運行。如果我們選擇這個類型，那么就需要在 “command” 里提供程序的地址。比如下面的例子里，我提供了 Chrome 瀏覽器在 macOS 下的地址。

{
 "version": "2.0.0",
 "tasks": [
  {
   "label": "chrome",
   "type": "process",
   "command": "/Applications/Google Chrome.app/Contents/MacOS/Google Chrome"
  }
 ]
}

我們運行看看它的效果：

我們成功地執行這個任務，打開了瀏覽器。如果我們把這個任務分享給同事，而他們使用的系統是 Windows 或者 Linux，那么這個任務就沒法使用了，因為Chrome 的地址完全對不上號。不過我們可以為 Windows 或者 Linux 系統指定特定的地址，書寫的方式如下（請注意，在你的操作系統上，Chrome 的地址可能不完全跟下面的代碼樣例一樣）：

{
 "version": "2.0.0",
 "tasks": [
  {
   "label": "chrome",
   "type": "process",
   "command": "/Applications/Google Chrome.app/Contents/MacOS/Google Chrome"，
   "windows": {
    "command": "C:\\Program Files (x86)\\Google\\Chrome\\Application\\chrome.exe"
      },
      "linux": {
          "command": "/usr/bin/google-chrome"
      }
  }
 ]
}

以上就是VSCode創建自定義的任務技巧，希望大家喜歡，請繼續關注風君子博客。

相關推薦：

VS Code怎么顯示所有任務? VS Code設置快速打開顯示所有的技巧

vscode docker插件有什么用? vscode docker插件使用教程

vscode打開終端的快捷鍵是啥? VScode打開終端的三種方法

總結

以上是生活随笔為你收集整理的VSCode怎么新增任务? VSCode创建自定义的任务技巧的全部內容，希望文章能夠幫你解決所遇到的問題。

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