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

Visual Studio Code跨平臺代碼編輯器 v1.99.3 64位 官方中文安裝版

• 類型：編譯工具
• 大小：102MB
• 語言：簡體中文
• 時間：2025-04-17

查看詳情

• 第一部分主要介紹VsCode的基本技巧，比如常用快捷鍵、輔助標尺等。熟悉此部分的可以直接跳過。
• 第二部分主要各種斷點(比如日志斷點、內(nèi)聯(lián)斷點、表達式斷點等等)、數(shù)據(jù)面板等等
• 第三部分主要講解各種項目的調(diào)試實戰(zhàn)，比如Node程序、TS程序、Vue程序、Electron程序、Html等的調(diào)試實戰(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 + 單機左鍵 添加多處光標
• alt + shift + 單擊左鍵 同一列所有位置添加光標
• alt + shift + 鼠標選擇 選擇相同開始和結(jié)束的區(qū)域

• alt + 上鍵或下鍵 將當(dāng)前行或者選中的區(qū)域上移/下移一行 垂直標尺

在配置文件中添加如下配置，可以增加字符數(shù)標尺輔助線

"editor.rulers": [40, 80, 100]
復(fù)制代碼

進階技巧

斷點的基本使用

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

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

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

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

program字段用于指定你的程序入口文件，${workspaceFolder}表示當(dāng)前項目根路徑

在程序中添加斷點，只需要點擊左側(cè)的邊欄即可添加斷點

按F5開始調(diào)試，成功調(diào)試會有浮窗操作欄

浮窗的操作按鈕功能依次為：

• 繼續(xù)(F5)、
• 調(diào)試下一步(F10)、
• 單步跳入(F11)、
• 單步跳出(Shift F11)、
• 重新調(diào)試(Ctrl + Shift + F5)、
• 結(jié)束調(diào)試(Shift + F5)

日志斷點

日志斷點是普通斷點的一種變體，區(qū)別在于不會中斷調(diào)試，而是可以把信息記錄到控制臺。日志斷點對于調(diào)試無法暫停或停止的服務(wù)時特別有用。步驟如下:

• 添加日志斷點的步驟

• 輸入要日志斷點的信息，點擊回車添加完成

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

• 日志斷點添加成功后會有是一個菱形圖標

最新評論