vscode调试ts

vscode无法直接执行ts文件，需要安装typescript，将typescript转化为js，在通过运行转化的js文件来进行调试，生成js文件时要生成对应的.js.map(映射文件)，才能在ts文件打断点测试

安装ts

安装typescript

npm install typescript -D

添加tsconfig.json文件

根据要求配置tsconfig.json文件

{"compilerOptions": {"baseUrl": ".","outDir": "./build/src", //输出目录"experimentalDecorators": true,"emitDecoratorMetadata": true,"strict": false,  //是否开启类型检测"allowJs": true, //允许JS文件，一些和JS混合的项目会使用"sourceMap": true,  //生成映射文件"esModuleInterop": true,"moduleResolution": "node",//路径别名"paths": {"@/*": ["src/*"]},},//包含的编译文件"include": ["src/**/*"],//不包含的编译文件"exclude": ["node_modules",]
}

配置package.json

在package.json中配置这条脚本命令，通过tsc来编译ts文件为js

  "scripts": {"tstest": "tsc -p ./tsconfig.json", //-p 为读取配置文件路径},

配置vscode

配置launch.json

"configurations": [  {"type": "node","request": "launch",  //运行模式"name": "ts","program": "${workspaceFolder}/build/${relativeFileDirname}/${fileBasenameNoExtension}.js",// 如果存在SourceMap就使用"sourceMaps": true,  // 调试之前要做的任务名(运行tasks.json文件里面的脚本任务)"preLaunchTask": "build test",   // 是否启动后自动停止程序"stopOnEntry": false,  // 生成的代码中，如果无法映射回源代码，就自动单步执行"smartStep": true, }]

配置tasks.json

{"version": "2.0.0","tasks": [{"label": "tstest",  // 该任务的名字，只需要增加这一条即可"type": "npm","script": "ts:test",  //任务等价于 npm run ts:test}]
}

vscode调试ts相关推荐

如何用vscode调试ts代码
如何用vscode调试ts代码准备工作:ts下载好,vscode下载好,node下载好,npm包安装好打开vscode,在拓展商店搜索"Code Runner",下载好, 编辑 ...
Vscode 调试TS
首先:新建需要调试文件 testdebugger01.ts 修改配置文件 {// 使用 IntelliSense 了解相关属性. // 悬停以查看现有属性的描述.// 欲了解更多信息,请访问: htt ...
如何在VScode 中调试 ts 文件 Unit test
最近在使用VScode 调试 mocha 写的 UT, 遇到一个问题,executor.js文件中require了某个ts写的文件代码,跑ut的时候回报错说无法找到. 解决方式是在参数中加入 &quo ...
ts快捷键 vscode_vscode怎么调试ts
vscode怎么调试ts? vscode 调试 TypeScript 环境 typescript :2.5.2 vscode:1.16.0 vscode 直接调试 ts 文件源码:github (h ...
使用 vscode 调试前端代码
使用 vscode 调试前端代码今天我们以webpack项目为基础讲解配置复制代码 1. 安装插件 Debugger for Chrome 2. 修改 config/index.js 将devto ...
(004)RN开发VSCode调试ReactNative项目
1. 添加配置文件点击小蜘蛛后,按第一步.第二步操作即可接着选择调试平台☑️下面四个.点击OK,会生成一个launch.json文件并打开. 2. 添加断点接下来,我们回到DEDUG,点击右边的 ...
使用vscode调试Nodejs
之前想用vscode调试nodejs,总是不成功,也走很多弯路,现在记录下来. 首先新建一个文件夹,用vscode打开这个文件夹, 用vscode自带的终端执行npm init,输入名称,其他的可不输 ...
ubuntu下vscode调试开发踩过的坑
最近刚过安装了中文版的ubuntu18.04.1,安装完之后想在ubuntu上安装vscode做c/c++的开发调试,踩了不少坑,在此记录一下,希望大家在这条路上不要再踩同样的坑. 1.安装vscod ...
vscode 调试_如何使用VSCode调试JS？
更多精彩,请点击上方蓝字关注我们! 序言做前端开发的朋友经常需要使用Visual Studio Code编辑代码,很多朋友就想在VSCode调试JS代码,下面我们就介绍下如何配置操作. 一.环境准备 ...

vscode调试ts

vscode调试ts

安装ts

添加tsconfig.json文件

配置package.json

配置vscode

配置launch.json

配置tasks.json

vscode调试ts相关推荐

最新文章

热门文章