VSCode: Make vscode-tslint analyze multiple files in a project

By | September 16, 2016

vscode-tslint allows you to get Tslint warnings/errors in the problems view.

Minimal Versions:

  • visualcode-tslint : 0.5.38
  • gulp-tslint : 6.1.1

Note that I use typescript@next and tslint@next.

The only problem is installing this extension will only show the problems of a file once you open it.
Here is how to get it work on your whole project and get problems for every files you want to analyze.

First you’ll need a task runner like Gulp or Grunt with a task that’ll run tslint on your project.
Here is an example for Gulp :

var gulp = require('gulp'),
    gulptslint = require("gulp-tslint");
 
gulp.task("tslint", function() {
    const options = { summarizeFailureOutput: true };
 
    return gulp.src("src/**/*.ts", { base: '.' })
        .pipe(gulptslint({"formatter": "vso"}))
        .pipe(gulptslint.report(options));
});

Running this task will give you an output like this :

 ##vso[task.logissue type=warning;sourcepath=data/model/whatever.ts;linenumber=24;columnnumber=5;code=member-access;]The class method 'serialize' must be marked either 'private', 'public', or 'protected'
 ##vso[task.logissue type=warning;sourcepath=data/model/whatever.ts;linenumber=42;columnnumber=9;code=one-line;]misplaced 'else'

Now to link this analyze with vscode-tslint you’ll need to create configure the task in vscode. This can be done by modifying in your workspace the file .vscode/tasks.json.
If this file doesn’t exist just launch (Ctrl+Shift+P) Tasks: Configure Task Runner.

Then you need to configure the tslint task it like this :

    {
      "taskName": "tslint",
      "args": [],
      "isBuildCommand": true,
      "isWatching": false,
      "problemMatcher": {
        "owner": "tslint",
        "fileLocation": [
          "relative",
          "${workspaceRoot}"
        ],
        "severity": "warning",
        "pattern": {
          "regexp": "^##vso\\[.+type=(.+);sourcepath=(.+);linenumber=(\\d+);columnnumber=(\\d+);.*\\](.+)$",
          "severity": 1,
          "file": 2,
          "line": 3,
          "column": 4,
          "message": 5
        }
      }
    }

Information:

  • owner should have value “tslint” so vscode-tslint can merge the task problem with it’s own analyze on file edition

Leave a Reply

Your email address will not be published. Required fields are marked *