VsCode自从诞生以来,以其各自优异的特性迅速走红。尤其是对于前端开发小伙伴来说,几乎成为必不可少的开发工具。所以,熟练掌握VsCode的各自使用技巧与调试技巧会让你的日常开发工作效率倍增。本文将会以大量图文的方式,从下面几个方面详细介绍VsCode的各种技巧:
第一部分主要介绍VsCode的基本技巧,比如常用快捷键、辅助标尺等。熟悉此部分的可以直接跳过。
第二部分主要各种断点(比如日志断点、内联断点、表达式断点等等)、数据面板等等
第三部分主要讲解各种项目的调试实战,比如Node程序、TS程序、Vue程序、Electron程序、Html等的调试实战
最后一部分将会讲解其他有用的技巧,比如代码片段、重构、Emmet等等
基本技巧
快速启动
VsCode安装后,会自动写入环境变量,终端输入code
即可唤起VsCode应用程序。
常用快捷键
ctrl + p
快速搜索文件并跳转,添加:
可以跳转到指定行
![99917bcb831dda7360e37ce3cae39e67.png](https://i-blog.csdnimg.cn/blog_migrate/1b7761ed0959b7b7ab27daea347a3253.png)
ctrl + shift + p
根据您当前的上下文访问所有可用命令。ctrl + shift + c
在外部打开终端并定位到当前项目路径ctrl + 按键1左边的符号
显示隐藏终端面板Ctrl+B
切换侧边栏Ctrl+\
快速拆分文件编辑alt + 单机左键
添加多处光标alt + shift + 单击左键
同一列所有位置添加光标alt + shift + 鼠标选择
选择相同开始和结束的区域
![d5d30b2802cf193909437e3c9770b2a3.png](https://i-blog.csdnimg.cn/blog_migrate/65339e269391cc52f22b1c8117d63778.png)
alt + 上键或下键
将当前行或者选中的区域上移/下移一行
垂直标尺
在配置文件中添加如下配置,可以增加字符数标尺辅助线
"editor.rulers": [40, 80, 100]
复制代码
![7a9a0426e6064f18db210063d9d23740.png](https://i-blog.csdnimg.cn/blog_migrate/0b651470b5c87f440e064551e251ba0e.png)
进阶技巧
断点的基本使用
下面以在VsCode中快速调试一个Node项目为例,演示断点的基本使用。后文会继续结束各种高级断点。
创建一个基本的node项目为Nodejs
打开左侧调试面板,选择你要调试的node项目名称,添加调试配置
![0616f0dfc56335331a9f50bfb4b58115.png](https://i-blog.csdnimg.cn/blog_migrate/244c5e908d4206aa93cf28a418dafd0c.png)
选择调试的项目类型为Node.js
![87cc0f894019c97e501ad08019fcf350.png](https://i-blog.csdnimg.cn/blog_migrate/a23cbe88833cca71d3999b5ea383d3af.png)
打开生成的.vscode/launch.json文件,指定程序入口文件
program
字段用于指定你的程序入口文件,${workspaceFolder}
表示当前项目根路径
![8e23d70ff622e6852a2d717af323276e.png](https://i-blog.csdnimg.cn/blog_migrate/f3e5b9555a2d2780ff3e12d06a1e3b3a.png)
在程序中添加断点,只需要点击左侧的边栏即可添加断点
![4bd4557a7749af718785611f5e015651.png](https://i-blog.csdnimg.cn/blog_migrate/804cbc47e7274e11c2f20e815f50cc4d.png)
按
F5
开始调试,成功调试会有浮窗操作栏
![81abbe8d2ffaeeeb892ecc8d51b0d03c.png](https://i-blog.csdnimg.cn/blog_migrate/6488bc63a06b4d85343c6f8ce8e31a02.png)
浮窗的操作按钮功能依次为:
继续(
F5
)、调试下一步(
F10
)、单步跳入(
F11
)、单步跳出(
Shift F11
)、重新调试(
Ctrl + Shift + F5
)、结束调试(
Shift + F5
)
日志断点
日志断点是普通断点的一种变体,区别在于不会中断调试,而是可以把信息记录到控制台。日志断点对于调试无法暂停或停止的服务时特别有用。步骤如下:
添加日志断点的步骤
![017b92c7ba7049a225188b565dbecc2f.png](https://i-blog.csdnimg.cn/blog_migrate/15be44bf10ce1389c257841441ce0b91.png)
输入要日志断点的信息,点击回车添加完成
可以使用{}
使用变量,比如在此处添加日志断点,b的值为${b}
![daf0c54c2e0985b95730122db61bc628.png](https://i-blog.csdnimg.cn/blog_migrate/81be0903cfa9fc0a10ab4dfedbb9c439.png)
日志断点添加成功后会有是一个菱形图标
![e95cfb7202b950335ae6099cc7401b9f.png](https://i-blog.csdnimg.cn/blog_migrate/b5f13b03c38613b53ba734c5a5de16f1.png)
按
F5
运行查看调试结果
![4c59974364124b5e2eb7b74972872a88.png](https://i-blog.csdnimg.cn/blog_migrate/6245689dd7dcbec2c8aa1af48e222a6c.png)
表达式条件断点
条件断点是表达式结果为true
时才会进行断点,步骤如下:
在代码行左侧右击,也可以添加断点,此处选择添加条件断点
![a4078531f938a36ac6fbe77034ccd556.png](https://i-blog.csdnimg.cn/blog_migrate/42b121be7647a34da8e59120ea399f56.png)
填写表达式,按回车键
![3bf8fa869d14e04a10f0b4815491e8e9.png](https://i-blog.csdnimg.cn/blog_migrate/ab99905488235173d04dfd9441148086.png)
添加成功的小图标如下
![295d72dce0733303c5891258b09ab12d.png](https://i-blog.csdnimg.cn/blog_migrate/7e893be78792007a77ca53430cb8325c.png)
按
F5
调试,条件成立所以进行了断点
![2f074b4f77e5f9a64dc47fc11c9c6966.png](https://i-blog.csdnimg.cn/blog_migrate/0da010e64fba63f8d813ea5b2ab477d5.png)
命中计数断点
只有该行代码命中了指定次数,才会进行断点。步骤如下:
选择条件断点,切换为命中次数选项,填写命中次数
![909e30c725868aaadcdd4873854522db.png](https://i-blog.csdnimg.cn/blog_migrate/a3ee204dae9e898ee83877013fff1959.png)
填写成功如下图所示
![658617039194c916e533cb56afc5cfc8.png](https://i-blog.csdnimg.cn/blog_migrate/bc851134847c46341426f79a43055e03.png)
按
F5
调试,如图所示,index为9时才中断
![020341769be7b3655865131b5de1e15b.png](https://i-blog.csdnimg.cn/blog_migrate/70aeb9e87ef1b111bb9d0016f22efb08.png)
内联断点
仅当执行到达与内联断点关联的列时,才会命中内联断点。这在调试在一行中包含多个语句的缩小代码时特别有用。比如for循环,短路运算符等一行代码包含多个表达式时会特别有用。步骤如下:
在指定位置按
Shift + F9
![bf1c026193357c3d04e2e5cb64ad2658.png](https://i-blog.csdnimg.cn/blog_migrate/1faccb72412e8bdb9cbb9993091e5a73.png)
调试之后,每次运行到该内联处的代码都会中断
![95a0fa905afa3ed8833561ec5c106374.png](https://i-blog.csdnimg.cn/blog_migrate/aca1caf385dbe25323a3e90f10991545.png)
补充知识点:数据面板介绍
数据面板可以查看所有变量
![07269dd721a571ba92742de943a9b455.png](https://i-blog.csdnimg.cn/blog_migrate/e46d7392403e4bff160e45d17a1a8d0e.png)
在变量上点击右键,可以设置变量值、复制变量值等操作
![b4fda57e1123b4f6e31d027542943f94.png](https://i-blog.csdnimg.cn/blog_migrate/169b44baf8f1863f973ca7b70bbb1caa.png)
聚焦于数据面板时,可以通过键入值来搜索过滤。点击下图所示按钮可以控制是否筛选。
![a71f970c52e83f56c8702534b8ef8aa8.png](https://i-blog.csdnimg.cn/blog_migrate/c7154580daf701f5fc1a0e45f6545d3a.png)
![3f6e0f637a1411543095dde82ef47644.png](https://i-blog.csdnimg.cn/blog_migrate/9920ed22123d9013dc75de6a2d7f513f.png)
补充知识点:监听面板介绍
可以将变量添加到监听面板,实时观察变量的变化。
在变量面板通过右键选择“添加到监视”将变量添加到监听面板
![b193d939b7becd5808c8067b03eaf786.png](https://i-blog.csdnimg.cn/blog_migrate/3e7f941e67d0666b643a3b3f724818a2.png)
也可以直接在监听面板选择添加按钮进行变量添加
![5994d473ba207f814b900d170e945cb5.png](https://i-blog.csdnimg.cn/blog_migrate/0b3ad68c56822de8bf0ee60632726833.png)
添加变量后就可以实时监听变量的变化
![5e9926b58da3e8c79b57e469c3d1dc9b.png](https://i-blog.csdnimg.cn/blog_migrate/e0dbad66bf9056a2784c72e1b6ddbbfa.png)
补充知识点:调试服务器时打开一个URI
开发 Web 程序通常需要在 Web 浏览器中打开特定 URL,以便在调试器中访问服务器代码。VS Code 有一个内置功能“ serverReadyAction ”来自动化这个任务。
一段简单的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
是设置匹配的程度端口号,端口号放在小括号内,即作为一个正则的捕获组使用。uriFormat
映射为URI,其中%s
使用pattern
中的第一个捕获组替换。最后使用该URI作为外部程序打开的URI。
按
F5
调试,会自动打开浏览器,且会在下图所示处中断,当继续执行后,浏览器才能看到输出了server的内容
![86c1628d3e5f526b077cefd90ee96bee.png](https://i-blog.csdnimg.cn/blog_migrate/b9fbf0d4b6f7837ccb3866343c4ce28b.png)
终局:各场景调试实战
调试NodeJS项目
关于NodeJs项目的调试方法,已经在上述的断点的基本使用[1]部分做了介绍,可以网上滚动翻阅。
调试Typescript项目
调试TS项目前,先创建一个TS项目
# 终端运行 tsc --init 复制代码
VS Code 内置了对 Ts 调试的支持。为了支持调试 Ts 与正在执行的 Js 代码相结合,VS Code 依赖于调试器的source map在 Ts 源代码和正在运行的 Js 之间进行映射,所以需要需要开启
sourceMap
选项。{ "sourceMap": true, "outDir": "./out" } 复制代码
const num: number = 123; console.log(num); function fn(arg: string): void { console.log('fn', arg); } fn("Hello"); 复制代码
新建index.ts文件,写一个基本的ts代码
打开
tsconfig.json
文件,开启sourceMap选项和指定编译后输出的路径先初始化一个ts程序,生成默认的
tsconfig.json
文件
手动编译调试TS
在上述的ts基本项目中:
image.png image.png image.png image.png 按
F5
或者运行 -> 启动调试
,此时可以看到可以正常debug调试在index.ts中随意添加一个断点
此时可以看到生成了out文件夹,里面包含一个
index.js
和一个index.js.map
文件终端执行ts的编译命令
tsc
通过构建任务构建调试TS
image.png image.png 注意,如果你使用的是其他终端(比如
cmder
)的话,有可能会生成不了,如下图所示,使用默认的powershell即可:image.png 调试的话和上述步骤一样,在有了编译后的文件后,按
F5
即可选择
tsc构建选项
,此时可以看到自动生成了编译文件按
Ctrl+Shift+B
或选择终端 -> 运行生成任务
,此时会弹出一个下拉菜单
监视改变并实时编译
image.png image.png 如下图所示,会实时编译
按
Ctrl + Shift + B
选择监视选项,可以实时监视文件内容发生变化,重新编译
补充知识点:tasks配置文件的创建方式
方法1:点击
终端 -> 配置任务 -> 选择任务
可以生成对应的tasks.json配置
![922b0428f9d3f4848bf9584abe27b526.png](https://i-blog.csdnimg.cn/blog_migrate/e691215e2d651711cd3e699759ab9749.png)
![8771f8b478f99871236d6cb98944a209.png](https://i-blog.csdnimg.cn/blog_migrate/232d8693406ed22a4b789e9ee078e9ba.png)
方法2:点击
终端 -> 运行生成任务 -> 点击设置图标
也可以生成对应的tasks.json配置
![b2dc89fe9532d72fb5e7b5c682bdb29c.png](https://i-blog.csdnimg.cn/blog_migrate/233b1bad2dae59c287af7d290aaedf46.png)
![e759d386fbceab7f065fa369486e8124.png](https://i-blog.csdnimg.cn/blog_migrate/282134b53238d82dd7a4d95a45d88613.png)
补充知识点:每次调试时重新编译
按上述的操作已经生成了task.json配置文件
{
"version": "2.0.0",
"tasks": [
{
"type": "typescript",
"tsconfig": "tsconfig.json",
"problemMatcher": [
"$tsc"
],
"group": "build",
"label": "tsc: 构建 - tsconfig.json"
}
]
}
复制代码
点击
运行 -> 添加配置 -> 选择nodejs
![5218dd593550f30ce1c94c66945bdda2.png](https://i-blog.csdnimg.cn/blog_migrate/89b68c39d59593033d325eb8d44ea8c5.png)
在生成的
launch.json
文件中,添加preLaunchTask
字段,值是tasks.json
的label
值,一定要相同,注意大小写。该字段的作用是在执行命令前先执行改task
任务。
![7857a72aab47344ba024ff66e1d2c2cc.png](https://i-blog.csdnimg.cn/blog_migrate/76fac57f3d6ccf445dcaf88a18414530.png)
注意,如果编译后的js文件不在相应的位置,通过图中的outFiles
字段可以指定ts
编译后的js
路径。
在
index.ts
文件中按F5
启动调试,可以看到调试前已经生成了编译文件,而后就可以正常调试了。
![9404bf5874892556e459f7f057593d13.png](https://i-blog.csdnimg.cn/blog_migrate/0a09970be97277442a1a1d4db243b7ac.png)
补充知识点:VsCode的TS版本说明
vscode本身内置了对ts的支持
vscode内置的ts版本(即工作区版本),仅仅用于IntelliSense(代码提示),工作区ts版本与用于编译的ts版本无任何关系。
修改工作区ts版本的方法:
在状态栏选择typescript的图标,选择版本切换
![112a94455aaa802c61ae47d3c037ba79.png](https://i-blog.csdnimg.cn/blog_migrate/2f0270c28b467dd1cb5b562af317d4df.png)
选择你需要的版本即可
![77340413fdc80dd1aed549ce4cf12c47.png](https://i-blog.csdnimg.cn/blog_migrate/e5184c4a0bec036c6d35159a685012d1.png)
![2878ac979d8b2ff662183e5f4d081d05.png](https://i-blog.csdnimg.cn/blog_migrate/19e1b5e85d7623907634d3d55e211776.png)
调试html项目
学会了上述ts的调试后,我们尝试调试html文件,并且html文件中引入ts文件:
创建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>
复制代码
ts源文件如下:
const num: number = 1221;
console.log(num);
function fn(arg: string): void {
console.log('fn', arg);
}
document.body.append('World')
fn("he");
复制代码
打debug
![41de756c46d372e6612f7a517b29871f.png](https://i-blog.csdnimg.cn/blog_migrate/f194b447368e38204b111190774685b2.png)
launch.json启动命令配置
{
// 使用 IntelliSense 了解相关属性。
// 悬停以查看现有属性的描述。
// 欲了解更多信息,请访问: 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: 构建 - tsconfig.json",
"webRoot": "${workspaceFolder}"
}
]
}
复制代码
选择我们的启动命令
![675d1c02a6ed03c57036a71999e4006f.png](https://i-blog.csdnimg.cn/blog_migrate/c84f5beff3eb6f39dbc83e6ff9e8def0.png)
按
F5
可以正常唤起chrome浏览器,并在vscode的ts源码处会有debug效果
调试Vue项目的两种方式
下面介绍两种调试vue2项目的3种方法,其他框架的调试也类似:
不使用vscode插件Debugger for chrome的方法
初始化vue项目,配置
vue.config.js
,指定要生成sourceMaps资源
module.exports = {
configureWebpack: {
// 生成sourceMaps
devtool: "source-map"
}
};
复制代码
根目录下创建
./vscode/launch.json文件
或者选择运行 -> 添加配置 -> Chrome
![e42f73f111c85bf12173f626fd18463d.png](https://i-blog.csdnimg.cn/blog_migrate/d52fadf802f6a153bc33d6e1d00c1a5e.png)
{
"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"
}
]
}
复制代码
添加任务脚本
{
"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
}
}
]
}
复制代码
该脚本的作用是运行npm run serve
编译命令。
按
F5
启动调试即可
注意:此方式的主要点在于launch.json
配置文件中,通过preLaunchTask
字段指定调试前先运行一个任务脚本,preLaunchTask
的值对应tasks.json
文件中的label
值。
更多详细内容,大家可以点击这里的参考文档[2]查阅。
借助vscode插件Debugger for Chrome在Chrome中调试
第一步还是初始化vue项目,添加
vue.config.js
文件配置,指定要生成sourceMaps资源
module.exports = {
configureWebpack: {
// 生成sourceMaps
devtool: "source-map"
}
};
复制代码
vscode中扩展中安装
Debugger for Chrome
插件,并确保没有禁用插件
![8843290430c580f52873cec1cd02c914.png](https://i-blog.csdnimg.cn/blog_migrate/808a12b8ba614aa8287ffac8cbd88af2.png)
手动启动项目的运行, 此方式不需要配置
tasks.json
任务
# 终端执行命令,启动项目
npm run serve
复制代码
按
F5
启动调试即可
![abeefb15b805b76ff0dc7dbe7c30b456.png](https://i-blog.csdnimg.cn/blog_migrate/aabba65b5f8bafdc6ec69e0f388dc506.png)
更多详细内容,请点击这里的参考文档[3]查阅。
借助vscode插件Debugger for Firfox
在Firefox中调试
和
Debugger for Chrome
基本一样,区别在于安装Debugger for Firfox
插件,并在launch.json配置中,增加调试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}/" }]
}
]
}
复制代码
调试时选择对应的调试命令即可
![57c1f3b4bda90e7234e65c91b498f023.png](https://i-blog.csdnimg.cn/blog_migrate/b47404a2fc26c97c5fb92f804379610d.png)
Firefox初始启动时不会触发调试,需要刷新一次
调试Electron项目
Electron很多人都使用过,主要用于开发跨平台的系统桌面应用。那么来看下vue-cli-electron-builder
创建的Electron
项目怎么调试。步骤如下:
在初始化项目后,首先修改
vue.config.js
文件配置,增加sourceMaps配置:
module.exports = {
configureWebpack: {
devtool: 'source-map'
}
}
复制代码
创建调试配置
.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"]
}
]
}
复制代码
此处配置了两个调试命令: Electron: Main
用于调试主进程,Electron: Renderer
用于调试渲染进程;compounds[].
选项用于定义复合调试选项; configurations
定义的复合命令是并行的; preLaunchTask
用于配置命令执行前先执行的任务脚本,其值对应tasks.json
中的label
字段; preLaunchTask
用在compounds
时,用于定义configurations
复合任务执行前先执行的脚本。
创建任务脚本
{
// 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\\."
}
}
}
]
}
复制代码
启动调试
在主进程相关代码上打上断点,然后启动调试主进程命令就可以调试主进程了
![e0b1ebfaa0b5085e094c875b558e8d3b.png](https://i-blog.csdnimg.cn/blog_migrate/06453802203aa6bcc83e92a7774e98df.png)
注意,这里的options
参数是根据实际的情况,自定义添加我们运行项目时所需要的参数,比如我这里因为启动项目的npm命令是:
"serve-local:dev": "cross-env VUE_APP_TYPE=local VUE_APP_ENV=dev vue-cli-service electron:serve"
复制代码
主进程调试成功
![795de7eb470e2f369cd0d032d2c60f70.png](https://i-blog.csdnimg.cn/blog_migrate/4bd6a93a98b04aca9b036ed77564475d.png)
开始调试渲染进程
切换到渲染进程的调试选项,在渲染进程的代码处打上断点,点击调试。注意,此时并不会有断点终端,需要ctrl+r
手动刷新软件进程才会看到渲染进程的断点。
![724f7dc995e120e8462499bfc4ee69bf.png](https://i-blog.csdnimg.cn/blog_migrate/378b6dee5c1376899493cc3bb5aee879.png)
刷新渲染进程后的效果,如下图,已经进入了断点
![b2190bf78f2fd20a83807b762c1ab0aa.png](https://i-blog.csdnimg.cn/blog_migrate/c829dee3753b7ef8d1004ed84788e571.png)
另一种方式
同时开启渲染进程和主进程的调试,只需要切换到调试全部的选项即可。注意,此种方式因为compounds[].configurations
配置是并行执行的,并不一定能保证渲染进程调试一定能附加到主进程调试成功(估计是时机问题),有些时候会调试渲染进程不成功。所以,可以采取上面的方式进行调试。
![9c342d6d97376825f6e5db759527d7bc.png](https://i-blog.csdnimg.cn/blog_migrate/fee63890facdc8c07bf871bf2f634a41.png)
更多调试Electron的内容,可以点击参考文档[4]查阅。
补充:更进一步
VS调试React app文档[5]
VS调试Next.js文档[6]
更多...[7]
其他技巧
技巧一:代码片段(snippets)
从扩展商店中安装snippets
@category:"snippets"
复制代码
![ca2197c11f7ccb07ab36539c4237030f.png](https://i-blog.csdnimg.cn/blog_migrate/4a93239b60e73e640ef8d34d56e533bd.png)
创建全局代码片段
选择
文件 -> 首选项 -> 用户片段
选择
新建全局代码片段文件
![d37b9a51470b512ba99987431c42bd0c.png](https://i-blog.csdnimg.cn/blog_migrate/9b5f234a81fbc42b5bc98223af72dfba.png)
添加代码片段文件的文件名称,会生成
.code-snippets
后缀的文件定义用户片段
{
"自动补全console.log": {
"scope": "javascript,typescript",
"prefix": "log",
"body": [
"console.log('$1');",
"$2"
],
"description": "输出console.log('')"
}
}
复制代码
关键词 | 类型 | 说明 |
---|---|---|
scope | string | 代码片段生效的作用域,可以是多个语言,比如javascript,typescript 表示在js和ts生效,不加scope 字段表示对所有文件类型生效 |
prefix | `string | string[]` |
body | string[] | 代码片段内容,数组的每一项会是一行 |
description | string | IntelliSense 显示的片段的可选描述 |
1−1 - 1−n | - | 定义光标的位置,光标根据数字大小按tab依次跳转;注意$0 是特殊值,表示光标退出的位置,是最后的光标位置。 |
在键盘输入
log
时效果如下
![c3fbe73526badc3369f224e1f4db878b.png](https://i-blog.csdnimg.cn/blog_migrate/c223b3d9bfa17540374a23cc259255b7.png)
指定光标处的默认值并选中
"body": [
"console.log('${1:abc}');"
],
复制代码
![dfc5f72504ffaee138c0b28c04edb7e5.png](https://i-blog.csdnimg.cn/blog_migrate/7f41af5bad20b1e7d1b3ff331bda2f00.png)
指定光标处的默认值有多个,并提供下拉选择
用两个竖线包含多个选择值,|多个选择值直接用逗号隔开|
"body": [
"console.log('${1:abc}');",
"${2|aaa,bbb,ccc|}"
],
复制代码
![c2abf9ba96ffb994e8c9e95e995047bd.png](https://i-blog.csdnimg.cn/blog_migrate/78403a10ab93aec6bb229c178a844991.png)
新建当前工作区的代码片段
只需要选择文件 \-> 首选项 \-> 用户片段 \-> 新建xxx文件夹的代码片段
, 新建后会在当前工作区生成.vscode/xxx.code-snippets
文件
![71ed10a00f338ee23a89390a60861515.png](https://i-blog.csdnimg.cn/blog_migrate/219f05866013dea76b00a33859922eec.png)
技巧二:Emmet
vscode内置了对Emmet的支持,无需额外扩展。例如html的Emmet演示如下:
![1d6397ec792c1d010830624bfefb51ab.png](https://i-blog.csdnimg.cn/blog_migrate/562c1e55b176f9c480bac6c53e245422.png)
技巧三:对光标处代码变量快速重命名
选中或者光标所处的位置,按F2
可以对所有的变量重命名
![04bad01e6b24afc90e45d76e104fac1d.png](https://i-blog.csdnimg.cn/blog_migrate/25643a073a54e983a807ca90f4797d6b.png)
技巧四:代码重构建议
选中要重构的代码,点击出现的黄色小灯的图标
![fb8668bc9e0108cc77edad97ae4567c4.png](https://i-blog.csdnimg.cn/blog_migrate/47626e3c5ba3e7a6676d188f3f2957ae.png)
选中重构的类型
![889ebad13e6362bcaa408d4f5e2b85a7.png](https://i-blog.csdnimg.cn/blog_migrate/f4ba856e7e1010cdb79690e7d1e9f08c.png)
输入新的变量名
![36ddb3448193e19f14147b9a2307669e.png](https://i-blog.csdnimg.cn/blog_migrate/659eef2b5612794063d326bec47138f7.png)
还可以重构到函数
![ce2607c26212dcfbc65282f8a03ebfeb.png](https://i-blog.csdnimg.cn/blog_migrate/02573013f248b36f00774f8f481ffe29.png)
TS中还可以提取接口等等
![11e5f436a097813e44d7c163a2525aee.png](https://i-blog.csdnimg.cn/blog_migrate/cf3876c2b711a1b3732630dbfdaf8a7c.png)
补充:VsCode扩展插件开发
VsCode扩展插件可以做什么事情?
定制主题、文件图标
扩展工作台功能
创建webView
自定义新的语言提示
支持调试特定的runtime
基于Yeoman
快速开发VsCode插件,步骤如下:
安装
Yeoman
和用于生成模板的插件VS Code Extension Generator[8]
# 终端运行,主要node版本需要12及以上,node10会安装报错
npm i -g yo generator-code
复制代码
运行
yo code
创建命令,选择要生成的项目模板。这里演示New extension
![83aed7aa32f7e8566072de280277fcad.png](https://i-blog.csdnimg.cn/blog_migrate/df6bb37582484876faffa0e320a91829.png)
根据提示依次选择
![28347ad03828a1ae059e4e91e6c17ef3.png](https://i-blog.csdnimg.cn/blog_migrate/75529d2196023d623f4ad50882082949.png)
生成的内容如下
![fbf193a714a2e93a4a8f6b3560ac012e.png](https://i-blog.csdnimg.cn/blog_migrate/1c74f30f927201ca5e9206a5ed43b023.png)
按
F5
生成编译项目,此时会自动打开一个新窗口在新窗口按
Ctrl+Shfit+P
,输入Hello World
命令
![d6b4d84aec748fdac65b95f529dcdedf.png](https://i-blog.csdnimg.cn/blog_migrate/a13566843f7591c9acf56428649c8cf5.png)
此时会弹出一个弹窗的效果
![79f7a4b32e66ccb9629160f90d832515.png](https://i-blog.csdnimg.cn/blog_migrate/b9af2763dd44dcec897196e151b1fbea.png)
至此,一个最简单的插件就完成
关于本文
来源:愣锤
https://juejin.cn/post/7071146744339234846