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万+

【计算机视觉40例】案例08:石头剪刀布手势识别

计算机视觉40例——从入门到深度学习(OpenCV-Python)》在介绍Python基础、OpenCV基础、计算机视觉理论基础、深度学习理论的基础上,介绍了计算机视觉领域内具有代表性的40个典型案例。这些案例中,既有传统的案例(数字识别、答题卡识别、物体计数、缺陷检测、手势识别、隐身术、以图搜图、车牌识别、图像加密、指纹识别等),也有深度学习案例(图像分类、风格迁移、姿势识别、实例分割等),还有人脸识别方面的案例(表情识别、驾驶员疲劳监测、识别性别与年龄等)。......

计算机视觉之光 2157

多传感器融合SLAM指南:如何结合视觉与激光雷达提升建图精度

本文深入探讨了多传感器融合SLAM技术,详细解析了如何将视觉传感器与激光雷达(特别是3D激光雷达)进行深度融合以提升建图精度与鲁棒性。文章从传感器特性分析、数据同步标定、前端融合策略(松耦合与紧耦合)到后端优化与地图构建,提供了完整的实战指南,并重点介绍了V-LOAM等经典融合框架的核心思想,旨在帮助开发者构建适应复杂动态环境的高精度SLAM系统。

weixin_29056145的博客 536

VsCode中搭建TypeScript调试环境

无摘要

m0_47584501的博客 1万+

基于立创·庐山派K230的红色激光点识别和锁定追踪

本文介绍了一种基于立创・庐山派K230开发板的红色激光点识别与追踪系统。该系统通过摄像头采集图像,采用RGB565格式和Gamma校正进行预处理,利用颜色阈值筛选实现红色激光点检测。核心追踪算法采用状态机设计,包含未锁定和已锁定两种状态,通过计算欧氏距离判断目标连续性,并具有丢失计数机制确保稳定性。系统通过UART接口以自定义二进制协议输出坐标数据,同时提供可视化反馈。该方案在800×480分辨率下实现了实时、稳定的单目标追踪,具有检测精度高、响应速度快的特点,适用于工业定位和机器人导航等嵌入式视觉应用场景

m0_73738367的博客 1653

VS Code调试TypeScript基本流程

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

2301_79959413的博客 4737

别再傻傻分不清!一文讲透电子产品‘冲击’与‘碰撞’试验的区别与选用(附GB/T 2423标准解读)

本文详细解析了电子产品可靠性测试中冲击与碰撞试验的核心区别与应用场景,结合GB/T 2423标准提供实用指南。冲击测试模拟瞬时高强度事件(如跌落),而碰撞测试针对重复性力学环境(如运输颠簸)。通过参数对比和标准解读,帮助研发人员精准选择测试方案,提升产品可靠性验证效率。

weixin_42665255的博客 267

【ubuntu24.04】auto remove后,重启,kernel panic ,please reboot your computer vfs unable to mount root fs

Ubuntu 24.04系统在运行auto remove后出现内核恐慌(kernel panic)无法启动,显示"VFS: unable to mount root fs"错误。该问题是由于当前内核被清除导致系统无法挂载根分区。解决步骤包括:1)尝试用GRUB菜单中的旧内核启动;2)在GRUB中临时编辑启动参数;3)使用Ubuntu启动盘进行chroot修复;4)使用Boot-Repair工具一键修复。成功启动后,需要重新安装linux-generic等元包,重建initramfs并更新

突围 1216

VsCode:配置TypeScript开发环境

VsCode:配置TypeScript开发环境

ChinaDragon10的博客 5701

【人工智能之深度学习】18. 金融风控实战:TCN时序卷积网络构建信用卡欺诈实时检测系统

摘要:信用卡欺诈交易识别是金融风控的核心环节,其面临欺诈样本占比低(仅0.1%)、实时响应要求高(毫秒级)等挑战。本文基于IEEE-CIS公开数据集,构建基于时序卷积网络(TCN)的欺诈检测系统,通过捕捉用户交易行为的时序模式识别异常。详细阐述全流程:从数据预处理(构造交易序列特征)、TCN模型设计(轻量级架构适配实时场景),到实时检测部署(异步处理确保低延迟)。实验显示,该系统精确率达63%、召回率89%,误杀率仅0.2%,推理延迟8ms,较XGBoost等传统模型性能显著提升。

专注于人工智能、软件开发、工控自动化、工厂数字化及智能化等领域,希望和大家共同进步! 1133

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

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

GoldenaArcher的博客 1325

【软考高级系统架构论文】论微服务架构及其应用

本文围绕“论微服务架构及其应用”展开论述。首先概要介绍了本人参与的某公司线上电子商务平台项目,在其中担任系统架构设计师。接着分析了微服务架构相较于单块架构的特点,如模块化与组件化、技术栈多样性、独立部署与扩展、高度容错与可用性等。最后结合项目阐述了软件架构对微服务模式的采用情况,以及实施过程中遇到的问题及解决方案,如服务划分粒度、数据一致性、监控与故障排查等问题,并给出了相应解决办法。

qq837993702的博客 225

TMS_WebGMaps_1.9.8.0_Full_Source

TMS_WebGMaps_1.9.8.0_Full_Source 全源码 delphi cbuilder

在VSCODE 调试 NODE.js 部署环境

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

1万+

jdk-8u144-linux-x64.tar.gz.

该资源为搭建Linux系统Java环境用,资源的后缀为tar.gz格式的压缩包

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

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

gitblog_00479的博客 486

ssm框架搭建

这个是一个在idea上成功跑起来的ssm框架项目,保存在这里方便以后使用直接下载

VB摄像头监控

该VB模块可对摄像头捕获的画面进行录像等,可在创建的窗口进行控制

【亲测免费】 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

小红书原图批量采集工具 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、付费专栏及课程。

余额充值