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't think I had to do anything other than install the Web Essentials plugin.

I recently installed Visual Studio 2015 and can't, for the life of me, get TSLint to work as it did in Visual Studio 2013. Am I missing something obvious?

Birdlime

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)

Bozen

If you're running in VS 2017, the README in the official TSLint repository links to this extension: marketplace.visualstudio.com/… – Jumbala

Answer 2

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!

Hiss

If you want the warnings to display in the Visual Studio Error List after build then use "msbuild" instead of "prose" and call it as an MSBuild pre/post build task. – Hubblebubble

hi, can you please update the solution with latest change github.com/panuhorsmalahti/gulp-tslint/blob/master/CHANGELOG.md – Descend

@Descend nothing has changed enough to change this answer. It's still set up in the same way. – Hiss

Answer 3

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.

Deadening

Thanks, I'll test it out. I'm pretty sure that package is for the MVC framework which you may or may not need depending on what kind of Typescript project you are working on. – Birdlime

The tslint package by palantir, which you are looking for, is also available via NuGet Package Manager. – Snowmobile