Getting Visual Code to recognise TypeScript errors/warnings when using gulp + gulp-typescript + gulp-tslint

problem:
in Visual Code, you are using gulp-typescript to compile TypeScript
and gulp-tslint to lint the TypeScript,
but Visual Code does not recognise errors/warnings from the 2 tools.

so when a .ts file has errors/warnings, they do not show as squiggles in the Visual Code editor.

solution:
modify .vscode/tasks.json so that Visual Code will separately look for errors/warnings from gulp-typescript and gulp-tslint

note: you need to make sure "owner" is set correctly - in this case, to "gulp"

note: its good if you do NOT add any other problemMatchers, unless you really need them, since Visual Code only seems to show errors/warnings from 1 of the matchers per file.

note: you need to make the regex different for each, otherwise Visual Code may match only the messages from gulp-tslint and not from gulp-typescript.

below is a copy of my tasks.json file:

 {  
   "version": "0.1.0",  
   "command": "gulp",  
   "isShellCommand": true,  
   "args": [],  
   "tasks": [  
     {  
       "taskName": "build-it-and-serve",  
       // Make this the default build command.  
       "isBuildCommand": true,  
       "isWatching": true,  
       // Show the output window only if unrecognized errors occur.  
       //"showOutput": "silent",  
       "showOutput": "always",  
       "problemMatcher": [  
         {  
           "owner": "gulp",  
           "fileLocation": [  
             "relative",  
             "${workspaceRoot}"  
           ],  
           "pattern": {  
             "regexp": "^(.*\\.ts)\\((\\d+),(\\d+)\\):\\s(warning|error)\\sTS(\\d+):\\s(.*)$",  
             "file": 1,  
             "line": 2,  
             "column": 3,  
             "severity": 4,  
             "message": 6  
           }  
         },  
         {  
           "owner": "gulp",  
           "fileLocation": [  
             "absolute"  
           ],  
           "pattern": {  
             "regexp-comment": "using A-Z so that we don't capture the more important error in previous problemMatcher",  
             "regexp": "^(.*\\.ts)\\((\\d+),(\\d+)\\):\\s(warning|error) ([A-Z|a-z].*)$",  
             "file": 1,  
             "line": 2,  
             "column": 3,  
             "severity": 4,  
             "message": 5  
           }  
         }  
       ]  
     }  
   ]  
 }  

example message from gulp-tslint:

note: the path is *absolute*

 v:\sean\code\myProject\wwwroot\ng-app\components\forms\my-form.ts(40,31): warning semicolon: missing   

example message from gulp-typescipt: (more important, as it finds critical errors!)

note: the path is *relative*

 wwwroot\ng-app\app.component.ts(42,14): error TS2339: Property 'xxx' does not exist on type 'AppComponent'.  

________________________
to reach the code for an error/warning:

- press CTRL + SHIFT + M to see Visual Codes list of errors/warnings
OR press F1 and then clear the box and type !

- OR open a file and little squiggles should appear (green on the left for warning, red underline for errors)

- what does NOT happen: the task output window does not show colors

________________________
remaining work:

- Visual Code seems to only display from 1 of the problem matchers at a time.
not sure what can be done about that ...

- would be nice to be able to click on the error from gulp-typescript / gulp-tslint, that shows in the task output

________________________
versions:

tools:

- Visual Code 1.0

- TypeScript 1.8.10

- Node 4.1.1

- Gulp 3.9.1

node modules:

- gulp-tslint  "^5.0.0"

- gulp-typescript "^2.13.0"