├── .gitignore ├── .vscode ├── settings.json ├── tasks.json └── launch.json ├── screenshots ├── mocha-debugging.png └── ts-file-debugging.png ├── src ├── index.ts ├── person.ts └── __tests__ │ └── person.tests.ts ├── tsconfig.json ├── package.json └── README.md /.gitignore: -------------------------------------------------------------------------------- 1 | node_modules 2 | dist 3 | *.lock 4 | -------------------------------------------------------------------------------- /.vscode/settings.json: -------------------------------------------------------------------------------- 1 | { 2 | "typescript.tsdk": "./node_modules/typescript/lib" 3 | } -------------------------------------------------------------------------------- /screenshots/mocha-debugging.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/RBCodeCraft/vscode-ts-node-debugging/HEAD/screenshots/mocha-debugging.png -------------------------------------------------------------------------------- /screenshots/ts-file-debugging.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/RBCodeCraft/vscode-ts-node-debugging/HEAD/screenshots/ts-file-debugging.png -------------------------------------------------------------------------------- /src/index.ts: -------------------------------------------------------------------------------- 1 | 2 | import { Person } from './person'; 3 | 4 | let person = new Person('Bob', 34); 5 | 6 | console.log(person.getGreeting()); 7 | -------------------------------------------------------------------------------- /src/person.ts: -------------------------------------------------------------------------------- 1 | 2 | export class Person { 3 | 4 | constructor( 5 | public name: string, 6 | public age: number) { 7 | } 8 | 9 | getGreeting() { 10 | return 'Hi ' + this.name; 11 | } 12 | 13 | } -------------------------------------------------------------------------------- /tsconfig.json: -------------------------------------------------------------------------------- 1 | { 2 | "compilerOptions": { 3 | "module": "commonjs", 4 | "target": "es5", 5 | "noImplicitAny": true 6 | }, 7 | "include": [ 8 | "src/**/*" 9 | ], 10 | "exclude": [ 11 | "src/**/__tests__/*" 12 | ] 13 | } -------------------------------------------------------------------------------- /package.json: -------------------------------------------------------------------------------- 1 | { 2 | "name": "hellotypescript", 3 | "version": "1.0.0", 4 | "main": "dist/index.js", 5 | "license": "CC0-1.0", 6 | "scripts": { 7 | "build": "tsc", 8 | "test": "npm run mocha --recursive ./src/**/__tests__/*", 9 | "mocha": "mocha -r ts-node/register" 10 | }, 11 | "devDependencies": { 12 | "@types/chai": "4.0.4", 13 | "@types/mocha": "2.2.43", 14 | "chai": "4.1.2", 15 | "mocha": "3.5.3", 16 | "ts-node": "3.3.0", 17 | "typescript": "2.5.2" 18 | } 19 | } 20 | -------------------------------------------------------------------------------- /.vscode/tasks.json: -------------------------------------------------------------------------------- 1 | { 2 | // See https://go.microsoft.com/fwlink/?LinkId=733558 3 | // for the documentation about the tasks.json format 4 | "version": "0.1.0", 5 | "command": "npm", 6 | "isShellCommand": true, 7 | "showOutput": "always", 8 | "suppressTaskName": true, 9 | "tasks": [ 10 | { 11 | "taskName": "build", 12 | "args": ["run", "build"] 13 | }, 14 | { 15 | "taskName": "test", 16 | "args": ["run", "mocha", "${relativeFile}"] 17 | } 18 | ] 19 | } -------------------------------------------------------------------------------- /src/__tests__/person.tests.ts: -------------------------------------------------------------------------------- 1 | 2 | import { expect } from 'chai'; 3 | import { Person } from '../person'; 4 | 5 | describe('Person', () => { 6 | let p: Person; 7 | 8 | beforeEach(() => { 9 | p = new Person('Bob', 31); 10 | }); 11 | 12 | it('constructor() creates a Person with properties as expected', () => { 13 | expect(p.name).to.equal('Bob'); 14 | expect(p.age).to.equal(31); 15 | }) 16 | 17 | it('greet() returns a greeting', () => { 18 | expect(p.getGreeting()).to.equal('Hi Bob'); 19 | }) 20 | 21 | }) -------------------------------------------------------------------------------- /.vscode/launch.json: -------------------------------------------------------------------------------- 1 | { 2 | "version": "0.2.0", 3 | "configurations": [ 4 | { 5 | "name": "Current TS Tests File", 6 | "type": "node", 7 | "request": "launch", 8 | "program": "${workspaceRoot}/node_modules/mocha/bin/_mocha", 9 | "args": ["-r", "ts-node/register", "${relativeFile}"], 10 | "cwd": "${workspaceRoot}", 11 | "protocol": "inspector", 12 | "internalConsoleOptions": "openOnSessionStart" 13 | }, 14 | { 15 | "name": "Current TS File", 16 | "type": "node", 17 | "request": "launch", 18 | "args": ["${relativeFile}"], 19 | "runtimeArgs": ["-r", "ts-node/register"], 20 | "cwd": "${workspaceRoot}", 21 | "protocol": "inspector", 22 | "internalConsoleOptions": "openOnSessionStart" 23 | } 24 | ] 25 | } -------------------------------------------------------------------------------- /README.md: -------------------------------------------------------------------------------- 1 | # Debugging TypeScript in VS Code Without Compiling (using `ts-node`) 2 | 3 | This repo contains a sample TypeScript project with a Visual Studio Code `launch.json` that 4 | allows you run TypeScript code and Mocha tests without a separate build step. 5 | 6 | It has been tested with **Node 8.4** and **VS Code 1.16** (the latest at time of writing!), 7 | your mileage with other versions may vary! :) 8 | 9 | ## Usage 10 | 11 | ``` 12 | git clone https://github.com/EnterpriseJSTutorial/vscode-ts-node-debugging.git 13 | npm install 14 | ``` 15 | 16 | ## VS Code Debug Tasks 17 | 18 | This repo contains the following VS Code Debug tasks (accessible via the debug button on the left): 19 | 20 | **Current TS File** - allows you to debug the currently open TypeScript file. Try it with `src/index.ts`: 21 | 22 | ![image](/screenshots/ts-file-debugging.png) 23 | 24 | **Current TS Tests File** - allows you to debug the currently open Mocha unit tests file. Try it with `src/__tests__/person.tests.ts`: 25 | 26 | ![image](/screenshots/mocha-debugging.png) 27 | 28 | These tasks should allow you to hit breakpoints in your code, without needing to compile first. 29 | 30 | ## Further Details 31 | 32 | Further details in a blog post here: 33 | https://medium.com/@dupski/debug-typescript-in-vs-code-without-compiling-using-ts-node-9d1f4f9a94a 34 | --------------------------------------------------------------------------------