IDE - Visual Studio Code
https://code.visualstudio.com/
En Visual Code es un entorno de desarrolladores de Microsoft, pero de código abierto, la razón por la que aparece este entorno de desarrollo, es porque ni más ni menos que Microsoft es el creador de Typescript, VS Code es un IDE que nos permitirá automatizar tareas para ello abrimos el menú pulsando el F1
y escribimos Configure task Runner
hacemos click y seleccionamos tsconfig.json
esto nos generará una carpeta llamada y dentro de ella un archivo llamado task.json
que sería así:
{
// 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"
}
Buscador
Para buscar en todos los ficheros de un proyecto utilizamos ctrl + alt + t
Debuggin
Para poder debuggear en Visual Code ts, necesitamos configurar el archivo de configuración tsconfig
y en la línea sourceMap
la ponemos a true dejando el fichero de configuración de la siguiente forma:
{
"compilerOptions": {
"module": "commonjs",
"target": "es5",
"noImplicitAny": false,
"sourceMap": true
},
"exclude": [
"node_modules"
]
}
Una vez modificada esa línea se generará un archivo .map con el mismo nombre del archivo .ts que tengamos en ese archivo .map estarán asociadas las líneas del archivo .js
compilado y la línea del archivo .ts
una vez modificado, pondremos el punto de debug donde deseemos y presionaremos F5
para ejecutar el código aparecerá un dialogo que nos preguntará que tipo de servidor queremos elegir, elegiremos NodeJS
y configuraremos el archivo de configuración para que quede así:
{
"version": "0.2.0",
"configurations": [
{
"name": "Iniciar",
"type": "node",
"request": "launch",
"program": "${workspaceRoot}/app.ts",
"stopOnEntry": false,
"args": [],
"cwd": "${workspaceRoot}",
"preLaunchTask": null,
"runtimeExecutable": null,
"runtimeArgs": [
"--nolazy"
],
"env": {
"NODE_ENV": "development"
},
"externalConsole": false,
"sourceMaps": true,
"outDir": null
},
{
"name": "Asociar",
"type": "node",
"request": "attach",
"port": 5858,
"address": "localhost",
"restart": false,
"sourceMaps": false,
"outDir": null,
"localRoot": "${workspaceRoot}",
"remoteRoot": null
},
{
"name": "Attach to Process",
"type": "node",
"request": "attach",
"processId": "${command.PickProcess}",
"port": 5858,
"sourceMaps": false,
"outDir": null
}
]
}
Las líneas modificadas del original han sido las siguientes:
"sourceMaps": true,
"program": "${workspaceRoot}/app.ts",
Para debuggear al siguiente punto de debug utilizamos el botón F10
y para un paso más controlado un F11