VS Code, Typescript – Bare Metal New Project

By Beej

i’m basically following this guide, while humbly attempting to trim down to bare necessity and re-align configs with crucial bits that’ve shifted since then… and likely to continue shifting 😐

  1. install Node… there’s many ways but their setup.exe is handy… this includes npm
  2. from cmd.exe: npm install -g typescript (-g means globally vs project specific)
  3. install VS Code via setup.exe
  4. launch VS Code… commands inside VS Code designated as “vsc>” from here-on
  5. vsc> File > Open > New Folder > “projectFolder” > then Open that folder
  6. vsc> F1 > type “task” > “Configure Task Runner” > Enter > “TypeScript – Watch Mode” > Enter
    1. this will create a crucial tasks.json file with working default settings…
    2. -AND- that “watch mode” choice means the moment you save any .ts file, the IDE will automatically regen the corresponding .js files… which plays into live edit and continue style debugging
  7. vsc> File > New File > populate with the following json block and save as tsconfig.json … this directs vscode to “transpile” .ts script to standard .js for us json { "compilerOptions": { "target": "es5", "outDir": "out/", "sourceMap": true } }

  8. vsc> File > New File > throw in something simple like console.log("Hello World!"); and save as app.ts
  9. vsc> build aka compile via CTRL+SHIFT+B… after a few pregnant seconds, this will gen some stuff in the out folder that we specified in above tsconfig.json
  10. vsc> CTRL+SHIFT+D to get into Debug panel > click the gear icon which creates and opens default launch.json which should have working defaults going by what we’ve done previously
  11. crucial and subtle, navigate back to the app.ts file as the active tab you wish to run/debug (this corresponds with the relative reference, "program": "${file}", in launch.json)
  12. now we should be able to simply hit F5 to run/debug from here-on as we’d normally expect… F9 to set breakpoints, etc.

hopefully you’re off to the races and you can bootstrap yourself further by googling

i am a bit “ashamed” this is still so obtuse

Share: Twitter Facebook LinkedIn