web-dev-qa-db-fra.com

comment déboguer des fichiers TypeScript dans le code Visual Studio

j'utilise la version 0.3 du code de Visual Studio et je ne sais pas comment activer les cartes source et déboguer le fichier ts

J'obtiens l'erreur suivante can't launch program '/Projects/app-server/server.ts'; enabling source maps might help

comment puis-je activer les cartes mères et le débogage TypeScript. Sourcemap est défini sur true dans mon 

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
38
MonkeyBonkey

Cette configuration fonctionne bien pour moi: 

La distribution du projet

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

L'idée est de compiler le TypeScript dans le dossier src et de le placer dans le dossier bin.

tsconfig.json

Il est important d’activer l’option sourceMap. 

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

launch.json

==== EDIT ==== 

Voici la configuration que j'utilise actuellement dans 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
        }
    ]
}

Notez que la clé preLaunchTask est extrêmement utile si vous utilisez un exécuteur de tâches en tant que gulp car le IDE est capable de détecter ses tâches par son nom. 

Fonctionnement

  1. Compilez votre ts (en tapant un terminal rm -r bin/ ; tsc ou en exécutant votre tâche de compilation)
  2. Dans Visual Code play Launch type (notre nom de configuration)
  3. Prendre plaisir!

debuging

46
Manu

C'est ce qui a fonctionné pour moi avec les dernières TS et VsCode en novembre 2017

La configuration suivante vous aidera à démarrer le serveur et à déboguer le TS dans VS Code.

Voici à quoi ressemble mon tsconfig.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"
    ]
}

Et voici à quoi ressemble ma structure de répertoires :

 enter image description here

Si vous faites attention, vous verrez mon dossier src et mon dossier de construction (contenant les fichiers JS transpilés et les fichiers map résultants) vivant côte à côte, ce qui m'aide vraiment à maintenir une structure de répertoires logique.

Ok, voici la configuration launch:

{
            "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
        }

Vous pouvez utiliser la tâche que vous souhaitez utiliser avant la tâche ou même la ignorer .. Si vous la ignorez, vous devrez transpiler TS en JS manuellement.

C'est ce que je fais dans ma tâche nb-tsc-watch

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

Je pense que cela est devenu plus simple au fil des versions ...

J'ai installé ts-node, donc mes fichiers de configuration sont très simples ...

launch.json

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

Il y a deux choses à noter:

  • runtimeArgs - passé au noeud pour enregistrer le ts-node pour gérer les fichiers TypeScript.
  • il n'y a pas de propriété program. Le nom du fichier TS à démarrer est donné comme premier argument.

De cette façon, vous n'avez pas besoin de compiler le TS sur JS, vous pouvez même avoir des modules écrits dans TS non encore compilés pour JS. 

8
Grogi

La configuration ci-dessous teste mocha chai avec des points d'arrêt. Cela fonctionne en transmettant src dans le répertoire lib, puis en exécutant des tests dans lib avec sourceMapping vers 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 pour afficher les modules installés. Les scripts ne sont pas pertinents pour le débogage.

"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
  • Code Visual Studio 1.10.1
  • NodeJS v7.7.1
7
mummybot

Pour la version plus récente de VSCode à partir de février/2017, voici ce qui a fonctionné pour moi (c'est une combinaison de ce que @manu et @tommy Falgout ont fourni):

Cela suppose que vos fichiers json out se trouvent dans un dossier dest et votre source dans un dossier src , respectivement. 

/.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

La réponse de @manu m'a orienté dans la bonne direction; Cependant, avec la dernière version de VSCode, j'avais toujours le même problème. C'est le correctif qui a fonctionné pour moi:

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

Je viens d'écrire ma propre fonction PowerShell en tant que preLaunchTask. Cela peut être une solution pire que les précédentes, mais peut ajouter plus de flexibilité pour injecter plus de tâches dans le champ preLaunchTask. Parce qu'actuellement, il ne prend pas en charge la matrice et permet qu'une seule tâche soit exécutée avant l'action de lancement.

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