VsCode快捷键高级使用

admin管理员组

文章数量:1539828

VsCode自从诞生以来，以其各自优异的特性迅速走红。尤其是对于前端开发小伙伴来说，几乎成为必不可少的开发工具。所以，熟练掌握VsCode的各自使用技巧与调试技巧会让你的日常开发工作效率倍增。本文将会以大量图文的方式，从下面几个方面详细介绍VsCode的各种技巧：

• 第一部分主要介绍VsCode的基本技巧，比如常用快捷键、辅助标尺等。熟悉此部分的可以直接跳过。
• 第二部分主要各种断点（比如日志断点、内联断点、表达式断点等等）、数据面板等等
• 第三部分主要讲解各种项目的调试实战，比如Node程序、TS程序、Vue程序、Electron程序、Html等的调试实战
• 最后一部分将会讲解其他有用的技巧，比如代码片段、重构、Emmet等等

基本技巧

快速启动

VsCode安装后，会自动写入环境变量，终端输入code即可唤起VsCode应用程序。

常用快捷键

• ctrl + p快速搜索文件并跳转，添加:可以跳转到指定行

image.png

• ctrl + shift + p 根据您当前的上下文访问所有可用命令。
• ctrl + shift + c在外部打开终端并定位到当前项目路径
• ctrl + 按键1左边的符号显示隐藏终端面板
• Ctrl+B 切换侧边栏
• Ctrl+\ 快速拆分文件编辑
• alt + 单机左键 添加多处光标
• alt + shift + 单击左键 同一列所有位置添加光标
• alt + shift + 鼠标选择 选择相同开始和结束的区域

image.png

• alt + 上键或下键 将当前行或者选中的区域上移/下移一行

垂直标尺

在配置文件中添加如下配置，可以增加字符数标尺辅助线

"editor.rulers": [40, 80, 100]
复制代码

image.png

进阶技巧

断点的基本使用

下面以在VsCode中快速调试一个Node项目为例，演示断点的基本使用。后文会继续结束各种高级断点。

• 创建一个基本的node项目为Nodejs
• 打开左侧调试面板，选择你要调试的node项目名称，添加调试配置

image.png

• 选择调试的项目类型为Node.js

image.png

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

program字段用于指定你的程序入口文件，${workspaceFolder}表示当前项目根路径

image.png

• 在程序中添加断点，只需要点击左侧的边栏即可添加断点

[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-ML49ce4J-1649214049990)(data:image/gif;base64,iVBORw0KGgoAAAANSUhEUgAAAAEAAAABCAYAAAAfFcSJAAAADUlEQVQImWNgYGBgAAAABQABh6FO1AAAAABJRU5ErkJggg==)]image.png

• 按F5开始调试，成功调试会有浮窗操作栏

[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-kxsfa7fb-1649214049991)(data:image/gif;base64,iVBORw0KGgoAAAANSUhEUgAAAAEAAAABCAYAAAAfFcSJAAAADUlEQVQImWNgYGBgAAAABQABh6FO1AAAAABJRU5ErkJggg==)]image.png

浮窗的操作按钮功能依次为：

• 继续(F5)、
• 调试下一步(F10)、
• 单步跳入(F11)、
• 单步跳出(Shift F11)、
• 重新调试(Ctrl + Shift + F5)、
• 结束调试(Shift + F5)

日志断点

日志断点是普通断点的一种变体，区别在于不会中断调试，而是可以把信息记录到控制台。日志断点对于调试无法暂停或停止的服务时特别有用。步骤如下:

• 添加日志断点的步骤

image.png

• 输入要日志断点的信息，点击回车添加完成

可以使用{}使用变量，比如在此处添加日志断点，b的值为${b}

image.png

• 日志断点添加成功后会有是一个菱形图标

image.png

• 按F5运行查看调试结果

image.png

表达式条件断点

条件断点是表达式结果为true时才会进行断点，步骤如下:

• 在代码行左侧右击，也可以添加断点，此处选择添加条件断点

[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-Byj7zz1B-1649214049994)(data:image/gif;base64,iVBORw0KGgoAAAANSUhEUgAAAAEAAAABCAYAAAAfFcSJAAAADUlEQVQImWNgYGBgAAAABQABh6FO1AAAAABJRU5ErkJggg==)]image.png

• 填写表达式，按回车键

[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-EL4yaSiU-1649214049995)(data:image/gif;base64,iVBORw0KGgoAAAANSUhEUgAAAAEAAAABCAYAAAAfFcSJAAAADUlEQVQImWNgYGBgAAAABQABh6FO1AAAAABJRU5ErkJggg==)]image.png

• 添加成功的小图标如下

[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-Os5OZ6IJ-1649214049995)(data:image/gif;base64,iVBORw0KGgoAAAANSUhEUgAAAAEAAAABCAYAAAAfFcSJAAAADUlEQVQImWNgYGBgAAAABQABh6FO1AAAAABJRU5ErkJggg==)]image.png

• 按F5调试，条件成立所以进行了断点

[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-3tpScaCI-1649214049996)(data:image/gif;base64,iVBORw0KGgoAAAANSUhEUgAAAAEAAAABCAYAAAAfFcSJAAAADUlEQVQImWNgYGBgAAAABQABh6FO1AAAAABJRU5ErkJggg==)]image.png

命中计数断点

只有该行代码命中了指定次数，才会进行断点。步骤如下:

• 选择条件断点，切换为命中次数选项，填写命中次数

image.png

• 填写成功如下图所示

image.png

• 按F5调试，如图所示，index为9时才中断

image.png

内联断点

仅当执行到达与内联断点关联的列时，才会命中内联断点。这在调试在一行中包含多个语句的缩小代码时特别有用。比如for循环，短路运算符等一行代码包含多个表达式时会特别有用。步骤如下:

• 在指定位置按Shift + F9

[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-iXwFIoAD-1649214049997)(data:image/gif;base64,iVBORw0KGgoAAAANSUhEUgAAAAEAAAABCAYAAAAfFcSJAAAADUlEQVQImWNgYGBgAAAABQABh6FO1AAAAABJRU5ErkJggg==)]image.png

• 调试之后，每次运行到该内联处的代码都会中断

[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-EgSBvQZU-1649214049997)(data:image/gif;base64,iVBORw0KGgoAAAANSUhEUgAAAAEAAAABCAYAAAAfFcSJAAAADUlEQVQImWNgYGBgAAAABQABh6FO1AAAAABJRU5ErkJggg==)]image.png

补充知识点：数据面板介绍

• 数据面板可以查看所有变量

[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-NAaLeNGT-1649214049998)(data:image/gif;base64,iVBORw0KGgoAAAANSUhEUgAAAAEAAAABCAYAAAAfFcSJAAAADUlEQVQImWNgYGBgAAAABQABh6FO1AAAAABJRU5ErkJggg==)]image.png

• 在变量上点击右键，可以设置变量值、复制变量值等操作

[外链图片转存失

本文标签： 快捷键高级VSCode