Visual Studio Code 直接调试 TypeScript

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