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

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

• 類型：編譯工具
• 大?。?/span>102MB
• 語(yǔ)言：簡(jiǎn)體中文
• 時(shí)間：2025-04-17

查看詳情

• 第一部分主要介紹VsCode的基本技巧，比如常用快捷鍵、輔助標(biāo)尺等。熟悉此部分的可以直接跳過(guò)。
• 第二部分主要各種斷點(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)
• 最后一部分將會(huì)講解其他有用的技巧，比如代碼片段、重構(gòu)、Emmet等等

基本技巧

快速啟動(dòng)

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

常用快捷鍵

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

• ctrl + shift + p 根據(jù)您當(dāng)前的上下文訪問(wèn)所有可用命令。
• ctrl + shift + c在外部打開(kāi)終端并定位到當(dāng)前項(xiàng)目路徑
• ctrl + 按鍵1左邊的符號(hào)顯示隱藏終端面板
• Ctrl+B 切換側(cè)邊欄
• Ctrl+\ 快速拆分文件編輯
• alt + 單機(jī)左鍵 添加多處光標(biāo)
• alt + shift + 單擊左鍵 同一列所有位置添加光標(biāo)
• alt + shift + 鼠標(biāo)選擇 選擇相同開(kāi)始和結(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)的基本使用。后文會(huì)繼續(xù)結(jié)束各種高級(jí)斷點(diǎn)。

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

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

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

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

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

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

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

• 繼續(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ū)別在于不會(huì)中斷調(diào)試，而是可以把信息記錄到控制臺(tái)。日志斷點(diǎn)對(duì)于調(diào)試無(wú)法暫?；蛲Ｖ沟姆?wù)時(shí)特別有用。步驟如下:

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

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

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

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

最新評(píng)論