web-dev-qa-db-ja.com

Visual StudioコードでTypeScriptファイルをデバッグする方法

visual Studioコードのバージョン0.3を使用しており、ソースマップを有効にしてtsファイルをデバッグする方法がわからない

次のエラーが表示されますcan't launch program '/Projects/app-server/server.ts'; enabling source maps might help

ソースマップとTypeScriptデバッグを有効にするにはどうすればよいですか。私のソースマップはtrueに設定されています

tsconfig.json

{
    "compilerOptions": {
        "target": "ES5",
        "module": "commonjs",
        "sourceMap": true
    }
}

launch.json

{
    "version": "0.1.0",
    // List of configurations. Add new configurations or edit existing ones.  
    // ONLY "node" and "mono" are supported, change "type" to switch.
    "configurations": [
        {
            // Name of configuration; appears in the launch configuration drop down menu.
            "name": "Launch server.ts",
            // Type of configuration. Possible values: "node", "mono".
            "type": "node",
            // Workspace relative or absolute path to the program.
            "program": "server.ts",
            // Automatically stop program after launch.
            "stopOnEntry": true,
            // Command line arguments passed to the program.
            "args": [],
            // Workspace relative or absolute path to the working directory of the program being debugged. Default is the current workspace.
            "cwd": ".",
            // Workspace relative or absolute path to the runtime executable to be used. Default is the runtime executable on the PATH.
            "runtimeExecutable": null,
            // Environment variables passed to the program.
            "env": { }
        }, 
        {
            "name": "Attach",
            "type": "node",
            // TCP/IP address. Default is "localhost".
            "address": "localhost",
            // Port to attach to.
            "port": 5858
        }
    ]
}
typescriptvisual-studio-code
42
MonkeyBonkey

この構成は私のためにうまく機能しています：

プロジェクト配布

|-- .vscode
    |----- launch.json
|-- bin
    |----- app.js
    |----- app.js.map
|-- src
    |----- app.ts
|-- node_modules
    |-- [..]
|-- tsconfig.json
|-- [...]

アイデアは、TypeScriptをsrcフォルダーの下にコンパイルし、binフォルダーの下に配置することです。

tsconfig.json

sourceMapオプションをアクティブにすることが重要です。

{
    "compilerOptions": {
        "emitDecoratorMetadata": true,
        "module": "commonjs",
        "target": "ES5",
        "outDir": "bin",
        "rootDir": "src",
        "sourceMap": true
    }
}

launch.json

====編集====

これは、現在Visual Studio Code v1で使用している構成です。

{
    "version": "0.2.0",
    "configurations": [
        {
            "args": [],
            "cwd": "${workspaceRoot}",
            "env": {
                "NODE_ENV": "development"
            },
            "externalConsole": false,
            "name": "DEBUG",
            "outDir": "${workspaceRoot}/bin",
            "preLaunchTask": "compile",
            "program": "${workspaceRoot}/src/app.ts",
            "request": "launch",
            "runtimeArgs": [
                "--nolazy"
            ],
            "runtimeExecutable": null,
            "sourceMaps": true,
            "stopOnEntry": false,
            "type": "node"
        },
        {
            "name": "Attach",
            "type": "node",
            "request": "attach",
            "port": 5858
        }
    ]
}

キーpreLaunchTaskは、タスクランナーを gulp として使用している場合に非常に役立つことに注意してください。IDEはタスクを名前で検出できるためです。

ランニング

  1. tsをコンパイルします（端末で入力rm -r bin/ ; tscまたはコンパイルタスクの実行）
  2. 視覚的なコードでLaunch type（設定名）
  3. 楽しい！

debuging

48
Manu

それはリリースを経てますますシンプルになったと思います...

ts-nodeをインストールしたので、設定ファイルは非常にシンプルになります...

launch.json

{
        "name": "Launch index.ts",
        "type": "node",
        "request": "launch",
        "runtimeArgs": [
            "-r",
            "ts-node/register"
        ],
        "args": [
            "${workspaceFolder}/src/index.ts"
        ]
}

注目に値する2つのことがあります。

  • runtimeArgs-ts-nodeを登録してTypeScriptファイルを処理するためにノードに渡されます。
  • programプロパティはありません。代わりに、開始するTSファイルの名前が最初の引数として指定されます。

そうすれば、TSをJSにコンパイルする必要はなく、TSで記述されたモジュールをまだJSにコンパイルされていない状態にすることもできます。

22
Grogi

これが、2017年11月現在の最新のTSおよびVsCodeで私のために働いていることです

次の構成は、VS Code内でサーバーを起動してTSをデバッグするのに役立ちます

これは、mytsconfig.jsonのようなものです：

{
    "compilerOptions": {
        "declaration": false,
        "emitDecoratorMetadata": true,
        "experimentalDecorators": true,
        "lib": ["es2017", "dom"],
        "module": "commonjs",
        "moduleResolution": "node",
        "outDir": "../build",
        "sourceMap": true,
        "target": "es2016",
        "typeRoots": [
            "../node_modules/@types"
        ]
    },
    "include": [
        "**/*.ts"
    ],
    "exclude": [
        "../node_modules",
        "../*.js"
    ]
}

そして、これは私のディレクトリ構造のようです：

enter image description here

注意を払えば、srcフォルダーとbuildフォルダー（結果のトランスポートされたJSファイルとマップファイルを含む）が並んで表示されるので、論理的なディレクトリ構造を維持できます。

さて、今すぐlaunch configが来ます：

{
            "type": "node",
            "request": "launch",
            "name": "Start and Debug",
            "preLaunchTask": "nb-tsc-watch",
            "timeout": 10000,
            "program": "${workspaceFolder}/backend/src/app.ts",
            "restart": true,
            "cwd": "${workspaceRoot}",
            "outFiles": [
                "${workspaceFolder}/backend//build/**/*.js"
            ],
            "sourceMaps": true
        }

使用したいpreLaunchTaskを使用することも、スキップすることもできます。スキップした場合、TSをJSに手動で変換する必要があります。

これがタスクで行うことですnb-tsc-watch

{
            "label": "nb-tsc-watch",
            "type": "TypeScript",
            "tsconfig": "backend/src/tsconfig.json",
            "option": "watch",
            "problemMatcher": [
                "$tsc-watch"
            ]
        }
12
Aakash Malhotra

以下のセットアップでは、ブレークポイントを使用してmocha chaiをテストします。これは、srcをlibディレクトリにトランスパイルし、sourceMappingを使用してlibでテストを実行してsrcに戻します。

。vscode/launch.json

{
    "type": "node",
    "request": "launch",
    "preLaunchTask": "tsc",
    "name": "Run Mocha",
    "program": "${workspaceRoot}/node_modules/mocha/bin/_mocha",
    "args": ["lib/**/*.js"],
    "cwd": "${workspaceRoot}",
    "sourceMaps": true,
    "outFiles": ["${workspaceRoot}/lib/**/*.js"]
}

tsconfig.json

{
  "compilerOptions": {
      "module": "commonjs",
      "sourceMap": true,
      "outDir": "lib",
      "target": "es6"
  },
  "include": [
    "src/**/*.ts"
  ],
  "exclude": [
    "node_modules"
  ]
}

。vscode/tasks.json

{
    // See https://go.Microsoft.com/fwlink/?LinkId=733558
    // for the documentation about the tasks.json format
    "version": "0.1.0",
    "command": "tsc",
    "isShellCommand": true,
    "args": ["-p", "."],
    "showOutput": "silent",
    "problemMatcher": "$tsc"
}

package.jsonインストール済みモジュールを表示します。スクリプトはデバッグとは無関係です。

"scripts": {
  "test": "mocha --compilers ts:ts-node/register src/**/*.spec.ts",
  "test:coverage": "nyc -e '.ts' npm test"
},
"dependencies": {
  "@types/chai": "^3.4.35",
  "@types/mocha": "^2.2.39",
  "@types/node": "^7.0.5",
  "@types/sinon": "^1.16.35",
  "chai": "^3.5.0",
  "mocha": "^3.2.0",
  "nyc": "^10.1.2",
  "sinon": "^1.17.7",
  "ts-node": "^2.1.0",
  "TypeScript": "^2.2.1"
}
  • Mac OSX 10.12.3 Sierra
  • Visual Studioコード1.10.1
  • NodeJS v7.7.1
7
mummybot

2017年2月現在のVSCodeのより新しいバージョンでは、これが私にとってうまくいったものです（@manuと@tommy Falgoutの両方が提供しているものの組み合わせです）：

Json outファイルはdestフォルダーにあり、ソースはsrcフォルダーにあると想定しています

/。vscode/launch.json

{
    "version": "0.2.0",
    "configurations": [{
            "type": "node",
            "request": "launch",
            "name": "Launch",
            "sourceMaps": true,
            "stopOnEntry": true,
            "console": "internalConsole",
            "cwd": "${workspaceRoot}",
            "program": "${workspaceRoot}/src/main.ts",
            "outFiles": ["${workspaceRoot}/dest/*.js"]
        },
        {
            "type": "node",
            "request": "attach",
            "name": "Attach to Process",
            "port": 5858,
            "outFiles": []
        }
    ]
}

tsconfig.json

{
    "compilerOptions": {
        "emitDecoratorMetadata": true,
        "experimentalDecorators": true,
        "sourceMap": true,
        "module": "commonjs",
        "outDir": "dest",
        "rootDir": "src"
    },
    "exclude": [
        "node_modules"
    ]
}
7
code5

@manuの答えは、正しい方向を示してくれました。ただし、VSCodeの最新バージョンでは、まだ同じ問題がありました。これは私のために働いた修正です：

https://github.com/Microsoft/vscode/issues/13499

"outFiles": [ "${workspaceRoot}/js/*.js" ]
3
Tommy Falgout

2017/12/17
。vscode/launch.json `` `json

{
  // Use IntelliSense to learn about possible attributes.
  // Hover to view descriptions of existing attributes.
  // For more information, visit: https://go.Microsoft.com/fwlink/?linkid=830387
  "version": "0.2.0",
  "configurations": [
    {
      "type": "node",
      "request": "launch",
      "program": "${workspaceRoot}/src/index.ts",
      "outFiles": [
        "${workspaceRoot}/dist/index.js"
      ],
      "sourceMaps": true,
      "stopOnEntry": false,
      "args": [],
      "cwd": "${workspaceRoot}",
      "env": {
          "NODE_ENV": "development"
      },
      "console": "internalConsole",
      "preLaunchTask": "compile",
      "name": "DEBUG"
    },
    {
      "type": "node",
      "request": "attach",
      "name": "Attach to Process",
      "port": 5858
    }
  ]
}

。vscode/tasks.json

{
  // See https://go.Microsoft.com/fwlink/?LinkId=733558
  // for the documentation about the tasks.json format
  "version": "2.0.0",
  "tasks": [
    {
      "label": "compile",
      "type": "TypeScript",
      "tsconfig": "tsconfig.json",
      "problemMatcher": [
          "$tsc"
      ],
      "group": {
          "kind": "build",
          "isDefault": true
      }
    }
  ]
}

tsconfig.json

{
  "compilerOptions": {
    "declaration": false,
    "emitDecoratorMetadata": true,
    "experimentalDecorators": true,
    "moduleResolution": "node",
    "target": "es5",
    "module": "commonjs",
    "sourceMap": true,
    "outDir": "dist",
    "rootDir": "src"
  },
  "include": [
    "**/*.ts"
  ],
  "exclude": [
    "node_modules"
  ]
}
3
Bruce Lee

PreLaunchTaskとして独自のPowerShell関数を作成しました。これは以前のソリューションよりも悪いソリューションになる可能性がありますが、preLaunchTaskフィールドでより多くのタスクを注入する柔軟性を追加できます。現在、配列をサポートしていないため、起動アクションの前に実行できるタスクは1つだけです。

launch.json

{
    "version": "0.2.0",
    "configurations": [
        {
            "type": "node",
            "request": "launch",
            "name": "Node.js",
            "program": "${file}",
            "preLaunchTask": "RebuildTypeScript",
            "outFiles": [
                "${workspaceRoot}/js/**/*.js"
            ]
        }
    ]
}

tasks.json

{
    "version": "2.0.0",
    "tasks": [
        {
            "type": "TypeScript",
            "tsconfig": "tsconfig.json",
            "group": {
                "kind": "build",
                "isDefault": true
            }
        },        
        {
            "taskName": "RebuildTypeScript",
            "type": "Shell",
            "command": "Powershell ./RebuildTypeScript.ps1",
            "group": "none",
            "presentation": {
                "reveal": "never"
            }
        }       
    ]
}

RebuildTypeScript.ps1

$currentDir = Split-Path -Path $MyInvocation.MyCommand.Definition -Parent
function CompileTypeScriptFiles($folder) {
    $tsFiles = Get-ChildItem $folder -Filter "*.ts" -Recurse
    $tsFiles | ForEach-Object {
        $tsFile = $_.FullName;
        $options = $tsFile + " --outDir js --sourceMap"
        Start-Process "tsc" $options 
    }
}


CompileTypeScriptFiles $currentDir
0
Teoman shipahi