在這篇文章你可以學(xué)到如何快速運(yùn)行npm腳本，直接在VSCode中運(yùn)行，并使用快捷方式。如果你沒(méi)有使用過(guò)VSCode Task，那么你可以好好看一下。
為何使用VSCode Task
我工作過(guò)的所有 JavaScript 項(xiàng)目都有一組定義的腳本，你可以為一個(gè)應(yīng)用程序執(zhí)行。通常情況下，這些腳本都是命令，可以幫助你進(jìn)行測(cè)試，構(gòu)建或部署你的代碼。我所合作過(guò)的大多數(shù)開(kāi)發(fā)者都是用自己選擇的命令行來(lái)運(yùn)行這些命令。要么你必須死記硬背你的項(xiàng)目腳本，要么你的命令行可能有一些typeahead的功能，要么你就像我經(jīng)常做的那樣，搜刮歷史記錄來(lái)找到你過(guò)去運(yùn)行的那個(gè)命令。
history | grep 'npm run'
相反，你可以使用“Tasks”為您運(yùn)行腳本。你可以先打開(kāi)命令面板 Cmd + Shift + P ，然后選擇“Tasks: Run Task”。
VSCode將為你提供它支持的多種任務(wù)類型。繼續(xù)并選擇“npm”。編輯器將快速掃描你的 package.json 并提供你定義的任務(wù)：
選擇一個(gè)你的腳本，你就完成了！一個(gè)新的內(nèi)置終端窗口被打開(kāi)，你可以看到你的腳本的輸出，并從你離開(kāi)的地方繼續(xù)工作。
好吧，這看起來(lái)很酷。但是你可能會(huì)想：“嘿，我的項(xiàng)目不是那么簡(jiǎn)單，我的任務(wù)中包含參數(shù)，不同的選項(xiàng)，也許我需要先打開(kāi)子文件夾！”。
當(dāng)然，你也可以這樣做！
配置Tasks
假設(shè)你要為特定的測(cè)試文件運(yùn)行單元測(cè)試，你的測(cè)試命令可能如下所示：
npm test 'my-component.js' --auto-watch --no-single-run
我通常的工作流程如下。我想在watch模式下運(yùn)行我正在進(jìn)行的單元測(cè)試。通常情況下，你需要在測(cè)試命令中插入文件名，但VSCode可以幫你完成。為了實(shí)現(xiàn)這個(gè)目標(biāo)，我們可以使用一些為我們提供的替換變量。例如：${fileBasename}。可用變量的完整列表可以在這里的官方文檔中找到。
現(xiàn)在，再次打開(kāi)命令面板，選擇“任務(wù)：運(yùn)行任務(wù)”，然后選擇“沒(méi)有配置的任務(wù)。配置任務(wù)...”，然后選擇要配置的任務(wù)。這將在項(xiàng)目中創(chuàng)建并打開(kāi)一個(gè)新文件：.vscode/tasks.json。你可以將此文件添加到 .gitignore 或進(jìn)行提交，因此你的團(tuán)隊(duì)也可以使用這些任務(wù)。
添加替換變量后，配置應(yīng)如下所示：
{
"version": "2.0.0",
"tasks": [
{
"type": "npm",
"script": "test ${fileBasename} --auto-watch --no-single-run",
"problemMatcher": [],
"label": "npm: test opened file",
"detail": "npm test"
}
]
}
然后，就這樣，你的自定義任務(wù)就可以在命令面板中運(yùn)行了。你的自定義任務(wù)現(xiàn)在就在你可以從Command Palette中運(yùn)行的列表中?，F(xiàn)在打開(kāi)你要運(yùn)行的測(cè)試文件，例如：my-component-test.js。運(yùn)行 Cmd + Shift + P-> "Tasks: 運(yùn)行任務(wù)"，你應(yīng)該會(huì)看到新配置的任務(wù)："npm: test opened file"。選擇它，它應(yīng)該在終端中運(yùn)行 npm test my-component-test.js --auto-watch --no-single-run。你還可以自定義腳本結(jié)果的顯示方式。我想為這種類型的命令打開(kāi)一個(gè)新的終端。為此，你只需要提供一個(gè)額外的 "演示 "配置即可。
{
...
"presentation": {
"panel": "dedicated",
}
}現(xiàn)在，你可以看到打開(kāi)了多個(gè)終端窗口，可以在它們之間進(jìn)行切換。
配置Shell Tasks
如果要執(zhí)行其他Shell命令，VSCode也支持?，F(xiàn)在，我們可以使用 shell 而不是使用 npm 類型。例如。
{
"version": "2.0.0",
"tasks": [
{
"label": "Run Cypress",
"type": "shell",
"command": "cd tests/e2e/cypress/ && npm run cypress",
}
}總結(jié)
基于上面的例子，你可以在幾分鐘內(nèi)配置好您的自定義開(kāi)發(fā)工作流，并享受到運(yùn)行腳本并直接在編輯器中查看結(jié)果的完全集成體驗(yàn)。
本文告訴大家如何使用VSCode Task改善日常工作，希望對(duì)大家有所幫助。對(duì)JavaScript感興趣的同學(xué)可以看一下教程
JavaScript教程：http://www.o2fo.com/javascript/
JavaScript微課：http://www.o2fo.com/minicourse/play/jscourse
文章參考來(lái)源：www.toutiao.com/a6849220174004879884
