搭建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开始调试。

相关推荐
freewlt几秒前
node版本过高导致vue-cli项目无法运行( error:0308010C:digital envelope routines::unsupported)
前端·javascript·vue.js
玩电脑的辣条哥3 小时前
Python如何播放本地音乐并在web页面播放
开发语言·前端·python
ew452183 小时前
ElementUI表格表头自定义添加checkbox,点击选中样式不生效
前端·javascript·elementui
suibian52353 小时前
AI时代:前端开发的职业发展路径拓宽
前端·人工智能
Moon.93 小时前
el-table的hasChildren不生效?子级没数据还显示箭头号?树形数据无法展开和收缩
前端·vue.js·html
垚垚 Securify 前沿站3 小时前
深入了解 AppScan 工具的使用:筑牢 Web 应用安全防线
运维·前端·网络·安全·web安全·系统安全
工业甲酰苯胺6 小时前
Vue3 基础概念与环境搭建
前端·javascript·vue.js
mosquito_lover17 小时前
怎么把pyqt界面做的像web一样漂亮
前端·python·pyqt
柴柴的小记9 小时前
前端vue引入特殊字体不生效
前端·javascript·vue.js
柠檬豆腐脑10 小时前
从前端到全栈:新闻管理系统及多个应用端展示
前端·全栈