使用Visual Studio Code调试TypeScript

最新推荐文章于 2025-06-06 14:14:06 发布
最新推荐文章于 2025-06-06 14:14:06 发布
阅读量395 收藏
点赞数
CC 4.0 BY-SA版权
分类专栏： 编辑器的使用 文章标签： 编辑器 调试
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.youkuaiyun.com/weixin_39331259/article/details/92802642
博客介绍了在VSCode中调试TS或JS代码的方法。先安装Debugger for Chrome插件，按F5选择Chrome，VSCode会自动生成.vscode文件夹及launch.json文件，可按需修改参数，同时指出调试需要服务器提供服务。
  • 安装Debugger for Chrome插件
  • 按F5，选择Chrome
    在这里插入图片描述
  • 选择Chrome后，vscode会在当前根目录下自动生成.vscode的文件夹，并且在该文件夹下生成launch.json文件，根据具体情况修改参数（比如我使用lite-server，端口是3000，所以将默认的8080端口改为3000）

由此可见，调试ts或者js需要服务器提供服务。

正确配置 Visual Studio Code 开发和调试 TypeScript
zsxy2019的博客
10-14 315
1、建立项目目录 使用以下命令创建项目的目录： mkdir ts3 cd ts3 mkdir src mkdir dist 建立好的目录如下： ts3 ├─dist └─src 2、初始化 NPM 在项目的根目录下，执行下面的命令： npm init -y 现在项目结构如下： ts3 ├─dist └─src └─package.json 3、创建并配置 tsconfig.json 在项目的根目录下，执行下面的命令： tsc --init 现在项目结构如下： ts3 ├─dist └─src └─
使用 Visual Studio Code 搭建 TypeScript 开发环境
绿水青山的博客
07-23 1202
使用 Visual Studio Code 搭建 TypeScript 开发环境简介准备工作安装Node.js并检测是否安装成功设置 Node.js 的 npm 安装 package 的全局路径（非必须）设置 Node.js 环境变量安装 TypeScript安装 Node 的 .d.ts 库创建项目创建 ts_demo 项目创建 tsconfig.json新建student.ts文件修改启动源创...
Visual Studio的Typescript插件
02-26
可以让Visual Stuido 2013版本支持TypeScript的开发，一直不太喜欢egret的官方开发工具EgretWing，相比较vs来说wing用起来十分不顺手。有了该插件，就能在vs下开发egret项目了
VS Code调试TypeScript项目
01-01 9036
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
在Visual Studio Code中使用TypeScript
culiu9261的博客
07-22 1217
TypeScript and Visual Studio Code are two amazing products created by Microsoft, and - surprise surprise- they work amazing together! Let's take a look at how Visual Studio Code makes it a breeze to w...
【软件开发工具】Visual Studio Code中TypeScript调试配置与使用：涵盖Node.js和Web应用客户端调试设置
04-09
使用场景及目标：①学习如何在Visual Studio Code中配置和使用TypeScript调试工具；②掌握通过源映射调试TypeScript代码的技术；③能够解决调试过程中遇到的基本问题。; 其他说明：为了更好地理解和实践本文内容，...
使用 Visual Studio Code 和 TypeScript 开发微信小程序
03-29
看我大 Visual Studio Code   相比于 Sublime，Visual Studio Code 是完全免费和开源的编辑器。当然，当初试用 VSCode 还是冲着 Erich Gamma 的名头来的，用过之后根本停不下来呀：）   大爱 TypeScript VSCode ...
编程开发Visual Studio Code中TypeScript编译全流程：从环境搭建到大型项目优化
04-08
内容概要：本文详细介绍了如何在 Visual Studio Code (VS Code) 中编译 TypeScript。首先解释了 TypeScript 是 JavaScript 的类型化超集，提供了类、模块和接口等功能。接着描述了 TypeScript 编译器 tsc 的安装方法...
在Visual Studio Code中编辑 TypeScript.pdf
02-19
在Visual Studio Code中编辑TypeScript是一份详细的指南，旨在帮助开发者更高效地使用VSCode进行TypeScript代码的编写和管理。文档首先介绍了Visual Studio Code对TypeScript的支持，强调了VSCode为TypeScript提供的...
Visual Studio Code 使用typescript【手动配置方式】
johnforrest的博客
04-16 321
1、安装typescript npm install -g typescript 2、在本地建立一个工文件夹，使用vscode打开 3、初始化package.json,执行 npm init 4、初始化 tsconfig.json ，执行  tsc –init    5、修改tsconfig.json文件内容 { "compilerOptions": { ...
VSCode中的TypeScript教程
liangshanbo1215的博客
10-15 2225
是JavaScript的类型化超集，可编译为纯JavaScript。它提供了类、模块和接口来帮助您构建健壮的组件。安装 TypeScript 编译器Visual Studio Code 包括 TypeScript 语言支持，但不包括 TypeScript 编译器tsc。您需要在全局或工作区中安装TypeScript编译器，以将 TypeScript 源代码转换为 JavaScript（安装TypeScript最简单的方法是通过npm。
VisualStudioCode配置TypeScript编程环境
iningwei的博客
05-07 4671
1：下载安装nodejs https://nodejs.org/en/ 这里下载安装LTS版。 安装好后，win+R打开cmd命令 path：看nodejs目录是否加入环境变量中 若已加入，输入node -version可以查看当前版本。如上图所示。 2：安装TypeScript Compiler 安装好Node.js后，可以直接使用npm工具来安装TypeScript，这个TypeScript...
Typescript 入门 及 使用Visual Studio Code搭建TypeScript开发环境
liangxw1的专栏
08-08 2227
Typescript官网，汉语 https://www.tslang.cn/samples/index.html Typescript快速入门 https://www.w3cschool.cn/typescript/typescript-tutorial.html 查看这个使用Express + MongoDB + TypeScript的新手项目，以了解为什么说Type
如何在Visual Studio Code中使用TypeScript
08-16 1898
介绍 (Introduction) TypeScript is a typed superset of JavaScript that compiles to plain JavaScript. Let’s break down what exactly this means: TypeScript是JavaScript的类型化超集，可编译为普通JavaScript。 让我们解释一下这到底是...
TypeScript筑基笔记一：Visual Studio Code 创建Typescript文件和实时监控
林恒的博客
04-23 210
问题一：电脑如何安装Typescript？ 答案：打开电脑cmd 输入以下指令： npm install -g typescript 中国电脑因为访问慢，可以先安装cnpm后再安装 安装cnpm指令 npm insatll -g cnpm --registry=http://registry.npm.taobao.org 安装后运行以下代码 cnpm install -g type...
在Visual Studio Code中安装加速TypeScript程序开发的插件
jackson_lingua的博客
11-28 4800
本文简要介绍了在marketplace能够找到的，对TypeScript开发有极大帮助的Extensions(扩展)，这些也成为插件的组件，将使TypeScript开发工作高效有趣，事半功倍。
使用 Visual Studio Code 调试 TypeScript + Jest
weixin_30311605的博客
04-05 299
在 TypeScript + Jest 的项目中，如果写的测试代码触发了源码中的 bug ，那么就需要 debug 了。此时主要有两种 debug 工具： 借助于 Chrome 开发者工具调试。 使用 Visual Studio Code 内置的调试功能。 两种方式各有优缺点，第一种主要是操作界面很熟悉，毕竟平时前端开发就是直接在使用 Chrome 开发者工具，但是第一种方案只有在代码里面 i...
VSCode调试Typescript
游戏程序员的日常
05-11 1118
简单布置一个VSCode运行TS的环境
vscode 设置调试Typescript
最新发布
weixin_45928286的博客
06-06 154
vscode 设置调试Typescript_mob64ca12de62a6的技术博客_51CTO博客
Visual Studio Code运行Typescript文件
03-19
### 配置 Visual Studio Code 运行 TypeScript 文件 要在 Visual Studio Code 中运行 TypeScript 文件，需完成以下几个方面的设置： #### 1. 安装必要的工具 确保已安装 Node.js 和 Visual Studio Code。Node.js 是 TypeScript 的运行环境基础，而 Visual Studio Code 提供了强大的编辑器支持[^2]。 验证 Node.js 是否安装成功可以通过以下命令： ```bash node -v npm -v ``` 如果未安装 TypeScript，则需要通过 npm 全局安装它： ```bash npm install -g typescript ``` 此操作会将 TypeScript 编译器 `tsc` 添加到全局环境中[^4]。 --- #### 2. 初始化项目并创建 tsconfig.json 在一个新的项目目录中初始化 npm 并生成 `package.json` 文件： ```bash npm init -y ``` 接着，在同一目录下创建 `tsconfig.json` 文件来定义编译选项。可以手动编写该文件或者让 TypeScript 自动生成： ```bash npx tsc --init ``` 这一步会在当前目录生成默认配置的 `tsconfig.json` 文件[^3]。 以下是常见的 `tsconfig.json` 配置示例： ```json { "compilerOptions": { "target": "ES6", "module": "commonjs", "outDir": "./dist", "strict": true, "esModuleInterop": true }, "include": ["src/**/*"], "exclude": ["node_modules"] } ``` 上述配置指定了目标 JavaScript 版本 (`ES6`)、模块化方案 (`commonjs`)、输出路径 (`./dist`) 等参数[^1]。 --- #### 3. 使用 Visual Studio Code 执行 TypeScript 文件 为了更方便地调试和运行 TypeScript 文件，可以在 VSCode 中启用内置的任务功能或扩展插件。 ##### 方法一：利用任务 (Tasks) 自动构建 VSCode 支持通过 Tasks 功能调用 TypeScript 编译器。按下快捷键 `Ctrl+Shift+P` 或者点击顶部菜单栏中的 **Terminal -> Configure Default Build Task** 来打开任务管理界面。选择 `tsc: watch - tsconfig.json` 后，每次保存 `.ts` 文件都会自动触发重新编译。 ##### 方法二：借助扩展插件 推荐安装官方提供的 “TypeScript and JavaScript Language Features” 插件，它可以提供语法高亮显示以及即时错误提示等功能。此外，“Code Runner” 插件能够一键运行单个 TypeScript 脚本文件。 对于复杂场景下的调试需求，还可以配置 launch.json 文件实现断点调试模式。例如： ```json { "version": "0.2.0", "configurations": [ { "type": "pwa-node", "request": "launch", "name": "Launch Program", "skipFiles": ["<node_internals>/**"], "program": "${workspaceFolder}/dist/index.js" } ] } ``` 以上配置允许开发者启动基于 Node.js 的调试会话，并指定入口文件位置为 `dist/index.js`（即由 TypeScript 编译后的产物）。 --- #### 总结 综上所述，要使 Visual Studio Code 正常运行 TypeScript 文件，应先确认开发环境搭建完毕，再合理调整项目结构与相关配置项。最终结合 IDE 内建特性提升工作效率。
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值