欧美bbbwbbbw肥妇,免费乱码人妻系列日韩,一级黄片

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

csdn   發(fā)布時(shí)間:2023-12-22 12:01:52   作者:小明的學(xué)習(xí)圈子   我要評論
VSCode是一款開源免費(fèi)的跨平臺文本編輯器,它的可擴(kuò)展性和豐富的功能使得它成為了許多程序員的首選編輯器,在本文中,我將分享一些VSCode的使用技巧,幫助您更高效地使用它

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.jsonlabel值,一定要相同,注意大小寫。該字段的作用是在執(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)文章

最新評論