建站
咨詢(xún)
售后
建站咨詢(xún)
新聞中心
VsCode自從誕生以來(lái)，以其各自?xún)?yōu)異的特性迅速走紅。尤其是對(duì)于前端開(kāi)發(fā)小伙伴來(lái)說(shuō)，幾乎成為必不可少的開(kāi)發(fā)工具。所以，熟練掌握VsCode的各自使用技巧與調(diào)試技巧會(huì)讓你的日常開(kāi)發(fā)工作效率倍增。
本文將會(huì)以大量圖文的方式，從下面幾個(gè)方面詳細(xì)介紹VsCode的各種技巧：
- 第一部分主要介紹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]
進(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)目名稱(chēng)，添加調(diào)試配置。
- 選擇調(diào)試的項(xiàng)目類(lèi)型為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)
- 按F5運(yùn)行查看調(diào)試結(jié)果
表達(dá)式條件斷點(diǎn)
條件斷點(diǎn)是表達(dá)式結(jié)果為true時(shí)才會(huì)進(jìn)行斷點(diǎn)，步驟如下:
- 在代碼行左側(cè)右擊，也可以添加斷點(diǎn)，此處選擇添加條件斷點(diǎn)。
- 填寫(xiě)表達(dá)式，按回車(chē)鍵
- 添加成功的小圖標(biāo)如下
- 按F5調(diào)試，條件成立所以進(jìn)行了斷點(diǎn)
命中計(jì)數(shù)斷點(diǎn)
只有該行代碼命中了指定次數(shù)，才會(huì)進(jìn)行斷點(diǎn)。步驟如下:
- 選擇條件斷點(diǎn)，切換為命中次數(shù)選項(xiàng)，填寫(xiě)命中次數(shù)
- 填寫(xiě)成功如下圖所示
- 按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í)，才會(huì)命中內(nèi)聯(lián)斷點(diǎn)。這在調(diào)試在一行中包含多個(gè)語(yǔ)句的縮小代碼時(shí)特別有用。比如for循環(huán)，短路運(yùn)算符等一行代碼包含多個(gè)表達(dá)式時(shí)會(huì)特別有用。步驟如下:
- 在指定位置按Shift + F9
- 調(diào)試之后，每次運(yùn)行到該內(nèi)聯(lián)處的代碼都會(huì)中斷
補(bǔ)充知識(shí)點(diǎn)：數(shù)據(jù)面板介紹
- 數(shù)據(jù)面板可以查看所有變量
- 在變量上點(diǎn)擊右鍵，可以設(shè)置變量值、復(fù)制變量值等操作
- 聚焦于數(shù)據(jù)面板時(shí)，可以通過(guò)鍵入值來(lái)搜索過(guò)濾。點(diǎn)擊下圖所示按鈕可以控制是否篩選。
補(bǔ)充知識(shí)點(diǎn)：監(jiān)聽(tīng)面板介紹
可以將變量添加到監(jiān)聽(tīng)面板，實(shí)時(shí)觀察變量的變化。
- 在變量面板通過(guò)右鍵選擇“添加到監(jiān)視”將變量添加到監(jiān)聽(tīng)面板
- 也可以直接在監(jiān)聽(tīng)面板選擇添加按鈕進(jìn)行變量添加
- 添加變量后就可以實(shí)時(shí)監(jiān)聽(tīng)變量的變化
補(bǔ)充知識(shí)點(diǎn)：調(diào)試服務(wù)器時(shí)打開(kāi)一個(gè)URI
開(kāi)發(fā) Web 程序通常需要在 Web 瀏覽器中打開(kāi)特定 URL，以便在調(diào)試器中訪問(wèn)服務(wù)器代碼。VS Code 有一個(gè)內(nèi)置功能“ serverReadyAction ”來(lái)自動(dòng)化這個(gè)任務(wù)。
- 一段簡(jiǎn)單的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，以支持打開(kāi)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è)置匹配的程度端口號(hào)，端口號(hào)放在小括號(hào)內(nèi)，即作為一個(gè)正則的捕獲組使用。uriFormat映射為URI，其中%s使用pattern中的第一個(gè)捕獲組替換。最后使用該URI作為外部程序打開(kāi)的URI。
- 按F5調(diào)試，會(huì)自動(dòng)打開(kāi)瀏覽器，且會(huì)在下圖所示處中斷，當(dāng)繼續(xù)執(zhí)行后，瀏覽器才能看到輸出了server的內(nèi)容。
終局：各場(chǎng)景調(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
- 打開(kāi)tsconfig.json文件，開(kāi)啟sourceMap選項(xiàng)和指定編譯后輸出的路徑。
VS Code 內(nèi)置了對(duì) Ts 調(diào)試的支持。為了支持調(diào)試 Ts 與正在執(zhí)行的 Js 代碼相結(jié)合，VS Code 依賴(lài)于調(diào)試器的source map在 Ts 源代碼和正在運(yùn)行的 Js 之間進(jìn)行映射，所以需要需要開(kāi)啟sourceMap選項(xiàng)。
{
"sourceMap": true,
"outDir": "./out"
}- 新建index.ts文件，寫(xiě)一個(gè)基本的ts代碼
const num: number = 123;
console.log(num);
function fn(arg: string): void {
console.log('fn', arg);
}
fn("Hello");
- 手動(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)試
- 通過(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à)，有可能會(huì)生成不了，如下圖所示，使用默認(rèn)的powershell即可：
- 調(diào)試的話(huà)和上述步驟一樣，在有了編譯后的文件后，按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配置
補(bǔ)充知識(shí)點(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"
}
]
}- 點(diǎn)擊運(yùn)行 -> 添加配置 -> 選擇nodejs
- 在生成的launch.json文件中，添加preLaunchTask字段，值是tasks.json的label值，一定要相同，注意大小寫(xiě)。該字段的作用是在執(zhí)行命令前先執(zhí)行改task任務(wù)。
注意，如果編譯后的js文件不在相應(yīng)的位置，通過(guò)圖中的outFiles字段可以指定ts編譯后的js路徑。
- 在index.ts文件中按F5啟動(dòng)調(diào)試，可以看到調(diào)試前已經(jīng)生成了編譯文件，而后就可以正常調(diào)試了。
補(bǔ)充知識(shí)點(diǎn)：VsCode的TS版本說(shuō)明
- vscode本身內(nèi)置了對(duì)ts的支持
- vscode內(nèi)置的ts版本（即工作區(qū)版本），僅僅用于IntelliSense（代碼提示），工作區(qū)ts版本與用于編譯的ts版本無(wú)任何關(guān)系。
修改工作區(qū)ts版本的方法：
- 在狀態(tài)欄選擇typescript的圖標(biāo)，選擇版本切換
- 選擇你需要的版本即可
調(diào)試html項(xiàng)目
學(xué)會(huì)了上述ts的調(diào)試后，我們嘗試調(diào)試html文件，并且html文件中引入ts文件:
- 創(chuàng)建html，引入ts編譯后的js文件
Document
Hello
- 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啟動(dòng)命令配置
{
// 使用 IntelliSense 了解相關(guān)屬性。
// 懸停以查看現(xiàn)有屬性的描述。
// 欲了解更多信息，請(qǐng)?jiān)L問(wè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}"
}
]
}- 選擇我們的啟動(dòng)命令
- 按F5可以正常喚起chrome瀏覽器，并在vscode的ts源碼處會(huì)有debug效果
調(diào)試Vue項(xiàng)目的兩種方式
下面介紹兩種調(diào)試vue2項(xiàng)目的3種方法，其他框架的調(diào)試也類(lèi)似：
不使用vscode插件Debugger for chrome的方法
- 初始化vue項(xiàng)目，配置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啟動(dòng)調(diào)試即可
注意：此方式的主要點(diǎn)在于launch.json配置文件中，通過(guò)preLaunchTask字段指定調(diào)試前先運(yùn)行一個(gè)任務(wù)腳本，preLaunchTask的值對(duì)應(yīng)tasks.json文件中的label值。
更多詳細(xì)內(nèi)容，大家可以點(diǎn)擊這里的參考文檔查閱。
借助vscode插件Debugger for Chrome在Chrome中調(diào)試
- 第一步還是初始化vue項(xiàng)目，添加vue.config.js文件配置，指定要生成sourceMaps資源
module.exports = {
configureWebpack: {
// 生成sourceMaps
devtool: "source-map"
}
};- vscode中擴(kuò)展中安裝Debugger for Chrome插件，并確保沒(méi)有禁用插件
- 手動(dòng)啟動(dòng)項(xiàng)目的運(yùn)行, 此方式不需要配置tasks.json任務(wù)
# 終端執(zhí)行命令，啟動(dòng)項(xiàng)目
npm run serve
- 按F5啟動(dòng)調(diào)試即可
更多詳細(xì)內(nèi)容，請(qǐng)點(diǎn)擊這里的參考文檔查閱。
借助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)試時(shí)選擇對(duì)應(yīng)的調(diào)試命令即可
- Firefox初始啟動(dòng)時(shí)不會(huì)觸發(fā)調(diào)試，需要刷新一次
調(diào)試Electron項(xiàng)目
Electron很多人都使用過(guò)，主要用于開(kāi)發(fā)跨平臺(tái)的系統(tǒng)桌面應(yīng)用。那么來(lái)看下vue-cli-electron-builder創(chuàng)建的Electron項(xiàng)目怎么調(diào)試。步驟如下：
- 在初始化項(xiàng)目后，首先修改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"]
}
]
}此處配置了兩個(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ù)腳本，其值對(duì)應(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\\."
}
}
}
]
}- 啟動(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"
- 主進(jìn)程調(diào)試成功
- 開(kāi)始調(diào)試渲染進(jìn)程
切換到渲染進(jìn)程的調(diào)試選項(xiàng)，在渲染進(jìn)程的代碼處打上斷點(diǎn)，點(diǎn)擊調(diào)試。注意，此時(shí)并不會(huì)有斷點(diǎn)終端，需要ctrl+r手動(dòng)刷新軟件進(jìn)程才會(huì)看到渲染進(jìn)程的斷點(diǎn)。
- 刷新渲染進(jìn)程后的效果，如下圖，已經(jīng)進(jìn)入了斷點(diǎn)
- 另一種方式
同時(shí)開(kāi)啟渲染進(jìn)程和主進(jìn)程的調(diào)試，只需要切換到調(diào)試全部的選項(xiàng)即可。注意，此種方式因?yàn)閏ompounds[].configurations配置是并行執(zhí)行的，并不一定能保證渲染進(jìn)程調(diào)試一定能附加到主進(jìn)程調(diào)試成功（估計(jì)是時(shí)機(jī)問(wèn)題），有些時(shí)候會(huì)調(diào)試渲染進(jìn)程不成功。所以，可以采取上面的方式進(jìn)行調(diào)試。
更多調(diào)試Electron的內(nèi)容，可以點(diǎn)擊參考文檔查閱。
補(bǔ)充：更進(jìn)一步
- VS調(diào)試React app文檔
- VS調(diào)試Next.js文檔
- 更多...
其他技巧
技巧一：代碼片段（snippets）
從擴(kuò)展商店中安裝snippets
@category:"snippets"
創(chuàng)建全局代碼片段
- 選擇文件 -> 首選項(xiàng) -> 用戶(hù)片段
- 選擇新建全局代碼片段文件
- 添加代碼片段文件的文件名稱(chēng)，會(huì)生成.code-snippets后綴的文件
- 定義用戶(hù)片段
{
"自動(dòng)補(bǔ)全console.log": {
"scope": "javascript,typescript",
"prefix": "log",
"body": [
"console.log('$1');",
"$2"
],
"description": "輸出console.log('')"
}
}|
關(guān)鍵詞 |
類(lèi)型 |
說(shuō)明 |
|
scope |
? |
代碼片段生效的作用域，可以是多個(gè)語(yǔ)言，比如? |
|
prefix |
`string |
string[]` |
|
body |
? |
代碼片段內(nèi)容，數(shù)組的每一項(xiàng)會(huì)是一行 |
|
description |
? |
? |
|
1?n |
- |
定義光標(biāo)的位置，光標(biāo)根據(jù)數(shù)字大小按tab依次跳轉(zhuǎn)；注意? |
- 在鍵盤(pán)輸入log時(shí)效果如下
- 指定光標(biāo)處的默認(rèn)值并選中
"body": [
"console.log('${1:abc}');"
],
- 指定光標(biāo)處的默認(rèn)值有多個(gè)，并提供下拉選擇
用兩個(gè)豎線包含多個(gè)選擇值，|多個(gè)選擇值直接用逗號(hào)隔開(kāi)|
"body": [
"console.log('${1:abc}');",
"${2|aaa,bbb,ccc|}"
],
新建當(dāng)前工作區(qū)的代碼片段
只需要選擇文件 -> 首選項(xiàng) -> 用戶(hù)片段 -> 新建xxx文件夾的代碼片段, 新建后會(huì)在當(dāng)前工作區(qū)生成.vscode/xxx.code-snippets文件
技巧二：Emmet
vscode內(nèi)置了對(duì)Emmet的支持，無(wú)需額外擴(kuò)展。例如html的Emmet演示如下:
技巧三：對(duì)光標(biāo)處代碼變量快速重命名
選中或者光標(biāo)所處的位置，按F2可以對(duì)所有的變量重命名
技巧四：代碼重構(gòu)建議
- 選中要重構(gòu)的代碼，點(diǎn)擊出現(xiàn)的黃色小燈的圖標(biāo)
- 選中重構(gòu)的類(lèi)型
- 輸入新的變量名
- 還可以重構(gòu)到函數(shù)
- TS中還可以提取接口等等
補(bǔ)充：VsCode擴(kuò)展插件開(kāi)發(fā)
VsCode擴(kuò)展插件可以做什么事情？
- 定制主題、文件圖標(biāo)
- 擴(kuò)展工作臺(tái)功能
- 創(chuàng)建webView
- 自定義新的語(yǔ)言提示
- 支持調(diào)試特定的runtime
基于Yeoman快速開(kāi)發(fā)VsCode插件，步驟如下:
- 安裝Yeoman和用于生成模板的插件VS Code Extension Generator
# 終端運(yùn)行，主要node版本需要12及以上，node10會(huì)安裝報(bào)錯(cuò)
npm i -g yo generator-code
- 運(yùn)行yo code創(chuàng)建命令，選擇要生成的項(xiàng)目模板。這里演示New extension
- 根據(jù)提示依次選擇
- 生成的內(nèi)容如下
- 按F5生成編譯項(xiàng)目，此時(shí)會(huì)自動(dòng)打開(kāi)一個(gè)新窗口
- 在新窗口按Ctrl+Shfit+P,輸入Hello World命令
- 此時(shí)會(huì)彈出一個(gè)彈窗的效果
- 至此，一個(gè)最簡(jiǎn)單的插件就完成了
網(wǎng)站欄目：深入講解VsCode各場(chǎng)景高級(jí)調(diào)試與使用技巧
當(dāng)前URL：http://fisionsoft.com.cn/article/dpdgsie.html
