vscode 是目前比较主流的编辑器之一，但是我主要使用 WebStorm，不得不说 WebStorm 真的非常非常强大，但是昨夜配置 WebStorm 调试 TypeScript 到后半夜也没有搞定~~，有会配置的同学可以给我留下言，然后今早起来试了下 vscode 调试 TypeScript，完全OK。
目标
- 调试 TypeScript
- 调试 Jest + TypeScript
安装依赖
# 用于调试 TypeScript
yarn add typescript ts-node
# 偏爱 Jest 添加测试套件
yarn add jest ts-jest @types/jest
jest 配置
// package.json 追加
"jest": {
"testURL": "http://localhost",
"transform": {
"^.+\\.(ts|tsx)$": "ts-jest"
},
"testMatch": [
"**/test/*.+(ts|tsx)"
],
"moduleFileExtensions": [
"ts",
"tsx",
"js",
"jsx",
"json",
"node"
]
}
testMatch 根据实际情况自行调整
配置 launch.json
使用 vscode 打开工作空间，第一次按 F5 会让你选择环境，点击 Node.js，自动生成 .vscode/launch.json 。
{
"version": "0.2.0",
"configurations": [
{
"name": "jest:debug",
"type": "node",
"request": "launch",
"args": ["${relativeFile}"],
"program": "${workspaceRoot}/node_modules/jest-cli/bin/jest.js",
"runtimeArgs": ["-r", "ts-node/register"]
},
{
"name": "ts:debug",
"type": "node",
"request": "launch",
"args": ["-r", "ts-node/register", "${relativeFile}"],
}
]
}
预期效果
在 vscode 左侧菜单可以找到调试选项，调试 TypeScript 请选择 ts:debug，调试 Jest + TypeScript 请选择 jest:debug，找到想要调试的文件按 F5 即可进入调试模式。
DEBUG
