搭建JavaScript和TypeScript开发调试环境

参考链接:搭建JavaScript和TypeScript开发调试环境_javascript开发环境搭建-CSDN博客

调试TypeScript

Node.js是不能直接运行TypeScript脚本的,我们使用Node.js运行TypeScript脚本一般采用如下方法: 使用TypeScript官方提供的tcs工具将TypeScript脚本转化为JavaScript,然后再使用Node.js运行js脚本,大致流程如下:

css 复制代码
tcs --outFile index.js index.ts
node index.js

而Node.js的扩展模块ts-node可以简化上述操作(其内部也是使用的tcs和node),将上面二步操作合二为一:

复制代码
ts-node index.ts

所以,我们这里采用ts-node模块来作为TypeScript脚本的运行时环境。

由于我们采用了ts-node工具来运行TypeScript脚本,Visual Studio Code没有内置该工具的调试配置,所以我们需要在luanch.json中自定义一个适用于ts-node的调试环境配置。

注意:如果需要自定义配置,那么工程文件必须在一个单独的目录中,并使用Visual Studio Code打开这个目录(对着目录点右键选择使用Visual Studio Code打开即可)

大致步骤如下:

新建项目目录(假设叫TSDemo)

使用Visual Studio Code打开该目录,并在"查看"菜单中选择打开"终端"(之所以在Visual Studio Code中打开终端,纯属是为了方便,因为在Visual Studio Code中打开终端,终端会自动切换到项目当前目录,且不用多个窗口之间切换)。

在终端中依此执行如下命令:

csharp 复制代码
# 生成package.json文件
npm init -y

# 安装typescript
npm install typescript -S

 # 安装ts-node
 npm install ts-node -S

luanch.json的路径为项目目录\.vscode\luanch.json,按照下图依次点击左侧工具栏"运行"->"创建launch.json文件":

打开自动生成的luanch.json文件,在configurations节添加如下配置:

bash 复制代码
{
    "version": "0.2.0",
    "configurations": [
        {
            "name": "Current TS File",
            "type": "node",
            "request": "launch",
            "program": "${workspaceRoot}/node_modules/ts-node/dist/bin.js",
            "args": [
                "${relativeFile}"
            ],
            "cwd": "${workspaceRoot}",
            "protocol": "inspector"
        }
    ]
}

打开需要调试的TypeScript文件,快捷键F5开始调试。

相关推荐
golang学习记2 分钟前
从0死磕全栈之使用 VS Code 调试 Next.js 应用完整指南
前端
Mintopia4 分钟前
🧩 隐私计算技术在 Web AIGC 数据处理中的应用实践
前端·javascript·aigc
尘世中一位迷途小书童6 分钟前
代码质量保障:ESLint + Prettier + Stylelint 三剑客完美配置
前端·架构
Mintopia7 分钟前
🧭 Next.js 架构与运维:当现代前端拥有了“分布式的灵魂”
前端·javascript·全栈
尘世中一位迷途小书童16 分钟前
从零搭建:pnpm + Turborepo 项目架构实战(含完整代码)
前端·架构
JarvanMo26 分钟前
Flutter 中的 ClipRRect | 每日 Flutter 组件
前端
某柚啊27 分钟前
iOS移动端H5键盘弹出时页面布局异常和滚动解决方案
前端·javascript·css·ios·html5
心.c27 分钟前
如何学习Lodash源码?
前端·javascript·学习
JamSlade34 分钟前
react 无限画布难点和实现
前端·react.js
im_AMBER40 分钟前
React 02
前端·笔记·学习·react.js·前端框架