Setup TSLint in Visual Studio 2015

Question

I develop with Typescript in Visual Studio 2013 and always have my error list open on the bottom. TSLint tells me when my code is messy/incorrect as i\'m writing it. I don\'

Answer 1

Looks like the easiest way now is to download Web Analyzer by Mads Kristensen from the Visual Studio Gallery, it includes TSLint support

https://visualstudiogallery.msdn.microsoft.com/6edc26d4-47d8-4987-82ee-7c820d79be1d

(its Free)

Answer 2

It looks like there is a nuget package that can help you here. If you right click on the project and select "Manage NuGet Packages" and search for tslint, you'll find a package called "NCapsulateExtensions.TsLint" which should work for you.

I was not personally able to verify this, though, because the package requires System.Web.Helpers.dll and I don't have this on my machine (nor could I find it anywhere). So, I looked into the git repo and discovered that the nuget package isn't actually using this dll and submitted a pull request to have it removed. In the meantime, my fork can be found here:

https://github.com/mbraude/NCapsulateExtensions.TsLint

Hopefully you or somebody else knows where System.Web.Helpers is so that you can install this and give it a try, or the author takes the pull request and publishes a new version.

If this doesn't end up working you would need to do something similar in your project - call tslint from a custom msbuild task. You could also clone this solution and set it up manually without nuget - it would just be a lot more work.

Answer 3

You now have to this using gulp tasks to make this happen. It's a bit of a pain if you ask me, but it does work! This is how we do it:

1. Install Node: https://nodejs.org
2. Install Gulp: http://gulpjs.com
3. Install gulp packages to the project root:
   • In the command line cd C:\\path\to\project
   • npm install gulp-tslint --save-dev
   • npm install gulp-plumber --save-dev

Optional:

• npm install gulp-newer --save-dev
• npm install gulp-watch --save-dev

---

Now everything is installed! Open Visual Studio and add a new gulpfile.js to your project root with the following contents:

/// <binding AfterBuild='TSLint:All' ProjectOpened='TSLint:Watch' />
//Node packages
var gulp    = require("gulp");
var plumber = require("gulp-plumber");
var tslint  = require("gulp-tslint");

//Only include these 2 packages if you've installed them
var newer   = require("gulp-newer");
var watch   = require("gulp-watch");


//Paths to include/exclude
var TYPE_SCRIPT_FILES = ["app/**/*.ts", "!app/core/Events.ts"];

//Our TSLint settings
var TYPE_SCRIPT_REPORT = tslint.report("prose", {
    emitError: false,
    reportLimit: 50
});

//The actual task to run
gulp.task("TSLint:All", function () {
    return gulp.src(TYPE_SCRIPT_FILES)
        .pipe(plumber())
        .pipe(tslint())
        .pipe(TYPE_SCRIPT_REPORT);
});


//===== ONly include the below code if needed
// File locations
var BIN = "bin";

// Listens for new (updated) typescript files and runs through TSlint
gulp.task("TSLint:Newer", [], function (done) {
    return gulp.src(TYPE_SCRIPT_FILES)
        .pipe(plumber())
        .pipe(newer(BIN))
        .pipe(tslint())
        .pipe(TYPE_SCRIPT_REPORT)
        .pipe(gulp.dest(BIN));
});

//This task runs when the project opens. When any file changes, it will be run through TSLint
gulp.task('TSLint:Watch', function () {
    return gulp.src(TYPE_SCRIPT_FILES)
        .pipe(watch(TYPE_SCRIPT_FILES))
        .pipe(plumber())
        .pipe(tslint())
        .pipe(TYPE_SCRIPT_REPORT)
        .pipe(gulp.dest(BIN));
});

---

Ok, now everything is ready to use! Now in Visual Studio open the Task Runner Explorer. The tasks should appear here.

Not that You can tell each task when to run. You can set this by right clicking on each task, and it just adds to the first line on the gulpfile.js

---

• The TSLint:All task will run TSLint on all the specified files.
• The TSLint:Newer task will run TSLint on all files that have been changed since the last check.
• The TSLint:Watch task will remain running and automatically check files as they get saved!