如何用vscode调试ts代码

最新推荐文章于 2024-06-21 09:18:51 发布
最新推荐文章于 2024-06-21 09:18:51 发布
阅读量2.5k 收藏
点赞数
分类专栏： typescript 文章标签： vscode调试ts代码
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/liupengxunzhuanshu/article/details/107820953
版权

如何用vscode调试ts代码

准备工作：ts下载好，vscode下载好，node下载好，npm包安装好
打开vscode，在拓展商店搜索“Code Runner”，下载好，
在这里插入图片描述
编辑器右上角出现这个倒三角型，就OK
在这里插入图片描述
然后打开终端窗口，输入

tsc --init

在这里插入图片描述
然后回车，这时候文件夹目录下会多一个tsconfig.json文件，打开文件
在这里插入图片描述

把"outDir": “./js”, 的注释打开

最低0.47元/天 解锁文章
wx_AX1091019
关注
  • 0
    点赞
  • 踩
  • 0
    收藏
    觉得还不错? 一键收藏
  • 1
    评论
专栏目录
VsCode 中的 TS断点调试
weixin_44908855的博客
11-10 4740
1. 配置步骤 第一步：准备要调试的ts文件 新建 a.ts 文件，作为要调试的ts文件console.log('1 准备开始执行 for 循环') for (let i: number = 1; i <= 3; i++) { console.log('...一锅装不下') } console.log('2 for 循环执行结束') 第二步：添加调试配置 打开调试窗口：点击左侧活动栏倒数第二个按钮（Debug） 生成默认配置：点击DEBUG后面的下拉框，选择添加配置 修改配置内容如下
在VSCode中调试TS
weixin_51295096的博客
02-02 3225
最近觉得自己平时用TS比较少，于是开始主动用TS刷题，提高自己对TS的熟练度，也希望自己以后能用TS尽量使用TS。但是在用TS刷leetcode的过程中发现调试比较困难，以前用VSCode调试js文件很简单，直接添加一个配置就行了，在根目录下新建。// 欲了解更多信息，请访问: https://go.microsoft.com/fwlink/?在 TS 文件中打断点，点击调试按钮。现在我们可以使用调试TS愉快的刷leetcode了~在题目中打断点，再点击小箭头就可以快乐调试了。
一些你需要掌握的 tsconfig.json 常用配置项
fe_watermelon的博客
10-06 1727
大家好，我是前端西瓜哥。tsconfig.json 是用来配置 TS 编译选项的，通常位于项目的根目录位置。我们可以用 ts 提供的 tsc 命令行工具，执行tsc --init。然后我们就能得到一个默认的 tsconfig.json 文件，且这是一种可以添加注释的 json 文件。里面有很多带有注释的选项，目的是让开发者能够反注释快速启用一些配置。
设置 VSCode+Vite+Vue3+ts 的断点调试
最新发布
weixin_41245990的博客
06-21 1362
当前，Vite+Vue3+ts再结合一些优秀的UI框架，如Element plus，Ant design，Naive UI，移动端的Vant UI，是比较流行的前端技术之一。如何在vscode中 调试 Vite+Vue3+ts 的代码呢，今天我们一起来进行配置。首先，我们先配置ts的调试环境，再来配置Vue3的调试环境。
vscode自动编译TS
酒馆不打烊
10-21 2439
先按照node.js，可以去官网下载node.js，然后直接安装node即可 通过npm安装typescript npm install -g typescript 在项目的根目录下创建 tsconfig.json 文件 tsc --init 打开tsconfig.json文件，可以直接用一下代码替换掉原本的,或者找到outDir直接修改也行 { "compilerOptions": {...
VS Code调试TypeScript基本流程
2301_79959413的博客
10-14 1576
最近接触到的几个开源库源码都是用TypeScript写的（看来ts是大势所趋，不学不行啊）。虽然说不懂ts也能正常调API，但是碰到有意思的功能还是想跟进去看一看、改一改。在学习了基本的ts语法后有了调试的需求。如果用tsc编译出js，再去调试js还是太麻烦。如果能在VS Code中直接调试ts就完美了。在查阅一些资料后，我总结了一个基本流程，方便以后查阅，不足之处也请大家指正。
vscode调试ts
qq_43203949的博客
12-06 2008
vscode无法直接执行ts文件，需要安装typescript，将typescript转化为js，在通过运行转化的js文件来进行调试，生成js文件时要生成对应的.js.map(映射文件)，才能在ts文件打断点测试安装typescript 添加tsconfig.json文件 根据要求配置tsconfig.json文件 配置package.json 在package.json中配置这条脚本命令，通过tsc来编译ts文件为js
在vscode中怎样debug调试go程序
zhao_teng的博客
09-14 1636
随着互联网时代的飞速发展，我们编码使用的开发利器也在不断更新换代，古话说工欲善其事必先利其器，对于Java开发者而言，eclipse和idea这两款神器各有千秋，因自己的爱好可以选取不同的IDE，但是对于Go语言程序的开发者而言，当下最火的IDE应该非微软的Visual Studio Code莫属，当然这款编辑器还有很多其他的强大功能，这里就不一一列举了,谁用谁知道~，下面给出怎样在vscode中调试go程序的过程，以mac本为示例： 1、去官网地址：Visual Studio Code - Code E
Angular2使用vscode断点调试ts文件的方法
08-28
Angular2 使用 VSCode 断点调试 TS 文件的方法 Angular2 是一个基于 TypeScript 构建的前端框架，使用 VSCode 作为 IDE 时，如何进行断点调试 TS 文件是一件很重要的事情。本文将详细介绍如何使用 VSCode 断点调试 ...
vscode-tslint:vscode的tslint集成
04-30
在tslint-server上打开VS代码 运行npm run compile或npm run watch以构建服务器并将其复制到tslint文件夹 调试按F5，它将调试器附加到服务器 要跟踪服务器通信，可以启用以下设置：“ tslint.trace.server”：“ ...
vscode-typescript-debugging：在vscode中调试Typescript
02-16
在Visual Studio Code ...总之，VSCode提供了强大的TypeScript调试工具，通过正确的配置和使用，开发者可以更好地理解和优化其代码。无论是简单的本地应用还是复杂的Web项目，都能在VSCode中享受到顺畅的调试体验。
vscode-mocha-ts-config:使用Visual Studio Code调试Mocha测试用例的配置
05-13
本项目"vscode-mocha-ts-config"专注于在VSCode中调试使用TypeScript编写的Mocha测试用例。这个配置文件集合可以帮助开发者轻松地设置调试环境，从而提高测试效率。 首先，我们需要理解如何在VSCode中配置Mocha测试...
在VSCode中断点调试.js和.ts文件
qq_34388186的博客
01-06 654
在VSCode中断点调试js和ts文件
VS Code配置ts类型校验
gjxcool的博客
11-28 1385
types中加入，添加vueCompilerOptions。
VSCode使用TSLlint校验TS代码
小火车况且况且况且的博客
02-07 4656
VSCode使用TSLlint校验TS代码 下载TSLint插件 可以在项目的根目录下新建tslint.json的文件,用来自定义规则 在VSCode的设置setting.json中添加,可以在保存的时候自动格式化代码 // 设置为true时，每次保存的时候自动格式化；值设置为false时，代码格式化请按shift+alt+F "editor.formatOnSave": true, // 每次保存的时候将代码按eslint和tslint格式进行修复 "editor.codeActionsO
VS Code调试TypeScript项目
01-01 6852
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
vs code ts运行、断点调试解决方案
xuelang532777032的博客
05-22 1945
​ 1、解决ts运行和断点调试问题 2、ts-node : 无法加载文件 C:\Program Files\nodejs\ts-node.ps1,因为在此系统上禁去看这篇===》ts-node : 无法加载文件 C:\Program Files\nodejs\ts-node.ps1,因为在此系统上禁_雪狼之夜的博客-CSDN博客3、步骤跟紧，不然错一步就不行！！！！！
vscode如何运行并调试ts项目
05-30
在 VS Code 中运行和调试 TypeScript 项目可以通过以下步骤完成： 1. 确保你已经安装了 TypeScript 编译器和 Node.js 运行时环境。 2. 在 VS Code 中打开你的 TypeScript 项目文件夹。 3. 打开终端，进入到项目文件夹，并执行以下命令来安装 TypeScript 和 Node.js 的相关依赖： ``` npm install ``` 4. 在项目根目录下创建一个 `launch.json` 文件，用于配置 VS Code 的调试器。可以通过 VS Code 的调试面板中的“添加配置”按钮来自动生成该文件。 5. 在 `launch.json` 文件中添加一个配置项，用于启动 TypeScript 编译器并运行你的项目。例如： ``` { "type": "node", "request": "launch", "name": "Debug TypeScript", "runtimeArgs": ["-r", "ts-node/register"], "args": ["${workspaceFolder}/src/index.ts"], "cwd": "${workspaceFolder}", "protocol": "inspector" } ``` 这个配置项将使用 `ts-node` 运行时环境来编译和运行你的 TypeScript 代码，并将 `src/index.ts` 文件作为入口点。你可以根据你的项目结构和需求进行调整。 6. 在 VS Code 中打开你的 `index.ts` 文件，并在代码中设置断点。 7. 点击 VS Code 的调试面板中的“启动调试”按钮，等待编译和运行过程完成。 8. 当程序运行到断点时，你可以使用 VS Code 的调试工具来检查变量、调用栈和执行状态等信息，以便进行调试。 以上就是在 VS Code 中运行和调试 TypeScript 项目的基本步骤。如果需要更多帮助或者具体的示例代码，请参考 TypeScript 和 VS Code 的官方文档。
评论 1
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值