【吐血總結(jié)】VSCode的調(diào)試和使用小技巧，讓你開發(fā)工作效率倍增

本篇文章給大家總結(jié)分享一些vscode各場景高級調(diào)試與使用技巧，讓你的日常開發(fā)工作效率倍增，希望對大家有所幫助！

vscode自從誕生以來，以其各自優(yōu)異的特性迅速走紅。尤其是對于前端開發(fā)小伙伴來說，幾乎成為必不可少的開發(fā)工具。所以，熟練掌握VsCode的各自使用技巧與調(diào)試技巧會讓你的日常開發(fā)工作效率倍增。本文將會以大量圖文的方式，從下面幾個方面詳細(xì)介紹VsCode的各種技巧：

• 第一部分主要介紹VsCode的基本技巧，比如常用快捷鍵、輔助標(biāo)尺等。熟悉此部分的可以直接跳過?！就扑]學(xué)習(xí)：《vscode》】
• 第二部分主要各種斷點(diǎn)（比如日志斷點(diǎn)、內(nèi)聯(lián)斷點(diǎn)、表達(dá)式斷點(diǎn)等等）、數(shù)據(jù)面板等等
• 第三部分主要講解各種項目的調(diào)試實(shí)戰(zhàn)，比如Node程序、TS程序、Vue程序、electron程序、html等的調(diào)試實(shí)戰(zhàn)
• 最后一部分將會講解其他有用的技巧，比如代碼片段、重構(gòu)、Emmet等等

基本技巧

快速啟動

VsCode安裝后，會自動寫入環(huán)境變量，終端輸入code即可喚起VsCode應(yīng)用程序。

常用快捷鍵

• ctrl + p快速搜索文件并跳轉(zhuǎn)，添加:可以跳轉(zhuǎn)到指定行

• ctrl + shift + p 根據(jù)您當(dāng)前的上下文訪問所有可用命令。

• ctrl + shift + c在外部打開終端并定位到當(dā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]

進(jìn)階技巧

斷點(diǎn)的基本使用

下面以在VsCode中快速調(diào)試一個Node項目為例，演示斷點(diǎn)的基本使用。后文會繼續(xù)結(jié)束各種高級斷點(diǎn)。

• 創(chuàng)建一個基本的node項目為NodeJS
• 打開左側(cè)調(diào)試面板，選擇你要調(diào)試的node項目名稱，添加調(diào)試配置

• 選擇調(diào)試的項目類型為node.js

• 打開生成的.vscode/launch.json文件，指定程序入口文件

program字段用于指定你的程序入口文件，${workspaceFolder}表示當(dā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)試無法暫?；蛲Ｖ沟姆?wù)時特別有用。步驟如下:

• 添加日志斷點(diǎn)的步驟

• 輸入要日志斷點(diǎn)的信息，點(diǎn)擊回車添加完成

可以使用{}使用變量，比如在此處添加日志斷點(diǎn)，b的值為$

• 日志斷點(diǎn)添加成功后會有是一個菱形圖標(biāo)

• 按F5運(yùn)行查看調(diào)試結(jié)果

表達(dá)式條件斷點(diǎn)

條件斷點(diǎn)是表達(dá)式結(jié)果為true時才會進(jìn)行斷點(diǎn)，步驟如下:

• 在代碼行左側(cè)右擊，也可以添加斷點(diǎn)，此處選擇添加條件斷點(diǎn)

• 填寫表達(dá)式，按回車鍵

• 添加成功的小圖標(biāo)如下

• 按F5調(diào)試，條件成立所以進(jìn)行了斷點(diǎn)

命中計數(shù)斷點(diǎn)

只有該行代碼命中了指定次數(shù)，才會進(jìn)行斷點(diǎn)。步驟如下:

• 選擇條件斷點(diǎn)，切換為命中次數(shù)選項，填寫命中次數(shù)

• 填寫成功如下圖所示

• 按F5調(diào)試，如圖所示，index為9時才中斷

內(nèi)聯(lián)斷點(diǎn)

僅當(dāng)執(zhí)行到達(dá)與內(nèi)聯(lián)斷點(diǎn)關(guān)聯(lián)的列時，才會命中內(nèi)聯(lián)斷點(diǎn)。這在調(diào)試在一行中包含多個語句的縮小代碼時特別有用。比如for循環(huán)，短路運(yùn)算符等一行代碼包含多個表達(dá)式時會特別有用。步驟如下:

• 在指定位置按Shift + F9

• 調(diào)試之后，每次運(yùn)行到該內(nèi)聯(lián)處的代碼都會中斷

補(bǔ)充知識點(diǎn)：數(shù)據(jù)面板介紹

• 數(shù)據(jù)面板可以查看所有變量

• 在變量上點(diǎn)擊右鍵，可以設(shè)置變量值、復(fù)制變量值等操作

• 聚焦于數(shù)據(jù)面板時，可以通過鍵入值來搜索過濾。點(diǎn)擊下圖所示按鈕可以控制是否篩選。

補(bǔ)充知識點(diǎn)：監(jiān)聽面板介紹

可以將變量添加到監(jiān)聽面板，實(shí)時觀察變量的變化。

• 在變量面板通過右鍵選擇“添加到監(jiān)視”將變量添加到監(jiān)聽面板

• 也可以直接在監(jiān)聽面板選擇添加按鈕進(jìn)行變量添加

• 添加變量后就可以實(shí)時監(jiān)聽變量的變化

補(bǔ)充知識點(diǎn)：調(diào)試服務(wù)器時打開一個URI

開發(fā) Web 程序通常需要在 Web 瀏覽器中打開特定 URL，以便在調(diào)試器中訪問服務(wù)器代碼。VS Code 有一個內(nèi)置功能“ serverReadyAction ”來自動化這個任務(wù)。

• 一段簡單的server代碼

var?express?=?require('express'); var?app?=?express();  app.get('/',?function(req,?res)?{ ??res.send('Hello?World!'); });  app.listen(3000,?function()?{ ??console.log('Example?app?listening?on?port?3000!'); });

• 配置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" ??} }

pattern是設(shè)置匹配的程度端口號，端口號放在小括號內(nèi)，即作為一個正則的捕獲組使用。uriFormat映射為URI，其中%s使用pattern中的第一個捕獲組替換。最后使用該URI作為外部程序打開的URI。

• 按F5調(diào)試，會自動打開瀏覽器，且會在下圖所示處中斷，當(dāng)繼續(xù)執(zhí)行后，瀏覽器才能看到輸出了server的內(nèi)容

終局：各場景調(diào)試實(shí)戰(zhàn)

調(diào)試NodeJS項目

關(guān)于NodeJs項目的調(diào)試方法，已經(jīng)在上述的斷點(diǎn)的基本使用部分做了介紹，可以網(wǎng)上滾動翻閱。

調(diào)試typescript項目

• 調(diào)試TS項目前，先創(chuàng)建一個TS項目

  • 先初始化一個ts程序，生成默認(rèn)的tsconfig.json文件

  #?終端運(yùn)行 tsc?--init
  • 打開tsconfig.json文件，開啟sourcemap選項和指定編譯后輸出的路徑

  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選項。

  { ????"sourceMap":?true, ????"outDir":?"./out" }
  • 新建index.ts文件，寫一個基本的ts代碼

  const?num:?number?=?123; console.log(num);  function?fn(arg:?string):?void?{ ??console.log('fn',?arg); }  fn("Hello");

• 手動編譯調(diào)試TS

  在上述的ts基本項目中：

  • 終端執(zhí)行ts的編譯命令tsc

  

  • 此時可以看到生成了out文件夾，里面包含一個index.js和一個index.js.map文件

  

  • 在index.ts中隨意添加一個斷點(diǎn)

  

  • 按F5或者運(yùn)行 -> 啟動調(diào)試，此時可以看到可以正常debug調(diào)試

  

• 通過構(gòu)建任務(wù)構(gòu)建調(diào)試TS

  • 按Ctrl+Shift+B或選擇終端 -> 運(yùn)行生成任務(wù)，此時會彈出一個下拉菜單

  

  • 選擇tsc構(gòu)建選項，此時可以看到自動生成了編譯文件

  

  注意，如果你使用的是其他終端(比如cmder)的話，有可能會生成不了，如下圖所示，使用默認(rèn)的powershell即可：

  

  • 調(diào)試的話和上述步驟一樣，在有了編譯后的文件后，按F5即可

• 監(jiān)視改變并實(shí)時編譯

  • 按Ctrl + Shift + B選擇監(jiān)視選項，可以實(shí)時監(jiān)視文件內(nèi)容發(fā)生變化，重新編譯

  

  • 如下圖所示，會實(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)試時重新編譯

• 按上述的操作已經(jīng)生成了task.json配置文件

{ 	"version":?"2.0.0", 	"tasks":?[ ????{ ??????"type":?"typescript", ??????"tsconfig":?"tsconfig.json", ??????"problemMatcher":?[ ????????"$tsc" ??????], ??????"group":?"build", ??????"label":?"tsc:?構(gòu)建?-?tsconfig.json" ????} ??] }

• 點(diǎn)擊運(yùn)行 -> 添加配置 -> 選擇nodejs

• 在生成的launch.json文件中，添加preLaunchTask字段，值是tasks.json的label值，一定要相同，注意大小寫。該字段的作用是在執(zhí)行命令前先執(zhí)行改task任務(wù)。

注意，如果編譯后的js文件不在相應(yīng)的位置，通過圖中的outFiles字段可以指定ts編譯后的js路徑。

• 在index.ts文件中按F5啟動調(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項目

學(xué)會了上述ts的調(diào)試后，我們嘗試調(diào)試html文件，并且html文件中引入ts文件:

• 創(chuàng)建html，引入ts編譯后的js文件

nbsp;html&gt;   ??<meta> ??<meta> ??<meta> ??<title>Document</title> ??<h3>Hello</h3> ??<script></script>

• ts源文件如下：

const?num:?number?=??1221; console.log(num);  function?fn(arg:?string):?void?{ ??console.log('fn',?arg); }  document.body.append('World')  fn("he");

• 打debug

• launch.json啟動命令配置

{ ??//?使用?IntelliSense?了解相關(guān)屬性。? ??//?懸停以查看現(xiàn)有屬性的描述。 ??//?欲了解更多信息，請訪問:?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}" ????} ??] }

• 選擇我們的啟動命令

• 按F5可以正常喚起chrome瀏覽器，并在vscode的ts源碼處會有debug效果

調(diào)試Vue項目的兩種方式

下面介紹兩種調(diào)試vue2項目的3種方法，其他框架的調(diào)試也類似：

不使用vscode插件Debugger for chrome的方法

• 初始化vue項目，配置vue.config.js，指定要生成sourceMaps資源

module.exports?=?{ ??configureWebpack:?{ ????//?生成sourceMaps ????devtool:?"source-map" ??} };

• 根目錄下創(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_webpack_":?"${workspaceFolder}" ??????}, ??????"sourceMapPathOverrides":?{ ????????"webpack:/*":?"${webRoot}/*", ????????"/./*":?"${webRoot}/*", ????????"/src/*":?"${webRoot}/*", ????????"/*":?"*", ????????"/./~/*":?"${webRoot}/node_modules/*" ??????}, ??????"preLaunchTask":?"serve" ????} ??] }

• 添加任務(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 ??????} ????} ??] }

該腳本的作用是運(yùn)行npm run serve編譯命令。

• 按F5啟動調(diào)試即可

注意：此方式的主要點(diǎn)在于launch.json配置文件中，通過preLaunchTask字段指定調(diào)試前先運(yùn)行一個任務(wù)腳本，preLaunchTask的值對應(yīng)tasks.json文件中的label值。

更多詳細(xì)內(nèi)容，大家可以點(diǎn)擊這里的參考文檔查閱。https://github.com/microsoft/vscode-recipes/tree/main/vuejs-cli

借助vscode插件Debugger for Chrome在Chrome中調(diào)試

• 第一步還是初始化vue項目，添加vue.config.js文件配置，指定要生成sourceMaps資源

module.exports?=?{ ??configureWebpack:?{ ????//?生成sourceMaps ????devtool:?"source-map" ??} };

• vscode中擴(kuò)展中安裝Debugger for Chrome插件，并確保沒有禁用插件

• 手動啟動項目的運(yùn)行, 此方式不需要配置tasks.json任務(wù)

#?終端執(zhí)行命令，啟動項目 npm?run?serve

• 按F5啟動調(diào)試即可

更多詳細(xì)內(nèi)容，請點(diǎn)擊這里的參考文檔查閱。

https://vuejs.org/v2/cookbook/debugging-in-vscode.html

借助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":?"webpack:///src/",?"path":?"${webRoot}/"?}] ????} ??] }

• 調(diào)試時選擇對應(yīng)的調(diào)試命令即可

Firefox初始啟動時不會觸發(fā)調(diào)試，需要刷新一次

調(diào)試Electron項目

Electron很多人都使用過，主要用于開發(fā)跨平臺的系統(tǒng)桌面應(yīng)用。那么來看下vue-cli-electron-builder創(chuàng)建的Electron項目怎么調(diào)試。步驟如下：

• 在初始化項目后，首先修改vue.config.js文件配置，增加sourceMaps配置：

module.exports?=?{ ??configureWebpack:?{ ????devtool:?'source-map' ??} }

• 創(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":?{ ????????"webpack:///./src/*":?"${webRoot}/*" ??????} ????}, ??], ??"compounds":?[ ????{ ??????"name":?"Electron:?All", ??????"configurations":?["Electron:?Main",?"Electron:?Renderer"] ????} ??] }

此處配置了兩個調(diào)試命令: Electron: Main用于調(diào)試主進(jìn)程，Electron: Renderer用于調(diào)試渲染進(jìn)程；compounds[].選項用于定義復(fù)合調(diào)試選項; configurations定義的復(fù)合命令是并行的; preLaunchTask用于配置命令執(zhí)行前先執(zhí)行的任務(wù)腳本，其值對應(yīng)tasks.json中的label字段; preLaunchTask用在compounds時，用于定義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." ????????} ??????} ????} ??] }

• 啟動調(diào)試

在主進(jìn)程相關(guān)代碼上打上斷點(diǎn)，然后啟動調(diào)試主進(jìn)程命令就可以調(diào)試主進(jìn)程了

注意，這里的options參數(shù)是根據(jù)實(shí)際的情況，自定義添加我們運(yùn)行項目時所需要的參數(shù)，比如我這里因?yàn)閱禹椖康膎pm命令是:

"serve-local:dev":?"cross-env?VUE_APP_TYPE=local?VUE_APP_ENV=dev?vue-cli-service?electron:serve"

• 主進(jìn)程調(diào)試成功

• 開始調(diào)試渲染進(jìn)程

切換到渲染進(jìn)程的調(diào)試選項，在渲染進(jìn)程的代碼處打上斷點(diǎn)，點(diǎn)擊調(diào)試。注意，此時并不會有斷點(diǎn)終端，需要ctrl+r手動刷新軟件進(jìn)程才會看到渲染進(jìn)程的斷點(diǎn)。

• 刷新渲染進(jìn)程后的效果，如下圖，已經(jīng)進(jìn)入了斷點(diǎn)

• 另一種方式

同時開啟渲染進(jìn)程和主進(jìn)程的調(diào)試，只需要切換到調(diào)試全部的選項即可。注意，此種方式因?yàn)閏ompounds[].configurations配置是并行執(zhí)行的，并不一定能保證渲染進(jìn)程調(diào)試一定能附加到主進(jìn)程調(diào)試成功（估計是時機(jī)問題），有些時候會調(diào)試渲染進(jìn)程不成功。所以，可以采取上面的方式進(jìn)行調(diào)試。

更多調(diào)試Electron的內(nèi)容，可以點(diǎn)擊參考文檔查閱。 https://nklayman.github.io/vue-cli-plugin-electron-builder/guide/recipes.html#debugging-with-vscode  補(bǔ)充：更進(jìn)一步： VS調(diào)試React?app文檔（https://medium.com/@auchenberg/live-edit-and-debug-your-react-apps-directly-from-vs-code-without-leaving-the-editor-3da489ed905f） VS調(diào)試Next.js文檔（https://github.com/microsoft/vscode-recipes/tree/main/Next-js） 更多...（https://code.visualstudio.com/docs/nodejs/debugging-recipes）

其他技巧

技巧一：代碼片段（snippets）

從擴(kuò)展商店中安裝snippets

@category:"snippets"

創(chuàng)建全局代碼片段

• 選擇文件 -> 首選項 -> 用戶片段
• 選擇新建全局代碼片段文件

• 添加代碼片段文件的文件名稱，會生成.code-snippets后綴的文件

• 定義用戶片段

{ ??"自動補(bǔ)全console.log":?{ ????"scope":?"JavaScript,typescript", ??????"prefix":?"log", ??????"body":?[ ????????"console.log('$1');", ????????"$2" ??????], ????"description":?"輸出console.log('')" ??} }

• 在鍵盤輸入log時效果如下

• 指定光標(biāo)處的默認(rèn)值并選中

"body":?[ ??"console.log('${1:abc}');" ],

• 指定光標(biāo)處的默認(rèn)值有多個，并提供下拉選擇

用兩個豎線包含多個選擇值，|多個選擇值直接用逗號隔開|

"body":?[ ??"console.log('${1:abc}');", ??"${2|aaa,bbb,ccc|}" ],

新建當(dāng)前工作區(qū)的代碼片段

只需要選擇文件 -> 首選項 -> 用戶片段 -> 新建xxx文件夾的代碼片段, 新建后會在當(dāng)前工作區(qū)生成.vscode/xxx.code-snippets文件

技巧二：Emmet

vscode內(nèi)置了對Emmet的支持，無需額外擴(kuò)展。例如html的Emmet演示如下:

技巧三：對光標(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（https://www.npmjs.com/package/generator-code）

#?終端運(yùn)行，主要node版本需要12及以上，node10會安裝報錯 npm?i?-g?yo?generator-code

• 運(yùn)行yo code創(chuàng)建命令，選擇要生成的項目模板。這里演示New extension

• 根據(jù)提示依次選擇

• 生成的內(nèi)容如下

• 按F5生成編譯項目，此時會自動打開一個新窗口
• 在新窗口按Ctrl+Shfit+P,輸入Hello World命令

• 此時會彈出一個彈窗的效果

• 至此，一個最簡單的插件就完成了

更多關(guān)于VSCode的相關(guān)知識，請訪問：vscode??！