Debug Typescript project using VS Code

Steps:

  • SETUP
    • Create new dir and open in vs code
    • add new file: a.ts with code
  • BUILD
    • build the file using “Ctrl+Shit+B”. You’ll be prompted to add build config. Add it for Typescript watch mode from the options. VS Code will auto create tasks.json file in .vscode dir
    • Again build using “Ctrl+Shit+B”. This time build will prompt you to add tsconfig.json
    • Create it and do Ctrl+Space inside the file to scaffold basic config. Add sourcemap and target to it and whatever else you want.
    • Finally Build again.
  • RUN
    • Create launch.json in .vscode dir and click on add config and add version and configuration attributes. Inside config attribute, ctrl+space and select node in intellisense
    • Run using Ctrl+ F5 while a.ts is open.
    • Debug by adding breakpoints in a.ts and using F5 to Launch Debugger.

PS: To hide js and map files from workspace, use workspace settings and add this to it: {"files.exclude": {"**/*.{js,js.map}": true}}

PPS: To enable linting, install tslint: npm install -g tslint. Next install the tslint extension in vscode. Finally add tslint.json if you want custom rules (Note that these override the default rules so better not do it) and add this to workspace settings "tslint.autoFixOnSave": true, "tslint.rulesDirectory": "./tslint.json"

PS: If your index.html is inside src/main in repo root dir (containing .git) and bulid goes to build/main, then in launch.json, set: “webRoot”: “${workspaceRoot}/src/main”

 

Sample Code: https://github.com/tkhemani/TSCode

Advertisements

Leave a Reply

Fill in your details below or click an icon to log in:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out / Change )

Twitter picture

You are commenting using your Twitter account. Log Out / Change )

Facebook photo

You are commenting using your Facebook account. Log Out / Change )

Google+ photo

You are commenting using your Google+ account. Log Out / Change )

Connecting to %s