VSCode中调试TypeScript (配置更新)

VSCode + Vue 3开发环境配置全指南 Vue单文件组件(.vue)是现代前端工程的核心载体,其高效开发依赖于编辑器对TypeScript、Composition API和响应式语法的深度支持。VSCode凭借可扩展的语言服务(如Volar)、标准化的代码质量工具链(ESLint + Prettier)以及与Vite Dev Server的无缝调试能力,成为Vue 3项目的事实标准开发环境。理解插件协同原理——Volar接管语言功能、ESLint校验逻辑正确性、Prettier统一代码风格——是构建稳定可复现开发流水线的关键。本文聚焦VSCode 阅读详情

网上搜了一下用VSCode调试TypeScript的资料,尝试后发现之前的配置方式已经失效,就连ts-node官方说明里的也过时了,一番搜索和尝试后,发现VSCode只要配置一下就可以运行和调试单个ts文件,方式如下:

1、在VSCode中,点击菜单 调试-增加配置,在项目根目录的.vscode文件夹下会生成一个launch.json文件,在launch.json中输入如下内容,name可以随意修改;

{
    "version": "0.2.0",
    "configurations": [
        {
            "type": "node",
            "request": "launch",
            "name": "运行或调试当前文件",
            "program": "${workspaceFolder}/${relativeFile}",
            "preLaunchTask": "tsc: 监视 - tsconfig.json", //VSCode界面使用中文语言的话用这个
            // "preLaunchTask": "tsc: watch - tsconfig.json", //VSCode界面使用英文语言的话用这个
            "outFiles": [
                "${workspaceFolder}/build/es5/**/*.js"
            ]
        }
    ]
}

注意:如果是使用英文界面的话,换成对应的preLaunchTask,另外小程序中要移除所有的注释,不然在预览时会报错;

2、打开要调试的ts文件,使其成为当前正在编辑的文件;

3、通过菜单或快捷键启动运行或调试即可。

下断点的方式:在行号前的空白处点击即可,再次点击取消断点。

 

之前网上使用ts-node的方式:

参考:https://medium.com/spektrakel-blog/debugging-typescript-from-vscode-3cb3a182bf63

1、首先按ts-node官方的说明安装ts-node,此处不作详细说明;

2、在VSCode中,点击菜单 调试-增加配置,在lauch.json中输入如下内容,name可以随意修改:

{
  "version": "0.2.0",
  "configurations": [
    {
      "type": "node",
      "request": "launch",
      "name": "调试当前文件/ ts-node",
      "protocol": "inspector",
      "args": ["${relativeFile}"],
      "cwd": "${workspaceRoot}",
      "runtimeArgs": ["-r", "ts-node/register"],
      "internalConsoleOptions": "openOnSessionStart"
    }
  ]
}

3、打开要调试的ts文件,然后选择左侧边栏上的bebug按钮,调出调试页面;

4、在调试配置那选择刚才指定的配置名称,点击左侧的运行按钮就可以运行当前的ts文件。

演示:

另外,如果想进行mocha测试,配置文件如下:

{
  "version": "0.2.0",
  "configurations": [
    {
      "type": "node",
      "request": "launch",
      "name": "Launch current file w/ mocha",
      "program": "${workspaceRoot}/node_modules/mocha/bin/_mocha",
      "env": {
        "TS_NODE_PROJECT": "src/tsconfig.specs.json"
      },
      "args": [
        "--ui",
        "tdd",
        "--timeout",
        "4000",
        "--colors",
        "--require",
        "ts-node/register",
        "${relativeFile}"
      ],
      "cwd": "${workspaceRoot}",
      "internalConsoleOptions": "openOnSessionStart"
    }
  ]
}

Electron+Vite实战:从零配置到热更新全流程(附React集成方案) 本文详细介绍了如何从零开始,使用Vite和Electron构建现代化桌面应用开发环境。内容涵盖项目初始化、多进程Vite配置、实现渲染进程热更新及主进程自动重启的全流程,并提供了集成React、TypeScript以及多进程调试的完整方案,旨在为开发者提供流畅高效的开发体验。 阅读详情

相关推荐

Vue 3 + Electron + VSCode 双形态架构改造实战

现代桌面应用开发中,如何让同一套业务逻辑既能在 VSCode 插件环境中运行,又能无缝迁移到 Electron 独立桌面应用?这本质是跨运行时的架构设计问题:VSCode Webview 与 Electron 渲染进程在 Node.js 集成、API 能力、安全模型和生命周期上存在根本差异。解决路径在于分层解耦——将 UI(Vue 3)、领域逻辑(TypeScript 无框架代码)与运行时能力(vscode/electron API)彻底分离,并通过可插拔的适配层(Runtime Adapter)实现环境无

weixin_34116482的博客 193

VS Code调试TypeScript项目

1 安装VS Code https://code.visualstudio.com/ 安装VS Code插件: JavaScript and TypeScript Nightly TypeScript Extension Pack Visual Studio IntelliCode Project Manager Material Icon Theme 2 安装Node.js 为了方便后续VS Code插件开发,这里选择安装与当前VS Code使得Node.js版本(Help->About): V

9407

VSCode + 微信开发者工具:打造高效小程序开发工作流

在移动应用开发中,编辑器与调试工具的选择直接影响开发效率与代码质量。VSCode 作为轻量级代码编辑器,凭借丰富的插件生态、智能提示与灵活的快捷键,成为众多开发者编写业务代码的首选;而微信开发者工具则专注于小程序的编译预览、真机调试与版本上传。两者优势互补,通过“VSCode 负责写,开发者工具负责跑”的协作模式,能有效解决小程序开发中文案冗长、提示薄弱、调试不便等痛点。这套工作流不仅适用于原生小程序项目,还兼容 uni-app、Taro 等跨端框架,并能配合工程化配置、ESLint 规范与 Git 版本管

weixin_32228501的博客 106

解决vscode无法自动更新

解决vscode无法更新问题

我与代码的故事 2万+

云模型在综合评价过程中的应用

目录 1 云模型标尺(标准云模型)的构建方法 1.1 通过正态云的“3En 规则”来表示评价论域 1.2 通过论域的边界值隶属度相等来表示评价论域 1.3 通过黄金分割法来表示评价论域 2 确定评价结果的过程 2.1 基本云发生器 2.2 X条件云发生器 2.3 两种方法的区别 综合评价问题一般分为以下六个步骤 1、明确评价目的; 2、确定被评价对象; 3、建立评价指标体系(包括收集评价指标的原始值、评价指标的若干预处理等); 4、确立与各项评价指标相对应的权重系数; 5、选..

weixin_62223576的博客 1万+

TeraTerm 使用技巧

⏹TeraTerm 使用技巧

菜鸟记录 1万+

VsCode中搭建TypeScript调试环境

无摘要

m0_47584501的博客 1万+

LTE信令流程实战:从Attach到Service Request的完整解析(附常见问题排查)

本文深入解析LTE信令流程中的Attach和Service Request关键环节,提供从基础原理到实战排查的完整指南。涵盖鉴权、承载建立等核心步骤,分析常见故障模式及优化方案,并附赠信令跟踪工具使用技巧,助力通信工程师提升网络运维效率。

alpha的博客 319

VS Code调试TypeScript基本流程

最近接触到的几个开源库源码都是用TypeScript写的(看来ts是大势所趋,不学不行啊)。虽然说不懂ts也能正常调API,但是碰到有意思的功能还是想跟进去看一看、改一改。在学习了基本的ts语法后有了调试的需求。如果用tsc编译出js,再去调试js还是太麻烦。如果能在VS Code中直接调试ts就完美了。在查阅一些资料后,我总结了一个基本流程,方便以后查阅,不足之处也请大家指正。

2301_79959413的博客 4737

GD32F4 Freertos实战:YT8512以太网PHY驱动移植与RMII模式配置详解

本文详细讲解了在GD32F470微控制器上,基于FreeRTOS系统移植YT8512以太网PHY驱动的实战过程。文章重点剖析了RMII时钟模式的选择与配置、PHY地址的正确设置,并针对YT8512芯片的寄存器差异,提供了核心驱动代码的适配方法与调试技巧,帮助开发者顺利完成从官方例程到特定硬件的驱动移植。

weixin_29162439的博客 608

别再翻手册了!用Materials Studio的Forcite模块,5步搞定复杂溶剂的溶解度参数计算

本文详细介绍了如何使用Materials Studio的Forcite模块,通过5个步骤快速计算复杂溶剂的溶解度参数。从分子建模、结构优化到分子动力学采样,再到最终的内聚能密度计算,该方法大幅提升了石油化工和高分子材料研发中的效率,避免了传统手册查阅和实验的繁琐过程。

weixin_28707739的博客 280

VsCode:配置TypeScript开发环境

VsCode:配置TypeScript开发环境

ChinaDragon10的博客 5701

微信小程序流量主提升ecpm的一些方法

ecpm就是千次广告曝光收入,是一个预估的价格,而不是额定的,他是随着曝光度,用户点击度,页面访问数来决定的。

任聪聪的博客 1万+

【实战笔记】TypeScript 服务端热更新配置全解(含 ts-node-dev + 路径别名 + VSCode 调试)

很久之前写过一篇,不过当时还没有很注重后端的部分,只是想快速的搭建 UI,然后测试一些新做的功能。不过这次开始写了 MERN 的一个项目之后就发现,用和nodemon的解决方法还是不太成熟,尤其是两个大问题没有办法解决:debugger使用和nodemon监听的还是编译后的代码,这也就意味着如果想要打断点,在编译前的 TS 代码中进行 debug,这个操作就有些力有不怠path 的变化这个是从相对路径改成绝对路径的导入方法,之前导入的方法基本都是这种,最近改成了这种。

GoldenaArcher的博客 1325

【C++】【STL算法】数据窄化及代码安全性

本文系统探讨了C++工程中数据窄化(narrowing conversion)的隐患与解决方案。数据窄化指将高精度/大范围类型转换为低精度/小范围类型,虽语法合法但会导致静默精度损失。其危险性体现在:错误隐蔽、STL会放大问题、数值错误具有传播性。现代C++要求窄化必须显式声明,文中提出四种工程解决方案:显式转换、边界统一转换、范围检查转换和使用GSL工具。建议在系统边界集中处理窄化,保持计算链路类型一致性,并通过分层策略(建模用double,控制用float)确保数值稳定性。核心思想是让窄化成为清晰可控的

Double Galaxy 80

提示词编程在自动化内容审核中的应用

文章标题 提示词编程在自动化内容审核中的应用 关键词:提示词编程,自动化内容审核,人工智能,算法原理,系统架构设计,项目实战 摘要 本文旨在探讨提示词

AI天才研究院 1255

在VSCODE 调试 NODE.js 部署环境

很早就想接触node.js 一直没有动手, 考虑JAVA web有JFINAL 开发效率还是可以的 前一阵子搞LayaAir 引擎 用的TypeScript 用的感觉很过瘾 node.js居然也支持TS语言开发,网易也用node.js搞了一个服务器端免费的游戏引擎, 后来又发现开发微信小程序服务器端的代码案例也有node.js 版本的 于是下定决心想好好的研究下了, 于是百度了很多文章, 自己搭建成功了开发和调试环境, 特把经验写在这里 希望抛砖引玉吧!

1万+

TMS_WebGMaps_1.9.8.0_Full_Source

TMS_WebGMaps_1.9.8.0_Full_Source 全源码 delphi cbuilder

5个实用技巧让Vite配置调试效率提升10倍

你是否还在为Vite配置文件调试而烦恼?修改配置后反复重启开发服务器,面对错误提示不知所措?本文将分享5个实用技巧,帮助你轻松定位和解决Vite配置问题,让开发效率翻倍。读完本文,你将学会如何启用详细日志、使用调试工具、利用条件配置、实现热更新和验证配置,从此告别配置调试难题。 ## 技巧一:启用详细日志定位问题 Vite默认日志输出较为简洁,当配置出现问题时,详细日志能提供关键线索。通过在命...

gitblog_00479的博客 486

IEM模型,地表粗糙度模拟

利用微波反演土壤水分时候,利用IEM模型可以实现对随机地表的模拟

迈瑞BS系列全自动生化分析仪LIS协议接口手册(内含HL7和ASTM)

迈瑞BS系列全自动生化分析仪LIS协议接口手册,内含HL7和ASTM)

【亲测免费】 STM32-for-VSCode:STM32开发者的VSCode利器

STM32-for-VSCode:STM32开发者的VSCode利器 STM32-for-VSCode 是一款针对 STM32 开发者的 Visual Studio Code 扩展,旨在简化 STM32CubeMX 项目在 VSCode 中的编译、调试和烧录过程。该项目的开发语言主要包括 C 和 TypeScript。 项目核心功能 Makefile 生成与编译:自动创建 Makefile 文件...

gitblog_01163的博客 880

IMSL CNL 7.0.0 (x86-64)Crack

IMSL CNL 7.0.0 (x86-64)Crack intel的算法库破解文件,这是C++版本的破解文件

小红书原图批量采集工具 XHS-Downloader:十分钟把收藏夹备份进硬盘

收藏夹里几十条笔记,网页上右键存的图糊得没法用,链接放一两个月就点不开了。XHS-Downloader 是免费开源的小红书作品采集工具,基于 AIOHTTP 写成,把"链接 → 解析 → 下载 → 归档"整条链路一次走完,全程不登录账号。 ## 一、先跑起来:四步下出第一个作品 这节带你从零到文件落盘,全程不到十分钟。 1. 拉源码到本地: ```bash git clone https:

gitblog_01037的博客 198

LayaAir 2.0命令行开发环境配置实战指南

LayaAir 2.0 是面向H5与跨平台场景的轻量级TypeScript渲染引擎,其核心构建依赖 layaair2-cmd 命令行工具与 VSCode 深度协同。不同于通用前端工程,Laya 的编译流程耦合引擎源码、自研类型系统与运行时钩子,导致常见‘编辑器不报错但运行失败’‘热更新失效’‘真机白屏’等问题。技术价值在于打通 TypeScript 类型提示、断点调试、资源热重载与多端发布的一致性链路。典型应用场景包括中型H5游戏、教育互动课件及团队标准化开发。本文聚焦 LayaAir 2.0 + laya

weixin_26516551的博客 195

TypeScript 5.4重大变更来袭,VSCode插件开发者必须注意的3个陷阱

掌握VSCode插件开发的TypeScript 5.4类型定义与调试技巧,避开三大兼容性陷阱。涵盖API变更应对、类型检查优化与断点调试实战方法,提升开发效率与稳定性。适用插件维护与新项目构建,值得收藏。

QuickTrans的博客 994

VSCode Code Outline:代码结构可视化工具零基础上手指南

在现代软件开发中,快速理解代码结构是提升开发效率的关键。VSCode Code Outline作为一款专为Visual Studio Code设计的代码大纲插件,通过在资源管理器面板中实时展示当前文件的符号结构,帮助开发者实现毫秒级代码导航。无论是大型项目的架构梳理,还是日常开发中的函数定位,这款工具都能显著降低代码阅读的认知负荷,让开发者专注于逻辑实现而非结构查找。 ## 一、核心价值:重新定

gitblog_00204的博客 617

day2 nestjs应用初始化及调试(java转ts全栈/3R教室)

Java转Ts全栈的学习记录。

qq_31707969的博客 534

electron-vite-react配置全揭秘:Vite、TypeScript与React的完美融合

electron-vite-react是一个功能强大的开发框架,它将Electron、Vite、React和TypeScript完美融合,为开发者提供了一个高效、现代化的桌面应用开发解决方案。通过这个框架,你可以快速构建出性能优异、界面精美的跨平台桌面应用。 ## 框架核心组件介绍 electron-vite-react框架主要由四个核心部分组成:Electron提供桌面应用运行环境,Vite

gitblog_00418的博客 738

vscode-phpcs 项目常见问题解决方案

vscode-phpcs 项目常见问题解决方案 项目基础介绍 vscode-phpcs 是一个为 Visual Studio Code 开发的插件,旨在集成 PHP CodeSniffer (phpcs) 工具。PHP CodeSniffer 是一个用于检测 PHP、JavaScript 和 CSS 文件中违反预定义编码标准的工具。vscode-phpcs 插件使得开发者可以在 Visual St...

gitblog_00807的博客 740
上一篇: TypeScript 做微信小程序 资料汇总
下一篇: Glide CircleImageView第一次加载不出来,动画失效的问题解决方案
candyguy242
博客等级 码龄17年 63粉丝 37原创
评论
成就一亿技术人!
拼手气红包6.0元
还能输入1000个字符
 
 条评论被折叠 查看
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付:10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值