VSCode 如何創(chuàng)建自定義的任務(wù)

VSCode 如何創(chuàng)建自定義的任務(wù)，學(xué)習(xí)完本文你可以掌握如何在VSCode中創(chuàng)建自定義的任務(wù)，首先我們?cè)诿蠲姘謇?，搜?“配置任務(wù)”（Configure Task）并執(zhí)行。

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

• 類型：編譯工具
• 大小：120MB
• 語(yǔ)言：簡(jiǎn)體中文
• 時(shí)間：2023-10-13

查看詳情

我們能夠看到一個(gè)下拉框，這里面提供了多個(gè)不同的選項(xiàng)。

如果我們選擇第一個(gè)，也就是npm: install這一項(xiàng)的話，VS Code 會(huì)立刻在 .vscode文件夾下創(chuàng)建一個(gè) 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": []
  }
 ]
}

我們能夠看到，這個(gè)文件里有一個(gè)屬性叫做tasks，它的值是一個(gè)數(shù)組，這就是我們可以在當(dāng)前文件夾下使用的所有任務(wù)了?，F(xiàn)在這個(gè)模板里，只有一個(gè)任務(wù) npm，它有三個(gè)屬性。

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

第二個(gè)是 script 腳本，則是我們想要 npm 工具執(zhí)行的某個(gè)腳本。

第三個(gè)屬性 problemMatcher，這個(gè)我放在后面的內(nèi)容里介紹，暫時(shí)看不懂也沒關(guān)系，稍安勿躁。

可以看得出來(lái)，這個(gè)任務(wù)相當(dāng)于上面自動(dòng)檢測(cè)的任務(wù)系統(tǒng)的一個(gè)映射。我們把 npm 腳本自己的配置文件，轉(zhuǎn)變成了 VS Code 任務(wù)系統(tǒng)的配置文件，也就是tasks.json。

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

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

選擇完 Others 之后，VS Code 在當(dāng)前文件夾根目錄下的 .vscode 文件夾中，創(chuàng)建了 tasks.json 文件。

這個(gè)文件的內(nèi)容如下：

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

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

第一個(gè)屬性是 label 標(biāo)簽，就是這個(gè)任務(wù)的名字。我們?cè)诿蠲姘謇飯?zhí)行任務(wù)會(huì)需要讀到它，所以它的值應(yīng)該盡可能地描述這個(gè)任務(wù)是干什么的。

第二個(gè)屬性是 type 類型。對(duì)于自定義的任務(wù)來(lái)說(shuō)，這個(gè)類型可以有兩種選擇，一種是這個(gè)任務(wù)被當(dāng)作進(jìn)程來(lái)運(yùn)行，另一種則是在 shell 中作為命令行來(lái)運(yùn)行。默認(rèn)情況下我們會(huì)在 shell 下運(yùn)行，而且這個(gè) shell 命令行將會(huì)在集成終端里執(zhí)行，shell 的選擇則會(huì)尊重我們?cè)诩山K端的配置。比如在我的例子中，我是在 macOS 下運(yùn)行的，系統(tǒng)默認(rèn)的 shell 是 zsh，那么當(dāng)我運(yùn)行這個(gè)腳本時(shí)，就會(huì)在 zsh 里執(zhí)行。

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

好了，看完這三個(gè)屬性，你一定希望第一時(shí)間試試看這個(gè)任務(wù)。下面我們要做的就是打開命令面板，搜索“運(yùn)行任務(wù)”，選擇“echo”這個(gè)任務(wù)（這個(gè)就是我們?cè)趌abel里寫的名字），按下回車后，VS Code 會(huì)問(wèn)我們 “選擇根據(jù)何種錯(cuò)誤和警告掃描任務(wù)輸出”，這個(gè)問(wèn)題涉及到任務(wù)系統(tǒng)的另一個(gè)重要功能，我會(huì)在后面介紹，現(xiàn)在就選擇第一個(gè)選項(xiàng) “繼續(xù)而不掃描任務(wù)輸出” 好了。

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

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

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

我們運(yùn)行看看它的效果：

我們成功地執(zhí)行這個(gè)任務(wù)，打開了瀏覽器。如果我們把這個(gè)任務(wù)分享給同事，而他們使用的系統(tǒng)是 Windows 或者 Linux，那么這個(gè)任務(wù)就沒法使用了，因?yàn)镃hrome 的地址完全對(duì)不上號(hào)。不過(guò)我們可以為 Windows 或者 Linux 系統(tǒng)指定特定的地址，書寫的方式如下（請(qǐng)注意，在你的操作系統(tǒng)上，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創(chuàng)建自定義的任務(wù)技巧，希望大家喜歡，請(qǐng)繼續(xù)關(guān)注腳本之家。

相關(guān)推薦：

VS Code怎么顯示所有任務(wù)? VS Code設(shè)置快速打開顯示所有的技巧

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

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

最新評(píng)論