vscode——如何调试typescript

简介: vscode——如何调试typescript

前言

最近在学习TS,为了方便研究下如何使用vscode进行调试,前提是您本地已经安装过typescript且可正常使用tsc;

debugging: https://code.visualstudio.com/docs/editor/debugging#_debug-actions

tasks: https://code.visualstudio.com/docs/editor/tasks#_typescript-hello-world

内容

配置tsconfig.json

根据自己的实际去配置即可

{
    "compilerOptions": {
        "module": "system",
        "target": "ES2015",
        "strict": true,
        "outDir": "./dist",
        "outFile": "./dist/app.js",
        "sourceMap": true
        
    },
    "include": [
        "./src/**/*"
    ]
}

配置运行tasks.json

当然也可以在终端运行tsc -w

{
  "version": "2.0.0",
  "tasks": [
    {
      "type": "typescript",
      "tsconfig": "tsconfig.json",
      "option": "watch",
      "problemMatcher": [
        "$tsc-watch"
      ],
      "group": "build",
      "label": "tsc: 监视 - tsconfig.json"
    }
  ]
}

创建配置launch.json

{
    // 使用 IntelliSense 了解相关属性。 
    // 悬停以查看现有属性的描述。
    // 欲了解更多信息,请访问: https://go.microsoft.com/fwlink/?linkid=830387
    "version": "0.2.0",
    "configurations": [
        {
            "type": "pwa-node",
            "request": "launch",
            "name": "Launch Program",
            "skipFiles": [
                "<node_internals>/**"
            ],
            // 对应tsconfig.json下的outFile
            "program": "${workspaceRoot}/dist/app.js"
        }
    ]
}

学无止境,谦卑而行.

目录
相关文章
|
5月前
|
JavaScript
VSCode 代码调试
VSCode 代码调试
|
5月前
|
JSON JavaScript 前端开发
设置WebStorm像VSCode一样每行代码结尾自动格式化加入“;”分号(JavaScript、TypeScript格式化)
设置WebStorm像VSCode一样每行代码结尾自动格式化加入“;”分号(JavaScript、TypeScript格式化)
|
1月前
|
开发框架 .NET C#
VSCode开发.net项目时调试无效
【9月更文挑战第22天】在使用 VSCode 开发 .NET 项目时遇到调试问题,可从项目配置、调试配置、调试器安装、运行环境、日志和错误信息等方面排查。确认项目类型及文件配置,检查 `launch.json` 文件及配置项,确保调试器扩展已安装并启用,验证 .NET 运行时版本和环境变量,查看 VSCode 输出窗口和项目日志文件,检查权限及代码错误。若问题仍未解决,可查阅官方文档或社区论坛。
|
4月前
|
编译器 C语言 C++
【VS Code】安装配置调试C/C++(一)
【VS Code】安装配置调试C/C++(一)
95 0
|
2月前
|
JavaScript 前端开发 编译器
TypeScript教程(一)在vscode中的配置TypeScript环境
本文是一篇TypeScript入门教程,介绍了在VS Code中配置TypeScript环境的步骤,包括安装Node.js、使用npm安装TypeScript、配置npm镜像源、安装VS Code的TypeScript扩展,以及创建和运行一个简单的TypeScript "Hello World"程序。
TypeScript教程(一)在vscode中的配置TypeScript环境
|
2月前
vscode——如何开启Edge进行调试
vscode——如何开启Edge进行调试
60 4
vscode——如何开启Edge进行调试
|
2月前
|
JavaScript 前端开发 C++
【Azure Function】调试 VS Code Javascript Function本地不能运行,报错 Value cannot be null. (Parameter 'provider')问题
【Azure Function】调试 VS Code Javascript Function本地不能运行,报错 Value cannot be null. (Parameter 'provider')问题
|
4月前
|
JavaScript 前端开发 C++
vscode编辑器中如何调试nextjs代码
代码可调式的重要性不言而喻。 对于Programer来说,自己编写的程序能够被优雅调试是一件幸福的事情,特别是习惯了后端程序调试的开发者... 在折腾Nextjs项目的日子里,我走了很多弯路才弄明白在vs code中如何优雅的调试代码。
206 1
vscode编辑器中如何调试nextjs代码
|
4月前
|
存储 前端开发 JavaScript
VSCode调试揭秘:Live Server助力完美测试Cookie与Session,远超“Open in Browser“!
VSCode调试揭秘:Live Server助力完美测试Cookie与Session,远超“Open in Browser“!
|
4月前
|
项目管理 C++
【VS Code】安装配置调试C/C++(二)
【VS Code】安装配置调试C/C++(二)
82 1