VSCode & Chrome debugger (Plugin) with typescript.

gulpfile.js

gulp.task('tscompile', function (done) {
    return gulp.src('app/**/*.ts')
        .pipe(sourcemaps.init())
        .pipe(ts({
            target: "es5",
            module: "system",
            emitDecoratorMetadata: true,
            experimentalDecorators: true
        })).js
        .pipe(sourcemaps.write('.',{ includeContent: true, sourceRoot: "/" }))
        .pipe(gulp.dest("app"));
});

launch.json

{
    "version": "0.1.0",
    "configurations": [
        {
            // Right click the Chrome shortcut, and select properties
            // In the "target" field, append --remote-debugging-port=9222
            "name": "Attach",
            "type": "chrome",
            "request": "attach",
            "webRoot": "./app",
            "port": 9222,
            "sourceMaps": true,
            "diagnosticLogging": false
        },
        {
            "name": "Launch app",
            "type": "chrome",
            "request": "launch",
            "url": "https://myapp", //Change to whatever you homepage is
            "runtimeArgs": [
                "--new-window", //Open in new window
                "--user-data-dir=C:/temp/", //Can be any directory. Makes chrome load in a different directory so that it opens in a new instance.
                "--remote-debugging-port=9222" //Open in port 9222 (standard chrome debug port)
            ],
            "preLaunchTask": "tscompile",
            "webRoot": "./app", //The directory that contains js, ts and map files
            "sourceMaps": true,
            "diagnosticLogging": false
        }
    ]
}

structure.txt

The structure of the app looks as follows:

wwwsrc (folder)
     - build (folder)
       -tasks (folder)
         -gulpfile.js
     - app (folder)
          - app.ts
          - dashboard (folder)
              - dashboard.ts
     index.html