Geek Answers Handbook

Installing Visual Studio Code to Transfer Typescript to Build and Debug

I have long been (15+ years), I study both Typescript, and the new, more meager Visual Studio Code. I am trying to configure VSCode as VS, where when you press F5 it will move to Javascript and start the debugger.

I found messages that start it when saving or using a different shortcut (executed via tasks.json) - but I'm really surprised that there is no way to do this with such a fundamental command, m really lacking something embarrassing to the obvious.

At this point, I'm just trying to use the "Hello World" greeter sample , extracted directly from Microsoft, where it has the manual step tsc --sourcemap greeter.ts . I just want this to happen automatically, as in VS, on any files that need to be dragged before I start running / debugging.

Does anyone know how to do this? Thanks.

+5
source share
3 answers

Thus, using the answers from the answers here was the path of least resistance. After opening vscode I:

  • File → Open Folder
  • Created an empty subfolder in my HelloWorld code directory in this case
  • Created the tsconfig.json file and copied the example from this article , which:
      {
     "compilerOptions": {
         "target": "es5",
         "module": "commonjs",
         "sourceMap": true
     }
 }
  • Created helloWorld.ts in accordance with the same article as:
      class Startup {
 public static main (): number {
     console.log ('Hello World');
     return 0;
     }
 }
 Startup.main ();
  • Hit F5 (for debugging) and VSCode asked me if I needed a Node.js environment or a VSCode environment, I chose Node.js.
  • He generated launch.json for me, where I made the following changes:
  • The "program" is switched: "$ {workspaceRoot} /app.js", "program": "$ {workspaceRoot} / helloWorld.js ",
  • Replaced null in preLaunchTask with: "preLaunchTask": " tsc ",
  • Replaced 3 instances of sourceMaps from false to true .
  • Hit F5 again, VSCode displays information that no task manager is configured. I click configure and select TypeScript - View Mode .
  • Put a breakpoint on a line in my ts file
  • Hit F5 for the last time and it works!

Thus, the tsc compiler looks pretty slow, it takes about 4-5 seconds to move to my 2 year old Win10 computer. I see the advantage of TypeScript - View mode, so that it can migrate when you click Save. Otherwise, if you flip every time before debugging, it does not seem to detect if it needs to be translated or not, so this is an ideal script that is suitable for Visual Studio developers.

+6
source

Essentially, VS Code allows you to create tasks for automating development processes (cleaning files / folders, compiling, grouping, etc.), and also allows you to create environment configurations to launch your project.

For them to work together, the configuration of the environment allows you to specify preLaunchTask, which will run a given task before debugging. To create a workflow similar to Visual Studio, you can create a compilation task and run the task before the debugger by setting it as preLaunchTask.

An example of tsc (TypeScript compiler) execution before debugging

1. Create a tsconfig.json file in the root directory of your project using your compilation options.

Example tsconfig.json (you may need to change the module settings to best suit your project. Amd is usually a web project, commonjs is usually node.js , but all preferences vary:

 { "compilerOptions": { "target": "es6", "module": "amd", "sourceMap": true, "allowSyntheticDefaultImports": true }, "exclude": [ "node_modules", "bower_components", "jspm_packages", "tmp", "temp" ] }

2. Create a launch.json file to launch and debug the project and install preLaunchTask in tsc.

The easiest way to do this is to just press F5. At the first start, he will ask "Choose environment", if you have already created the launch.json file and want to start a new one, delete the file. For TypeScript, I usually choose node.js , which allows you to run in the process or inside a web context with frameworks such as express .

Example launch.json file (this example applies to express ):

 { "version": "0.2.0", "configurations": [ { "name": "Launch", "type": "node", "request": "launch", "program": "${workspaceRoot}/bin/www", "stopOnEntry": false, "args": [], "cwd": "${workspaceRoot}", "preLaunchTask": "tsc", "runtimeExecutable": null, "runtimeArgs": [ "--nolazy" ], "env": { "NODE_ENV": "development" }, "console": "internalConsole", "sourceMaps": false, "outDir": null } ] }
+3
source

Short answer (in the new project directory):

  • Press Ctrl + Shift + B to create a project in VSCode
  • If .vscode/tasks.json is not already configured, the message will give you the option to Configure the task runner , click this button.
  • Select one of the two predefined TypeScript options.
  • You can close the tasks.json window that opens.

Having tried both TypeScript settings, I prefer ... in watch mode. Thus, after starting the background process using Ctrl + Shift + B once, incremental transfers occur whenever the file is saved, which greatly speeds up the launch of the program for debugging ...

For more information, follow this link: http://code.visualstudio.com/docs/languages/typescript#_transpiling-typescript-into-javascript

If you want to create a source map (good idea), you need to install tsconfig.json . A quick way to do this from VSCode:

  • Press Ctrl + Shift + C to open a command prompt window.
  • type tsc --init --sourceMap to configure the tsconfig.json template
  • enter exit

Finally, if you want to use the source map during debugging, you need to generate and edit the .vscode/launch.json . A quick way to do this:

  • If .vscode/launch.json does not exist yet, pressing F5 will prompt you to select the environment as well. Choose Node.js.
  • Edit the generated file, replacing all events "sourceMaps": false with "sourceMaps": true .

I'm not sure why the defaults do not display the source maps, currently it seems like one of the most common hits on the road when people start using VSCode + TypeScript.

+1
source

More articles:


All Articles