您好,登錄后才能下訂單哦!
這篇文章主要介紹如何使用VSCode Task改善日常工作,文中介紹的非常詳細(xì),具有一定的參考價值,感興趣的小伙伴們一定要看完!
我工作過的所有JavaScript項(xiàng)目都有一組定義的腳本,你可以為一個應(yīng)用程序執(zhí)行。通常情況下,這些腳本都是命令,可以幫助你進(jìn)行測試,構(gòu)建或部署你的代碼。我所合作過的大多數(shù)開發(fā)者都是用自己選擇的命令行來運(yùn)行這些命令。要么你必須死記硬背你的項(xiàng)目腳本,要么你的命令行可能有一些typeahead的功能,要么你就像我經(jīng)常做的那樣,搜刮歷史記錄來找到你過去運(yùn)行的那個命令。
history | grep 'npm run'
相反,你可以使用“Tasks”為您運(yùn)行腳本。你可以先打開命令面板 Cmd + Shift + P ,然后選擇“Tasks: Run Task”。
VSCode將為你提供它支持的多種任務(wù)類型。繼續(xù)并選擇“npm”。編輯器將快速掃描你的 package.json 并提供你定義的任務(wù):
選擇一個你的腳本,你就完成了!一個新的內(nèi)置終端窗口被打開,你可以看到你的腳本的輸出,并從你離開的地方繼續(xù)工作。
好吧,這看起來很酷。但是你可能會想:“嘿,我的項(xiàng)目不是那么簡單,我的任務(wù)中包含參數(shù),不同的選項(xiàng),也許我需要先打開子文件夾!”。
當(dāng)然,你也可以這樣做!
配置Tasks
假設(shè)你要為特定的測試文件運(yùn)行單元測試,你的測試命令可能如下所示:
npm test 'my-component.js' --auto-watch --no-single-run
我通常的工作流程如下。我想在watch模式下運(yùn)行我正在進(jìn)行的單元測試。通常情況下,你需要在測試命令中插入文件名,但VSCode可以幫你完成。為了實(shí)現(xiàn)這個目標(biāo),我們可以使用一些為我們提供的替換變量。例如:${fileBasename}。可用變量的完整列表可以在這里的官方文檔中找到。
現(xiàn)在,再次打開命令面板,選擇“任務(wù):運(yùn)行任務(wù)”,然后選擇“沒有配置的任務(wù)。配置任務(wù)...”,然后選擇要配置的任務(wù)。這將在項(xiàng)目中創(chuàng)建并打開一個新文件:.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)行的列表中。現(xiàn)在打開你要運(yùn)行的測試文件,例如:my-component-test.js。運(yùn)行 Cmd + Shift + P-> "Tasks: 運(yùn)行任務(wù)",你應(yīng)該會看到新配置的任務(wù):"npm: test opened file"。選擇它,它應(yīng)該在終端中運(yùn)行 npm test my-component-test.js --auto-watch --no-single-run。你還可以自定義腳本結(jié)果的顯示方式。我想為這種類型的命令打開一個新的終端。為此,你只需要提供一個額外的 "演示 "配置即可。
{ ... "presentation": { "panel": "dedicated", } }
現(xiàn)在,你可以看到打開了多個終端窗口,可以在它們之間進(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", } }
以上是“如何使用VSCode Task改善日常工作”這篇文章的所有內(nèi)容,感謝各位的閱讀!希望分享的內(nèi)容對大家有幫助,更多相關(guān)知識,歡迎關(guān)注億速云行業(yè)資訊頻道!
免責(zé)聲明:本站發(fā)布的內(nèi)容(圖片、視頻和文字)以原創(chuàng)、轉(zhuǎn)載和分享為主,文章觀點(diǎn)不代表本網(wǎng)站立場,如果涉及侵權(quán)請聯(lián)系站長郵箱:is@yisu.com進(jìn)行舉報(bào),并提供相關(guān)證據(jù),一經(jīng)查實(shí),將立刻刪除涉嫌侵權(quán)內(nèi)容。