深入講解VsCode各場(chǎng)景高級(jí)調(diào)試與使用技巧 代碼編寫(xiě)效率提升2倍

在index.ts中隨意添加一個(gè)斷點(diǎn)
按F5
或者運(yùn)行 -> 啟動(dòng)調(diào)試
,此時(shí)可以看到可以正常debug調(diào)試
- 通過(guò)構(gòu)建任務(wù)構(gòu)建調(diào)試TS
按Ctrl+Shift+B
或選擇終端 -> 運(yùn)行生成任務(wù)
,此時(shí)會(huì)彈出一個(gè)下拉菜單
選擇tsc構(gòu)建選項(xiàng)
,此時(shí)可以看到自動(dòng)生成了編譯文件
注意,如果你使用的是其他終端(比如cmder
)的話,有可能會(huì)生成不了,如下圖所示,使用默認(rèn)的powershell即可:
調(diào)試的話和上述步驟一樣,在有了編譯后的文件后,按F5
即可
- 監(jiān)視改變并實(shí)時(shí)編譯
按Ctrl + Shift + B
選擇監(jiān)視選項(xiàng),可以實(shí)時(shí)監(jiān)視文件內(nèi)容發(fā)生變化,重新編譯
如下圖所示,會(huì)實(shí)時(shí)編譯
補(bǔ)充知識(shí)點(diǎn):tasks配置文件的創(chuàng)建方式
- 方法1:點(diǎn)擊
終端 -> 配置任務(wù) -> 選擇任務(wù)
可以生成對(duì)應(yīng)的tasks.json配置
- 方法2:點(diǎn)擊
終端 -> 運(yùn)行生成任務(wù) -> 點(diǎn)擊設(shè)置圖標(biāo)
也可以生成對(duì)應(yīng)的tasks.json配置
相關(guān)文章
VS Code怎么設(shè)置分支排序順序? 按提交人日期分支排序的技巧
VS Code怎么設(shè)置分支排序順序?VS Code中想要控制分支的排序順序,在哪來(lái)設(shè)置呢?下面我們就來(lái)看看VSCode按提交人日期分支排序的技巧2023-08-19VSCode的autopep8插件無(wú)法自動(dòng)格式化含中文的utf-8編碼文件錯(cuò)誤的解決
配置autopep8插件并安裝相關(guān)依賴后,VSCode無(wú)法自動(dòng)格式化含有中文的代碼文件,這里就為大家分享一下解決方法2023-09-24VSCode選項(xiàng)卡上的擴(kuò)展怎么關(guān)閉出發(fā)? vscode不顯示觸發(fā)選項(xiàng)卡上的擴(kuò)展技
VSCode選項(xiàng)卡上的擴(kuò)展怎么關(guān)閉出發(fā)?VSCode選項(xiàng)卡中可以出發(fā)擴(kuò)展,也可以關(guān)閉觸發(fā),該怎么操作呢?下面我們就來(lái)看看vscode不顯示觸發(fā)選項(xiàng)卡上的擴(kuò)展技巧2023-10-07vscode怎么關(guān)閉啟用預(yù)覽? VSCode取消右側(cè)預(yù)覽面板的技巧
vscode怎么關(guān)閉啟用預(yù)覽?vscode中可以預(yù)覽,該怎么開(kāi)啟或者關(guān)閉預(yù)覽面板呢?下面我們就來(lái)看看VSCode取消右側(cè)預(yù)覽面板的技巧2023-10-16VSCode合并運(yùn)行按鈕怎么關(guān)閉? VSCode關(guān)閉一鍵運(yùn)行的技巧
VSCode合并運(yùn)行按鈕怎么關(guān)閉?雖然合并運(yùn)行很方便但是有時(shí)候用不到,想要關(guān)閉,該怎么操作呢?下面我們就來(lái)看看VSCode關(guān)閉一鍵運(yùn)行的技巧2025-04-03VS Code怎么取消自動(dòng)簽名? VSCode關(guān)閉總是簽字的技巧
VS Code怎么關(guān)閉自動(dòng)簽名?VSCode中可以自動(dòng)簽名,現(xiàn)在想要關(guān)閉自動(dòng)簽字,該怎么操作呢?下面我們就來(lái)看看VSCode關(guān)閉總是簽字的技巧2023-10-16VS Code怎么開(kāi)啟緊湊視圖? VSCode設(shè)置緊密檢視的技巧
VS Code怎么開(kāi)啟緊湊視圖?VS Code中可以設(shè)置視圖樣式,該怎么使用緊湊樣式呢?下面我們就來(lái)看看VSCode設(shè)置緊密檢視的技巧2023-10-16VS Code單元焦點(diǎn)指示器槽怎么設(shè)置?
VS Code單元焦點(diǎn)指示器槽怎么設(shè)置?VS Code中想要設(shè)置單元焦點(diǎn)指示器槽的位置上,該怎么設(shè)置呢?詳細(xì)請(qǐng)看下文介紹2023-10-16VSCode怎么設(shè)置不顯示空值? VSCode不顯示空值的設(shè)置技巧
VSCode怎么設(shè)置不顯示空值?VSCode中的空值也會(huì)顯示,想要不顯示空值,該怎么操作呢?下面我們就來(lái)看看Visual Studio Code設(shè)置不顯示空值的方法2023-11-27VSCode導(dǎo)航欄怎么顯示函數(shù)? VSCode設(shè)置顯示函數(shù)的方法
VSCode導(dǎo)航欄怎么顯示函數(shù)?VSCode中的函數(shù)很常用,想要顯示在導(dǎo)航欄,該怎么操作呢?下面我們就來(lái)看看VSCode設(shè)置顯示函數(shù)的方法2023-11-27