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

VsCode自從誕生以來,以其各自優(yōu)異的特性迅速走紅。尤其是對于前端開發(fā)小伙伴來說,幾乎成為必不可少的開發(fā)工具。所以,熟練掌握VsCode的各自使用技巧與調(diào)試技巧會讓你的日常開發(fā)工作效率倍增。本文將會以大量圖文的方式,從下面幾個(gè)方面詳細(xì)介紹VsCode的各種技巧:
- 第一部分主要介紹VsCode的基本技巧,比如常用快捷鍵、輔助標(biāo)尺等。熟悉此部分的可以直接跳過。
- 第二部分主要各種斷點(diǎn)(比如日志斷點(diǎn)、內(nèi)聯(lián)斷點(diǎn)、表達(dá)式斷點(diǎn)等等)、數(shù)據(jù)面板等等
- 第三部分主要講解各種項(xiàng)目的調(diào)試實(shí)戰(zhàn),比如Node程序、TS程序、Vue程序、Electron程序、Html等的調(diào)試實(shí)戰(zhàn)
- 最后一部分將會講解其他有用的技巧,比如代碼片段、重構(gòu)、Emmet等等
基本技巧
快速啟動(dòng)
VsCode安裝后,會自動(dòng)寫入環(huán)境變量,終端輸入code
即可喚起VsCode應(yīng)用程序。
常用快捷鍵
ctrl + p
快速搜索文件并跳轉(zhuǎn),添加:
可以跳轉(zhuǎn)到指定行
ctrl + shift + p
根據(jù)您當(dāng)前的上下文訪問所有可用命令。ctrl + shift + c
在外部打開終端并定位到當(dāng)前項(xiàng)目路徑ctrl + 按鍵1左邊的符號
顯示隱藏終端面板Ctrl+B
切換側(cè)邊欄Ctrl+\
快速拆分文件編輯alt + 單機(jī)左鍵
添加多處光標(biāo)alt + shift + 單擊左鍵
同一列所有位置添加光標(biāo)alt + shift + 鼠標(biāo)選擇
選擇相同開始和結(jié)束的區(qū)域
alt + 上鍵或下鍵
將當(dāng)前行或者選中的區(qū)域上移/下移一行 垂直標(biāo)尺
在配置文件中添加如下配置,可以增加字符數(shù)標(biāo)尺輔助線
"editor.rulers": [40, 80, 100] 復(fù)制代碼
進(jìn)階技巧
斷點(diǎn)的基本使用
下面以在VsCode中快速調(diào)試一個(gè)Node項(xiàng)目為例,演示斷點(diǎn)的基本使用。后文會繼續(xù)結(jié)束各種高級斷點(diǎn)。
- 創(chuàng)建一個(gè)基本的node項(xiàng)目為Nodejs
- 打開左側(cè)調(diào)試面板,選擇你要調(diào)試的node項(xiàng)目名稱,添加調(diào)試配置
- 選擇調(diào)試的項(xiàng)目類型為Node.js
- 打開生成的.vscode/launch.json文件,指定程序入口文件
program
字段用于指定你的程序入口文件,${workspaceFolder}
表示當(dāng)前項(xiàng)目根路徑
在程序中添加斷點(diǎn),只需要點(diǎn)擊左側(cè)的邊欄即可添加斷點(diǎn)
按F5
開始調(diào)試,成功調(diào)試會有浮窗操作欄
浮窗的操作按鈕功能依次為:
- 繼續(xù)(
F5
)、 - 調(diào)試下一步(
F10
)、 - 單步跳入(
F11
)、 - 單步跳出(
Shift F11
)、 - 重新調(diào)試(
Ctrl + Shift + F5
)、 - 結(jié)束調(diào)試(
Shift + F5
)
日志斷點(diǎn)
日志斷點(diǎn)是普通斷點(diǎn)的一種變體,區(qū)別在于不會中斷調(diào)試,而是可以把信息記錄到控制臺。日志斷點(diǎn)對于調(diào)試無法暫?;蛲V沟姆?wù)時(shí)特別有用。步驟如下:
- 添加日志斷點(diǎn)的步驟
- 輸入要日志斷點(diǎn)的信息,點(diǎn)擊回車添加完成
可以使用{}
使用變量,比如在此處添加日志斷點(diǎn),b的值為$
- 日志斷點(diǎn)添加成功后會有是一個(gè)菱形圖標(biāo)
- 按
F5
運(yùn)行查看調(diào)試結(jié)果
表達(dá)式條件斷點(diǎn)
條件斷點(diǎn)是表達(dá)式結(jié)果為true
時(shí)才會進(jìn)行斷點(diǎn),步驟如下:
- 在代碼行左側(cè)右擊,也可以添加斷點(diǎn),此處選擇添加條件斷點(diǎn)
- 填寫表達(dá)式,按回車鍵
- 添加成功的小圖標(biāo)如下
- 按
F5
調(diào)試,條件成立所以進(jìn)行了斷點(diǎn)
命中計(jì)數(shù)斷點(diǎn)
只有該行代碼命中了指定次數(shù),才會進(jìn)行斷點(diǎn)。步驟如下:
- 選擇條件斷點(diǎn),切換為命中次數(shù)選項(xiàng),填寫命中次數(shù)
- 填寫成功如下圖所示
- 按
F5
調(diào)試,如圖所示,index為9時(shí)才中斷
內(nèi)聯(lián)斷點(diǎn)
僅當(dāng)執(zhí)行到達(dá)與內(nèi)聯(lián)斷點(diǎn)關(guān)聯(lián)的列時(shí),才會命中內(nèi)聯(lián)斷點(diǎn)。這在調(diào)試在一行中包含多個(gè)語句的縮小代碼時(shí)特別有用。比如for循環(huán),短路運(yùn)算符等一行代碼包含多個(gè)表達(dá)式時(shí)會特別有用。步驟如下:
- 在指定位置按
Shift + F9
- 調(diào)試之后,每次運(yùn)行到該內(nèi)聯(lián)處的代碼都會中斷
補(bǔ)充知識點(diǎn):數(shù)據(jù)面板介紹
- 數(shù)據(jù)面板可以查看所有變量
- 在變量上點(diǎn)擊右鍵,可以設(shè)置變量值、復(fù)制變量值等操作
- 聚焦于數(shù)據(jù)面板時(shí),可以通過鍵入值來搜索過濾。點(diǎn)擊下圖所示按鈕可以控制是否篩選。
補(bǔ)充知識點(diǎn):監(jiān)聽面板介紹
可以將變量添加到監(jiān)聽面板,實(shí)時(shí)觀察變量的變化。
- 在變量面板通過右鍵選擇“添加到監(jiān)視”將變量添加到監(jiān)聽面板
- 也可以直接在監(jiān)聽面板選擇添加按鈕進(jìn)行變量添加
- 添加變量后就可以實(shí)時(shí)監(jiān)聽變量的變化
補(bǔ)充知識點(diǎn):調(diào)試服務(wù)器時(shí)打開一個(gè)URI
開發(fā) Web 程序通常需要在 Web 瀏覽器中打開特定 URL,以便在調(diào)試器中訪問服務(wù)器代碼。VS Code 有一個(gè)內(nèi)置功能“ serverReadyAction ”來自動(dòng)化這個(gè)任務(wù)。
- 一段簡單的server代碼
{ "type": "node", "request": "launch", "name": "Launch Program", "program": "${workspaceFolder}/app.js", "serverReadyAction": { "pattern": "listening on port ([0-9]+)", "uriFormat": "http://localhost:%s", "action": "openExternally" } } 復(fù)制代碼
- 配置launch.json,以支持打開URI
{ "type": "node", "request": "launch", "name": "Launch Program", "program": "${workspaceFolder}/app.js", "serverReadyAction": { "pattern": "listening on port ([0-9]+)", "uriFormat": "http://localhost:%s", "action": "openExternally" } } 復(fù)制代碼
pattern
是設(shè)置匹配的程度端口號,端口號放在小括號內(nèi),即作為一個(gè)正則的捕獲組使用。uriFormat
映射為URI,其中%s
使用pattern
中的第一個(gè)捕獲組替換。最后使用該URI作為外部程序打開的URI。
- 按
F5
調(diào)試,會自動(dòng)打開瀏覽器,且會在下圖所示處中斷,當(dāng)繼續(xù)執(zhí)行后,瀏覽器才能看到輸出了server的內(nèi)容
終局:各場景調(diào)試實(shí)戰(zhàn) 調(diào)試NodeJS項(xiàng)目
關(guān)于NodeJs項(xiàng)目的調(diào)試方法,已經(jīng)在上述的斷點(diǎn)的基本使用部分做了介紹,可以網(wǎng)上滾動(dòng)翻閱。
調(diào)試Typescript項(xiàng)目
- 調(diào)試TS項(xiàng)目前,先創(chuàng)建一個(gè)TS項(xiàng)目
- 先初始化一個(gè)ts程序,生成默認(rèn)的
tsconfig.json
文件
# 終端運(yùn)行 tsc --init 復(fù)制代碼
- 打開
tsconfig.json
文件,開啟sourceMap選項(xiàng)和指定編譯后輸出的路徑
VS Code 內(nèi)置了對 Ts 調(diào)試的支持。為了支持調(diào)試 Ts 與正在執(zhí)行的 Js 代碼相結(jié)合,VS Code 依賴于調(diào)試器的source map在 Ts 源代碼和正在運(yùn)行的 Js 之間進(jìn)行映射,所以需要需要開啟sourceMap
選項(xiàng)。
{ "sourceMap": true, "outDir": "./out" } 復(fù)制代碼
- 新建index.ts文件,寫一個(gè)基本的ts代碼
const num: number = 123; console.log(num); function fn(arg: string): void { console.log('fn', arg); } fn("Hello"); 復(fù)制代碼
- 手動(dòng)編譯調(diào)試TS
在上述的ts基本項(xiàng)目中:
終端執(zhí)行ts的編譯命令tsc
此時(shí)可以看到生成了out文件夾,里面包含一個(gè)index.js
和一個(gè)index.js.map
文件
在index.ts中隨意添加一個(gè)斷點(diǎn)
按F5
或者運(yùn)行 -> 啟動(dòng)調(diào)試
,此時(shí)可以看到可以正常debug調(diào)試
- 通過構(gòu)建任務(wù)構(gòu)建調(diào)試TS
按Ctrl+Shift+B
或選擇終端 -> 運(yùn)行生成任務(wù)
,此時(shí)會彈出一個(gè)下拉菜單
選擇tsc構(gòu)建選項(xiàng)
,此時(shí)可以看到自動(dòng)生成了編譯文件
注意,如果你使用的是其他終端(比如cmder
)的話,有可能會生成不了,如下圖所示,使用默認(rèn)的powershell即可:
調(diào)試的話和上述步驟一樣,在有了編譯后的文件后,按F5
即可
- 監(jiān)視改變并實(shí)時(shí)編譯
按Ctrl + Shift + B
選擇監(jiān)視選項(xiàng),可以實(shí)時(shí)監(jiān)視文件內(nèi)容發(fā)生變化,重新編譯
如下圖所示,會實(shí)時(shí)編譯
補(bǔ)充知識點(diǎn):tasks配置文件的創(chuàng)建方式
- 方法1:點(diǎn)擊
終端 -> 配置任務(wù) -> 選擇任務(wù)
可以生成對應(yīng)的tasks.json配置
- 方法2:點(diǎn)擊
終端 -> 運(yùn)行生成任務(wù) -> 點(diǎn)擊設(shè)置圖標(biāo)
也可以生成對應(yīng)的tasks.json配置
補(bǔ)充知識點(diǎn):每次調(diào)試時(shí)重新編譯
按上述的操作已經(jīng)生成了task.json配置文件
{ "version": "2.0.0", "tasks": [ { "type": "typescript", "tsconfig": "tsconfig.json", "problemMatcher": [ "$tsc" ], "group": "build", "label": "tsc: 構(gòu)建 - tsconfig.json" } ] } 復(fù)制代碼
- 點(diǎn)擊
運(yùn)行 -> 添加配置 -> 選擇nodejs
- 在生成的
launch.json
文件中,添加preLaunchTask
字段,值是tasks.json
的label
值,一定要相同,注意大小寫。該字段的作用是在執(zhí)行命令前先執(zhí)行改task
任務(wù)。
注意,如果編譯后的js文件不在相應(yīng)的位置,通過圖中的outFiles
字段可以指定ts
編譯后的js
路徑。
- 在
index.ts
文件中按F5
啟動(dòng)調(diào)試,可以看到調(diào)試前已經(jīng)生成了編譯文件,而后就可以正常調(diào)試了。
補(bǔ)充知識點(diǎn):VsCode的TS版本說明
vscode本身內(nèi)置了對ts的支持
vscode內(nèi)置的ts版本(即工作區(qū)版本),僅僅用于IntelliSense(代碼提示),工作區(qū)ts版本與用于編譯的ts版本無任何關(guān)系。
修改工作區(qū)ts版本的方法:
- 在狀態(tài)欄選擇typescript的圖標(biāo),選擇版本切換
- 選擇你需要的版本即可
調(diào)試html項(xiàng)目
學(xué)會了上述ts的調(diào)試后,我們嘗試調(diào)試html文件,并且html文件中引入ts文件:
- 創(chuàng)建html,引入ts編譯后的js文件
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>Document</title> </head> <body> <h3>Hello</h3> <script src="./out/index.js"></script> </body> </html> 復(fù)制代碼
- ts源文件如下:
const num: number = 1221; console.log(num); function fn(arg: string): void { console.log('fn', arg); } document.body.append('World') fn("he"); 復(fù)制代碼
- 打debug
- launch.json啟動(dòng)命令配置
{ // 使用 IntelliSense 了解相關(guān)屬性。 // 懸停以查看現(xiàn)有屬性的描述。 // 欲了解更多信息,請?jiān)L問: https://go.microsoft.com/fwlink/?linkid=830387 "version": "0.2.0", "configurations": [ { "type": "pwa-chrome", "request": "launch", "name": "Launch Chrome", "url": "file:///E:/demo/vscode/debug/ts/index.html", "preLaunchTask": "tsc: 構(gòu)建 - tsconfig.json", "webRoot": "${workspaceFolder}" } ] } 復(fù)制代碼
- 選擇我們的啟動(dòng)命令
- 按
F5
可以正常喚起chrome瀏覽器,并在vscode的ts源碼處會有debug效果
調(diào)試Vue項(xiàng)目的兩種方式
下面介紹兩種調(diào)試vue2項(xiàng)目的3種方法,其他框架的調(diào)試也類似:
不使用vscode插件Debugger for chrome的方法
- 初始化vue項(xiàng)目,配置
vue.config.js
,指定要生成sourceMaps資源
module.exports = { configureWebpack: { // 生成sourceMaps devtool: "source-map" } }; 復(fù)制代碼
- 根目錄下創(chuàng)建
./vscode/launch.json文件
或者選擇運(yùn)行 -> 添加配置 -> Chrome
{ "version": "0.2.0", "configurations": [ { "type": "chrome", "request": "launch", "name": "vuejs: chrome", "url": "http://localhost:8080", "webRoot": "${workspaceFolder}", "breakOnLoad": true, "pathMapping": { "/_karma_jpgack_": "${workspaceFolder}" }, "sourceMapPathOverrides": { "jpgack:/*": "${webRoot}/*", "/./*": "${webRoot}/*", "/src/*": "${webRoot}/*", "/*": "*", "/./~/*": "${webRoot}/node_modules/*" }, "preLaunchTask": "serve" } ] } 復(fù)制代碼
添加任務(wù)腳本
{ "version": "2.0.0", "tasks": [ { "label": "serve", "type": "npm", "script": "serve", "isBackground": true, "problemMatcher": [ { "base": "$tsc-watch", "background": { "activeOnStart": true, "beginsPattern": "Starting development server", "endsPattern": "Compiled successfully" } } ], "group": { "kind": "build", "isDefault": true } } ] } 復(fù)制代碼
該腳本的作用是運(yùn)行npm run serve
編譯命令。
按F5
啟動(dòng)調(diào)試即可
注意:此方式的主要點(diǎn)在于launch.json
配置文件中,通過preLaunchTask
字段指定調(diào)試前先運(yùn)行一個(gè)任務(wù)腳本,preLaunchTask
的值對應(yīng)tasks.json
文件中的label
值。
借助vscode插件Debugger for Chrome在Chrome中調(diào)試
- 第一步還是初始化vue項(xiàng)目,添加
vue.config.js
文件配置,指定要生成sourceMaps資源
module.exports = { configureWebpack: { // 生成sourceMaps devtool: "source-map" } }; 復(fù)制代碼
- vscode中擴(kuò)展中安裝
Debugger for Chrome
插件,并確保沒有禁用插件
- 手動(dòng)啟動(dòng)項(xiàng)目的運(yùn)行, 此方式不需要配置
tasks.json
任務(wù)
# 終端執(zhí)行命令,啟動(dòng)項(xiàng)目 npm run serve 復(fù)制代碼
按F5
啟動(dòng)調(diào)試即可
借助vscode插件Debugger for Firfox
在Firefox中調(diào)試
- 和
Debugger for Chrome
基本一樣,區(qū)別在于安裝Debugger for Firfox
插件,并在launch.json配置中,增加調(diào)試Firefox的配置即可,配置如下
{ "version": "0.2.0", "configurations": [ // 省略Chrome的配置... // 下面添加的Firefox的配置 { "type": "firefox", "request": "launch", "reAttach": true, "name": "vuejs: firefox", "url": "http://localhost:8080", "webRoot": "${workspaceFolder}/src", "pathMappings": [{ "url": "jpgack:///src/", "path": "${webRoot}/" }] } ] } 復(fù)制代碼
- 調(diào)試時(shí)選擇對應(yīng)的調(diào)試命令即可
Firefox初始啟動(dòng)時(shí)不會觸發(fā)調(diào)試,需要刷新一次
調(diào)試Electron項(xiàng)目
Electron很多人都使用過,主要用于開發(fā)跨平臺的系統(tǒng)桌面應(yīng)用。那么來看下vue-cli-electron-builder
創(chuàng)建的Electron
項(xiàng)目怎么調(diào)試。步驟如下:
- 在初始化項(xiàng)目后,首先修改
vue.config.js
文件配置,增加sourceMaps配置:
module.exports = { configureWebpack: { devtool: 'source-map' } } 復(fù)制代碼
- 創(chuàng)建調(diào)試配置
.vscode/launch.json
{ "version": "0.2.0", "configurations": [ { "name": "Electron: Main", "type": "node", "request": "launch", "protocol": "inspector", "preLaunchTask": "bootstarp-service", "runtimeExecutable": "${workspaceRoot}/node_modules/.bin/electron", "windows": { "runtimeExecutable": "${workspaceRoot}/node_modules/.bin/electron.cmd" }, "args": ["--remote-debugging-port=9223", "./dist_electron"], "outFiles": ["${workspaceFolder}/dist_electron/**/*.js"] }, { "name": "Electron: Renderer", "type": "chrome", "request": "attach", "port": 9223, "urlFilter": "http://localhost:*", "timeout": 0, "webRoot": "${workspaceFolder}/src", "sourceMapPathOverrides": { "jpgack:///./src/*": "${webRoot}/*" } }, ], "compounds": [ { "name": "Electron: All", "configurations": ["Electron: Main", "Electron: Renderer"] } ] } 復(fù)制代碼
此處配置了兩個(gè)調(diào)試命令: Electron: Main
用于調(diào)試主進(jìn)程,Electron: Renderer
用于調(diào)試渲染進(jìn)程;compounds[].
選項(xiàng)用于定義復(fù)合調(diào)試選項(xiàng); configurations
定義的復(fù)合命令是并行的; preLaunchTask
用于配置命令執(zhí)行前先執(zhí)行的任務(wù)腳本,其值對應(yīng)tasks.json
中的label
字段; preLaunchTask
用在compounds
時(shí),用于定義configurations
復(fù)合任務(wù)執(zhí)行前先執(zhí)行的腳本。
- 創(chuàng)建任務(wù)腳本
{ // See https://go.microsoft.com/fwlink/?LinkId=733558 // for the documentation about the tasks.json format "version": "2.0.0", "tasks": [ { "label": "bootstarp-service", "type": "process", "command": "./node_modules/.bin/vue-cli-service", "windows": { "command": "./node_modules/.bin/vue-cli-service.cmd", "options": { "env": { "VUE_APP_ENV": "dev", "VUE_APP_TYPE": "local" } } }, "isBackground": true, "args": [ "electron:serve", "--debug" ], "problemMatcher": { "owner": "custom", "pattern": { "regexp": "" }, "background": { "beginsPattern": "Starting development server\\.\\.\\.", "endsPattern": "Not launching electron as debug argument was passed\\." } } } ] } 復(fù)制代碼
- 啟動(dòng)調(diào)試
在主進(jìn)程相關(guān)代碼上打上斷點(diǎn),然后啟動(dòng)調(diào)試主進(jìn)程命令就可以調(diào)試主進(jìn)程了
注意,這里的options
參數(shù)是根據(jù)實(shí)際的情況,自定義添加我們運(yùn)行項(xiàng)目時(shí)所需要的參數(shù),比如我這里因?yàn)閱?dòng)項(xiàng)目的npm命令是:
"serve-local:dev": "cross-env VUE_APP_TYPE=local VUE_APP_ENV=dev vue-cli-service electron:serve" 復(fù)制代碼
- 主進(jìn)程調(diào)試成功
- 開始調(diào)試渲染進(jìn)程
切換到渲染進(jìn)程的調(diào)試選項(xiàng),在渲染進(jìn)程的代碼處打上斷點(diǎn),點(diǎn)擊調(diào)試。注意,此時(shí)并不會有斷點(diǎn)終端,需要ctrl+r
手動(dòng)刷新軟件進(jìn)程才會看到渲染進(jìn)程的斷點(diǎn)。
刷新渲染進(jìn)程后的效果,如下圖,已經(jīng)進(jìn)入了斷點(diǎn)
另一種方式
同時(shí)開啟渲染進(jìn)程和主進(jìn)程的調(diào)試,只需要切換到調(diào)試全部的選項(xiàng)即可。注意,此種方式因?yàn)?code>compounds[].configurations配置是并行執(zhí)行的,并不一定能保證渲染進(jìn)程調(diào)試一定能附加到主進(jìn)程調(diào)試成功(估計(jì)是時(shí)機(jī)問題),有些時(shí)候會調(diào)試渲染進(jìn)程不成功。所以,可以采取上面的方式進(jìn)行調(diào)試。
其他技巧
技巧一:代碼片段(snippets)
從擴(kuò)展商店中安裝snippets
@category:"snippets" 復(fù)制代碼
創(chuàng)建全局代碼片段
- 選擇
文件 -> 首選項(xiàng) -> 用戶片段
- 選擇
新建全局代碼片段文件
添加代碼片段文件的文件名稱,會生成.code-snippets
后綴的文件
定義用戶片段
{ "自動(dòng)補(bǔ)全console.log": { "scope": "javascript,typescript", "prefix": "log", "body": [ "console.log('$1');", "$2" ], "description": "輸出console.log('')" } } 復(fù)制代碼
在鍵盤輸入log
時(shí)效果如下
指定光標(biāo)處的默認(rèn)值并選中
"body": [ "console.log('${1:abc}');" ], 復(fù)制代碼
指定光標(biāo)處的默認(rèn)值有多個(gè),并提供下拉選擇
用兩個(gè)豎線包含多個(gè)選擇值,|多個(gè)選擇值直接用逗號隔開|
"body": [ "console.log('${1:abc}');", "${2|aaa,bbb,ccc|}" ], 復(fù)制代碼
新建當(dāng)前工作區(qū)的代碼片段
只需要選擇文件 -> 首選項(xiàng) -> 用戶片段 -> 新建xxx文件夾的代碼片段
, 新建后會在當(dāng)前工作區(qū)生成.vscode/xxx.code-snippets
文件
技巧二:Emmet
vscode內(nèi)置了對Emmet的支持,無需額外擴(kuò)展。
技巧三:對光標(biāo)處代碼變量快速重命名
選中或者光標(biāo)所處的位置,按F2
可以對所有的變量重命名
技巧四:代碼重構(gòu)建議 選中要重構(gòu)的代碼,點(diǎn)擊出現(xiàn)的黃色小燈的圖標(biāo)
選中重構(gòu)的類型
輸入新的變量名
還可以重構(gòu)到函數(shù)
TS中還可以提取接口等等
補(bǔ)充:VsCode擴(kuò)展插件開發(fā)
VsCode擴(kuò)展插件可以做什么事情?
- 定制主題、文件圖標(biāo)
- 擴(kuò)展工作臺功能
- 創(chuàng)建webView
- 自定義新的語言提示
- 支持調(diào)試特定的runtime
基于Yeoman
快速開發(fā)VsCode插件,步驟如下:
安裝Yeoman
和用于生成模板的插件VS Code Extension Generator
# 終端運(yùn)行,主要node版本需要12及以上,node10會安裝報(bào)錯(cuò) npm i -g yo generator-code 復(fù)制代碼
運(yùn)行yo code
創(chuàng)建命令,選擇要生成的項(xiàng)目模板。這里演示New extension
根據(jù)提示依次選擇
生成的內(nèi)容如下
按F5
生成編譯項(xiàng)目,此時(shí)會自動(dòng)打開一個(gè)新窗口在新窗口按Ctrl+Shfit+P
,輸入Hello World
命令
此時(shí)會彈出一個(gè)彈窗的效果
至此,一個(gè)最簡單的插件就完成了
相關(guān)文章
VS Code怎么設(shè)置分支排序順序? 按提交人日期分支排序的技巧
VS Code怎么設(shè)置分支排序順序?VS Code中想要控制分支的排序順序,在哪來設(shè)置呢?下面我們就來看看VSCode按提交人日期分支排序的技巧2023-08-19VSCode的autopep8插件無法自動(dòng)格式化含中文的utf-8編碼文件錯(cuò)誤的解決
配置autopep8插件并安裝相關(guān)依賴后,VSCode無法自動(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ā),該怎么操作呢?下面我們就來看看vscode不顯示觸發(fā)選項(xiàng)卡上的擴(kuò)展技巧2023-10-07vscode怎么關(guān)閉啟用預(yù)覽? VSCode取消右側(cè)預(yù)覽面板的技巧
vscode怎么關(guān)閉啟用預(yù)覽?vscode中可以預(yù)覽,該怎么開啟或者關(guān)閉預(yù)覽面板呢?下面我們就來看看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)閉,該怎么操作呢?下面我們就來看看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)簽字,該怎么操作呢?下面我們就來看看VSCode關(guān)閉總是簽字的技巧2023-10-16VS Code怎么開啟緊湊視圖? VSCode設(shè)置緊密檢視的技巧
VS Code怎么開啟緊湊視圖?VS Code中可以設(shè)置視圖樣式,該怎么使用緊湊樣式呢?下面我們就來看看VSCode設(shè)置緊密檢視的技巧2023-10-16VS Code單元焦點(diǎn)指示器槽怎么設(shè)置?
VS Code單元焦點(diǎn)指示器槽怎么設(shè)置?VS Code中想要設(shè)置單元焦點(diǎn)指示器槽的位置上,該怎么設(shè)置呢?詳細(xì)請看下文介紹2023-10-16VSCode怎么設(shè)置不顯示空值? VSCode不顯示空值的設(shè)置技巧
VSCode怎么設(shè)置不顯示空值?VSCode中的空值也會顯示,想要不顯示空值,該怎么操作呢?下面我們就來看看Visual Studio Code設(shè)置不顯示空值的方法2023-11-27VSCode導(dǎo)航欄怎么顯示函數(shù)? VSCode設(shè)置顯示函數(shù)的方法
VSCode導(dǎo)航欄怎么顯示函數(shù)?VSCode中的函數(shù)很常用,想要顯示在導(dǎo)航欄,該怎么操作呢?下面我們就來看看VSCode設(shè)置顯示函數(shù)的方法2023-11-27