深入讲解VsCode各场景高级调试与使用技巧

这篇具有很好参考价值的文章主要介绍了深入讲解VsCode各场景高级调试与使用技巧。希望对大家有所帮助。如果存在错误或未考虑完全的地方,请大家不吝赐教,您也可以点击"举报违法"按钮提交疑问。

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

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

基本技巧

快速启动

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

常用快捷键

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

vscode调试怎么用,vscode,前端,javascript,html,css

  • ctrl + shift + p 根据您当前的上下文访问所有可用命令。

  • ctrl + shift + c在外部打开终端并定位到当前项目路径

  • ctrl + 按键1左边的符号显示隐藏终端面板

  • Ctrl+B 切换侧边栏

  • Ctrl+\ 快速拆分文件编辑

  • alt + 单机左键 添加多处光标

  • alt + shift + 单击左键 同一列所有位置添加光标

  • alt + shift + 鼠标选择 选择相同开始和结束的区域

vscode调试怎么用,vscode,前端,javascript,html,css

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

垂直标尺

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

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

vscode调试怎么用,vscode,前端,javascript,html,css

进阶技巧

断点的基本使用

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

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

vscode调试怎么用,vscode,前端,javascript,html,css

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

vscode调试怎么用,vscode,前端,javascript,html,css

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

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

vscode调试怎么用,vscode,前端,javascript,html,css

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

vscode调试怎么用,vscode,前端,javascript,html,css

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

vscode调试怎么用,vscode,前端,javascript,html,css

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

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

日志断点

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

  • 添加日志断点的步骤

vscode调试怎么用,vscode,前端,javascript,html,css

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

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

vscode调试怎么用,vscode,前端,javascript,html,css

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

vscode调试怎么用,vscode,前端,javascript,html,css

  • F5运行查看调试结果

vscode调试怎么用,vscode,前端,javascript,html,css

表达式条件断点

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

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

vscode调试怎么用,vscode,前端,javascript,html,css

  • 填写表达式,按回车键

vscode调试怎么用,vscode,前端,javascript,html,css

  • 添加成功的小图标如下

vscode调试怎么用,vscode,前端,javascript,html,css

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

vscode调试怎么用,vscode,前端,javascript,html,css

命中计数断点

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

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

vscode调试怎么用,vscode,前端,javascript,html,css

  • 填写成功如下图所示

vscode调试怎么用,vscode,前端,javascript,html,css

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

vscode调试怎么用,vscode,前端,javascript,html,css

内联断点

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

  • 在指定位置按Shift + F9

vscode调试怎么用,vscode,前端,javascript,html,css

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

vscode调试怎么用,vscode,前端,javascript,html,css

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

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

vscode调试怎么用,vscode,前端,javascript,html,css

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

vscode调试怎么用,vscode,前端,javascript,html,css

  • 聚焦于数据面板时,可以通过键入值来搜索过滤。点击下图所示按钮可以控制是否筛选。

vscode调试怎么用,vscode,前端,javascript,html,css

vscode调试怎么用,vscode,前端,javascript,html,css

补充知识点:监听面板介绍

可以将变量添加到监听面板,实时观察变量的变化。

  • 在变量面板通过右键选择“添加到监视”将变量添加到监听面板

vscode调试怎么用,vscode,前端,javascript,html,css

  • 也可以直接在监听面板选择添加按钮进行变量添加

vscode调试怎么用,vscode,前端,javascript,html,css

  • 添加变量后就可以实时监听变量的变化

vscode调试怎么用,vscode,前端,javascript,html,css

补充知识点:调试服务器时打开一个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的内容

vscode调试怎么用,vscode,前端,javascript,html,css

终局:各场景调试实战

调试NodeJS项目

关于NodeJs项目的调试方法,已经在上述的断点的基本使用部分做了介绍,可以网上滚动翻阅。

调试Typescript项目

  • 调试TS项目前,先创建一个TS项目

    • 先初始化一个ts程序,生成默认的tsconfig.json文件
    # 终端运行
    tsc --init
    复制代码
    • 打开tsconfig.json文件,开启sourceMap选项和指定编译后输出的路径

    VS Code 内置了对 Ts 调试的支持。为了支持调试 Ts 与正在执行的 Js 代码相结合,VS Code 依赖于调试器的source map在 Ts 源代码和正在运行的 Js 之间进行映射,所以需要需要开启sourceMap选项。

    {
        "sourceMap": true,
        "outDir": "./out"
    }
    复制代码
    • 新建index.ts文件,写一个基本的ts代码
    const num: number = 123;
    console.log(num);
    
    function fn(arg: string): void {
      console.log('fn', arg);
    }
    
    fn("Hello");
    复制代码
  • 手动编译调试TS

    在上述的ts基本项目中:

    • 终端执行ts的编译命令tsc

    vscode调试怎么用,vscode,前端,javascript,html,css

    • 此时可以看到生成了out文件夹,里面包含一个index.js和一个index.js.map文件

    vscode调试怎么用,vscode,前端,javascript,html,css

    • 在index.ts中随意添加一个断点

    vscode调试怎么用,vscode,前端,javascript,html,css

    • F5或者运行 -> 启动调试,此时可以看到可以正常debug调试

    vscode调试怎么用,vscode,前端,javascript,html,css

  • 通过构建任务构建调试TS

    • Ctrl+Shift+B或选择终端 -> 运行生成任务,此时会弹出一个下拉菜单

    vscode调试怎么用,vscode,前端,javascript,html,css

    • 选择tsc构建选项,此时可以看到自动生成了编译文件

    vscode调试怎么用,vscode,前端,javascript,html,css

    注意,如果你使用的是其他终端(比如cmder)的话,有可能会生成不了,如下图所示,使用默认的powershell即可:

    vscode调试怎么用,vscode,前端,javascript,html,css

    • 调试的话和上述步骤一样,在有了编译后的文件后,按F5即可
  • 监视改变并实时编译

    • Ctrl + Shift + B选择监视选项,可以实时监视文件内容发生变化,重新编译

    vscode调试怎么用,vscode,前端,javascript,html,css

    • 如下图所示,会实时编译

    vscode调试怎么用,vscode,前端,javascript,html,css

补充知识点:tasks配置文件的创建方式

  • 方法1:点击终端 -> 配置任务 -> 选择任务可以生成对应的tasks.json配置

vscode调试怎么用,vscode,前端,javascript,html,css

vscode调试怎么用,vscode,前端,javascript,html,css

  • 方法2:点击终端 -> 运行生成任务 -> 点击设置图标也可以生成对应的tasks.json配置

vscode调试怎么用,vscode,前端,javascript,html,css

vscode调试怎么用,vscode,前端,javascript,html,css

补充知识点:每次调试时重新编译

  • 按上述的操作已经生成了task.json配置文件
{
	"version": "2.0.0",
	"tasks": [
    {
      "type": "typescript",
      "tsconfig": "tsconfig.json",
      "problemMatcher": [
        "$tsc"
      ],
      "group": "build",
      "label": "tsc: 构建 - tsconfig.json"
    }
  ]
}
复制代码
  • 点击运行 -> 添加配置 -> 选择nodejs

vscode调试怎么用,vscode,前端,javascript,html,css

  • 在生成的launch.json文件中,添加preLaunchTask字段,值是tasks.jsonlabel值,一定要相同,注意大小写。该字段的作用是在执行命令前先执行改task任务。

vscode调试怎么用,vscode,前端,javascript,html,css

注意,如果编译后的js文件不在相应的位置,通过图中的outFiles字段可以指定ts编译后的js路径。

  • index.ts文件中按F5启动调试,可以看到调试前已经生成了编译文件,而后就可以正常调试了。

vscode调试怎么用,vscode,前端,javascript,html,css

补充知识点:VsCode的TS版本说明

  • vscode本身内置了对ts的支持

  • vscode内置的ts版本(即工作区版本),仅仅用于IntelliSense(代码提示),工作区ts版本与用于编译的ts版本无任何关系。

修改工作区ts版本的方法:

  • 在状态栏选择typescript的图标,选择版本切换

vscode调试怎么用,vscode,前端,javascript,html,css

  • 选择你需要的版本即可

vscode调试怎么用,vscode,前端,javascript,html,css

vscode调试怎么用,vscode,前端,javascript,html,css

调试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

vscode调试怎么用,vscode,前端,javascript,html,css

  • 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}"
    }
  ]
}
复制代码
  • 选择我们的启动命令

vscode调试怎么用,vscode,前端,javascript,html,css

  • 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

vscode调试怎么用,vscode,前端,javascript,html,css

{
  "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值。

更多详细内容,大家可以点击这里的参考文档查阅。

借助vscode插件Debugger for Chrome在Chrome中调试
  • 第一步还是初始化vue项目,添加vue.config.js文件配置,指定要生成sourceMaps资源
module.exports = {
  configureWebpack: {
    // 生成sourceMaps
    devtool: "source-map"
  }
};
复制代码
  • vscode中扩展中安装Debugger for Chrome插件,并确保没有禁用插件

vscode调试怎么用,vscode,前端,javascript,html,css

  • 手动启动项目的运行, 此方式不需要配置tasks.json任务
# 终端执行命令,启动项目
npm run serve
复制代码
  • F5启动调试即可

vscode调试怎么用,vscode,前端,javascript,html,css

更多详细内容,请点击这里的参考文档查阅。

借助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}/" }]
    }
  ]
}
复制代码
  • 调试时选择对应的调试命令即可

vscode调试怎么用,vscode,前端,javascript,html,css

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\\."
        }
      }
    }
  ]
}
复制代码
  • 启动调试

在主进程相关代码上打上断点,然后启动调试主进程命令就可以调试主进程了

vscode调试怎么用,vscode,前端,javascript,html,css

注意,这里的options参数是根据实际的情况,自定义添加我们运行项目时所需要的参数,比如我这里因为启动项目的npm命令是:

"serve-local:dev": "cross-env VUE_APP_TYPE=local VUE_APP_ENV=dev vue-cli-service electron:serve"
复制代码
  • 主进程调试成功

vscode调试怎么用,vscode,前端,javascript,html,css

  • 开始调试渲染进程

切换到渲染进程的调试选项,在渲染进程的代码处打上断点,点击调试。注意,此时并不会有断点终端,需要ctrl+r手动刷新软件进程才会看到渲染进程的断点。

vscode调试怎么用,vscode,前端,javascript,html,css

  • 刷新渲染进程后的效果,如下图,已经进入了断点

vscode调试怎么用,vscode,前端,javascript,html,css

  • 另一种方式

同时开启渲染进程和主进程的调试,只需要切换到调试全部的选项即可。注意,此种方式因为compounds[].configurations配置是并行执行的,并不一定能保证渲染进程调试一定能附加到主进程调试成功(估计是时机问题),有些时候会调试渲染进程不成功。所以,可以采取上面的方式进行调试。

vscode调试怎么用,vscode,前端,javascript,html,css

更多调试Electron的内容,可以点击参考文档查阅。

补充:更进一步
  • VS调试React app文档
  • VS调试Next.js文档
  • 更多...

其他技巧

技巧一:代码片段(snippets)

从扩展商店中安装snippets
@category:"snippets"
复制代码

vscode调试怎么用,vscode,前端,javascript,html,css

创建全局代码片段
  • 选择文件 -> 首选项 -> 用户片段
  • 选择新建全局代码片段文件

vscode调试怎么用,vscode,前端,javascript,html,css

  • 添加代码片段文件的文件名称,会生成.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[]` 定义一个或多个在 IntelliSense 中显示代码段的触发词
body string[] 代码片段内容,数组的每一项会是一行
description string IntelliSense 显示的片段的可选描述
1 − 1 - 1n - 定义光标的位置,光标根据数字大小按tab依次跳转;注意$0是特殊值,表示光标退出的位置,是最后的光标位置。
  • 在键盘输入log时效果如下

vscode调试怎么用,vscode,前端,javascript,html,css

  • 指定光标处的默认值并选中
"body": [
  "console.log('${1:abc}');"
],
复制代码

vscode调试怎么用,vscode,前端,javascript,html,css

  • 指定光标处的默认值有多个,并提供下拉选择

用两个竖线包含多个选择值,|多个选择值直接用逗号隔开|

"body": [
  "console.log('${1:abc}');",
  "${2|aaa,bbb,ccc|}"
],
复制代码

vscode调试怎么用,vscode,前端,javascript,html,css

新建当前工作区的代码片段

只需要选择文件 -> 首选项 -> 用户片段 -> 新建xxx文件夹的代码片段, 新建后会在当前工作区生成.vscode/xxx.code-snippets文件

vscode调试怎么用,vscode,前端,javascript,html,css

技巧二:Emmet

vscode内置了对Emmet的支持,无需额外扩展。例如html的Emmet演示如下:

技巧三:对光标处代码变量快速重命名

选中或者光标所处的位置,按F2可以对所有的变量重命名

vscode调试怎么用,vscode,前端,javascript,html,css

技巧四:代码重构建议

  • 选中要重构的代码,点击出现的黄色小灯的图标

vscode调试怎么用,vscode,前端,javascript,html,css

  • 选中重构的类型

vscode调试怎么用,vscode,前端,javascript,html,css

  • 输入新的变量名

vscode调试怎么用,vscode,前端,javascript,html,css

  • 还可以重构到函数

vscode调试怎么用,vscode,前端,javascript,html,css

  • TS中还可以提取接口等等

vscode调试怎么用,vscode,前端,javascript,html,css

补充:VsCode扩展插件开发

VsCode扩展插件可以做什么事情?

  • 定制主题、文件图标
  • 扩展工作台功能
  • 创建webView
  • 自定义新的语言提示
  • 支持调试特定的runtime

基于Yeoman快速开发VsCode插件,步骤如下:

  • 安装Yeoman和用于生成模板的插件VS Code Extension Generator
# 终端运行,主要node版本需要12及以上,node10会安装报错
npm i -g yo generator-code
复制代码
  • 运行yo code创建命令,选择要生成的项目模板。这里演示New extension

vscode调试怎么用,vscode,前端,javascript,html,css

  • 根据提示依次选择

vscode调试怎么用,vscode,前端,javascript,html,css

  • 生成的内容如下

vscode调试怎么用,vscode,前端,javascript,html,css

  • F5生成编译项目,此时会自动打开一个新窗口
  • 在新窗口按Ctrl+Shfit+P,输入Hello World命令

vscode调试怎么用,vscode,前端,javascript,html,css

  • 此时会弹出一个弹窗的效果

vscode调试怎么用,vscode,前端,javascript,html,css

  • 至此,一个最简单的插件就完成了

结束语

我是你们的老朋友愣锤,小伙伴们如果喜欢上面的内容,欢迎点赞收藏以供后续学习。转载注明作者: 愣锤。

同时推荐如下内容阅读:文章来源地址https://www.toymoban.com/news/detail-735208.html

  • awesome-canvas - 中文版Canvas资源大全,目前收录了几百个好玩又有用的Canvas库。欢迎star哈~ Github地址 github.com/chinaBerg/a…
  • Ts高手篇:22个示例深入讲解Ts最晦涩难懂的高级类型工具 juejin.cn/post/699410…
  • 血荐28个让你直呼哇塞的Canvas库 juejin.cn/post/703826…
来源:https://juejin.cn/post/7071146744339234846

到了这里,关于深入讲解VsCode各场景高级调试与使用技巧的文章就介绍完了。如果您还想了解更多内容,请在右上角搜索TOY模板网以前的文章或继续浏览下面的相关文章,希望大家以后多多支持TOY模板网!

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处: 如若内容造成侵权/违法违规/事实不符,请点击违法举报进行投诉反馈,一经查实,立即删除!

领支付宝红包 赞助服务器费用

相关文章

  • vscode使用技巧(2)

    在vscode中我们想要跳到函数定义的地方去,要装个插件,点击下面红色圈住的地方 在里面搜索插件来安装,输入我们要安装的插件,php IntelliSense,如下 安装好后,它会扫描我们的项目,如下 等它扫描完,我们就可以跳到函数的定义的地方去了,我们把鼠标放到我们要跳转的

    2024年02月14日
    浏览(47)
  • VsCode —— 使用小技巧

    目录      1、 vscode设置扩展/插件安装路径     Vscode设置扩展/插件安装路径      Vscode默认插件的安装路径为 C:Users用户名.vscodeextensions ,使用默认路径可能导致C盘内存逐渐增大 从而影响计算机使用。于是这里我们介绍一下修改默认插件安装路径。      

    2024年02月11日
    浏览(50)
  • 便捷开发技巧——在Vscode中使用Git-翻译自Vscode官网

    介绍 Want to easily manage your source code and collaborate with others? Git and GitHub are the tools you need! And with Visual Studio Code, you can set up and use them in a snap. Even if you’re a beginner, VS Code’s user-friendly interface guides you through common Git actions like pushing and pulling code, creating and merging branches, and committin

    2024年01月17日
    浏览(51)
  • VSCode使用技巧,代码编写效率提升2倍以上!

    VSCode是一款开源免费的跨平台文本编辑器,它的可扩展性和丰富的功能使得它成为了许多程序员的首选编辑器。在本文中,我将分享一些VSCode的使用技巧,帮助您更高效地使用它。 1. 插件 VSCode具有非常丰富的插件生态系统,通过安装插件可以为编辑器增加更多的功能。以下

    2024年02月03日
    浏览(49)
  • 【高级RAG技巧】使用二阶段检索器平衡检索的效率和精度

    之前的文章已经介绍过向量数据库在RAG(Retrieval Augmented Generative)中的应用,本文将会讨论另一个重要的工具-Embedding模型。 一般来说,构建生产环境下的RAG系统是直接使用Embedding模型对用户输入的Query进行向量化表示,并且从已经构建好的向量数据库中检索出相关的段落用户

    2024年04月26日
    浏览(39)
  • C++回调函数精解:基础使用和高级技巧一网打尽

      概述: C++回调函数提供了灵活的编程方式。基础使用演示了如何定义和调用简单的回调,而高级使用则展示了返回值非 `void` 的回调和Lambda表达式的灵活性。这种机制使程序更模块化、可维护。 在C++中,回调函数可以用于实现基础和高级的功能。以下是一个包含基础和高级

    2024年03月18日
    浏览(55)
  • 深入了解 Axios 的 put 请求:使用技巧与最佳实践

    在前端开发中,我们经常需要与后端服务器进行数据交互。其中, PUT  请求是一种常用的方法,用于向服务器发送更新或修改数据的请求。通过发送 PUT 请求,我们可以更新服务器上的资源状态。 Axios 是一个流行的 JavaScript 库,用于在浏览器和  Node.js  中进行  HTTP  请求。

    2024年02月09日
    浏览(38)
  • vscode markdown 使用技巧 -- 如何快速打出一个Tab 或多个空格

    背景描述:         我在使用VSCode,这玩意很好用,但是,有一个缺点是,我想使用Tab来做一些对齐,但是我发现在VSCode中,无论是Tab还是多个空格,最终显示出来的都是一个空格         使用代码可以实现打印Tab或是多个空格:`emsp;` 对应一个tab         但是我发现想要

    2024年02月06日
    浏览(62)
  • 【通过一个脚本将多个实验按序跑起来,无需人工逐个调试 & Linux使用技巧】

    在服务器上跑实验时,通常需要跑多次实验,但这些实验的差异之处仅有一两处参数的变动,如果在服务器盯着一个一个的跑,势必需要消耗大量的精力和时间; 因此,将跑所有实验的指令全部汇总到一个脚本中,只需要run一个脚本即可,无需人工变更; 还可以将每个跑完

    2024年02月15日
    浏览(40)
  • 【VSCode | 使用技巧集锦】中文插件突然失效、配置单个工程(工作区)编码

    系列文章: 【代码阅读软件】VSCode最新版本 下载、安装、配置 【VSCode】设置高亮的插件 | Highlight Word 【VSCode | 主题】推荐几个适合看 C/C++ 代码的 VSCode 主题 【VSCode | 使用技巧集锦】中文插件突然失效、配置单个工程(工作区)编码 问题描述 :VSCode之前安装了中文插件

    2024年02月05日
    浏览(125)

觉得文章有用就打赏一下文章作者

支付宝扫一扫打赏

博客赞助

微信扫一扫打赏

请作者喝杯咖啡吧~博客赞助

支付宝扫一扫领取红包,优惠每天领

二维码1

领取红包

二维码2

领红包