VsCode自从诞生以来,以其各自优异的特性迅速走红。尤其是对于前端开发小伙伴来说,几乎成为必不可少的开发工具。所以,熟练掌握VsCode的各自使用技巧与调试技巧会让你的日常开发工作效率倍增。本文将会以大量图文的方式,从下面几个方面详细介绍VsCode的各种技巧:
基本技巧快速启动VsCode安装后,会自动写入环境变量,终端输入code即可唤起VsCode应用程序。 常用快捷键
垂直标尺在配置文件中添加如下配置,可以增加字符数标尺辅助线 'editor.rulers': [40, 80, 100] 进阶技巧断点的基本使用下面以在VsCode中快速调试一个Node项目为例,演示断点的基本使用。后文会继续结束各种高级断点。
program字段用于指定你的程序入口文件,${workspaceFolder}表示当前项目根路径
浮窗的操作按钮功能依次为:
日志断点日志断点是普通断点的一种变体,区别在于不会中断调试,而是可以把信息记录到控制台。日志断点对于调试无法暂停或停止的服务时特别有用。步骤如下:
可以使用{}使用变量,比如在此处添加日志断点,b的值为${b}
表达式条件断点条件断点是表达式结果为true时才会进行断点,步骤如下:
命中计数断点只有该行代码命中了指定次数,才会进行断点。步骤如下:
内联断点仅当执行到达与内联断点关联的列时,才会命中内联断点。这在调试在一行中包含多个语句的缩小代码时特别有用。比如for循环,短路运算符等一行代码包含多个表达式时会特别有用。步骤如下:
补充知识点:数据面板介绍
补充知识点:监听面板介绍可以将变量添加到监听面板,实时观察变量的变化。
补充知识点:调试服务器时打开一个URI开发 Web 程序通常需要在 Web 浏览器中打开特定 URL,以便在调试器中访问服务器代码。VS Code 有一个内置功能“ serverReadyAction ”来自动化这个任务。
{ '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。
终局:各场景调试实战调试NodeJS项目关于NodeJs项目的调试方法,已经在上述的断点的基本使用部分做了介绍,可以网上滚动翻阅。 调试Typescript项目
补充知识点:tasks配置文件的创建方式
补充知识点:每次调试时重新编译
注意,如果编译后的js文件不在相应的位置,通过图中的outFiles字段可以指定ts编译后的js路径。
补充知识点:VsCode的TS版本说明
修改工作区ts版本的方法:
调试html项目学会了上述ts的调试后,我们尝试调试html文件,并且html文件中引入ts文件:
<!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>
{ // 使用 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}' } ]}
调试Vue项目的两种方式下面介绍两种调试vue2项目的3种方法,其他框架的调试也类似: 不使用vscode插件Debugger for 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' } ]}
该脚本的作用是运行npm run serve编译命令。
注意:此方式的主要点在于launch.json配置文件中,通过preLaunchTask字段指定调试前先运行一个任务脚本,preLaunchTask的值对应tasks.json文件中的label值。 更多详细内容,大家可以点击这里的参考文档查阅。 借助vscode插件Debugger for Chrome在Chrome中调试
module.exports = { configureWebpack: { // 生成sourceMaps devtool: 'source-map' }};
更多详细内容,请点击这里的参考文档查阅。 借助vscode插件Debugger for Firfox在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}/' }] } ]}
调试Electron项目Electron很多人都使用过,主要用于开发跨平台的系统桌面应用。那么来看下vue-cli-electron-builder创建的Electron项目怎么调试。步骤如下:
{ '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复合任务执行前先执行的脚本。
在主进程相关代码上打上断点,然后启动调试主进程命令就可以调试主进程了 注意,这里的options参数是根据实际的情况,自定义添加我们运行项目时所需要的参数,比如我这里因为启动项目的npm命令是: 'serve-local:dev': 'cross-env VUE_APP_TYPE=local VUE_APP_ENV=dev vue-cli-service electron:serve'
切换到渲染进程的调试选项,在渲染进程的代码处打上断点,点击调试。注意,此时并不会有断点终端,需要ctrl+r手动刷新软件进程才会看到渲染进程的断点。
同时开启渲染进程和主进程的调试,只需要切换到调试全部的选项即可。注意,此种方式因为compounds[].configurations配置是并行执行的,并不一定能保证渲染进程调试一定能附加到主进程调试成功(估计是时机问题),有些时候会调试渲染进程不成功。所以,可以采取上面的方式进行调试。 更多调试Electron的内容,可以点击参考文档查阅。 补充:更进一步
其他技巧技巧一:代码片段(snippets)从扩展商店中安装snippets
创建全局代码片段
{ '自动补全console.log': { 'scope': 'javascript,typescript', 'prefix': 'log', 'body': [ 'console.log('$1');', '$2' ], 'description': '输出console.log('')' }}
用两个竖线包含多个选择值,|多个选择值直接用逗号隔开| 'body': [ 'console.log('${1:abc}');', '${2|aaa,bbb,ccc|}'], 新建当前工作区的代码片段只需要选择文件 -> 首选项 -> 用户片段 -> 新建xxx文件夹的代码片段, 新建后会在当前工作区生成.vscode/xxx.code-snippets文件 技巧二:Emmetvscode内置了对Emmet的支持,无需额外扩展。例如html的Emmet演示如下: 技巧三:对光标处代码变量快速重命名选中或者光标所处的位置,按F2可以对所有的变量重命名 技巧四:代码重构建议
补充:VsCode扩展插件开发VsCode扩展插件可以做什么事情?
基于Yeoman快速开发VsCode插件,步骤如下:
|
|