Logo Questions Linux Laravel Mysql Ubuntu Git Menu
 

Setup TSLint in Visual Studio 2015

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?

like image 271
TrentVB Avatar asked Oct 16 '15 20:10

TrentVB


People also ask

How do I add a Tslint code in Visual Studio?

In your VS Code user or workspace settings, set "typescript. tsserver. log": "terse" . Open a TS file that you believe should have TSLint enabled.

Where is Tslint json located?

By default, GoLand uses the TSLint package from the project node_modules folder and the tslint. json configuration file from the folder where the current file is stored. If no tslint. json is found in the current file folder, GoLand will look for one in its parent folders up to the project root.

How do I run TS lint?

And be executed as npm run lint . As tslint --help says, it accepts the following commandline options: -c, --config: The location of the configuration file that tslint will use to determine which rules are activated and what options to provide to the rules. If no option is specified, the config file named tslint.


3 Answers

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)

like image 191
Craig Hughes Avatar answered Oct 14 '22 05:10

Craig Hughes


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.

Visual Studio 2015 Task Runner Explorer

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

Visual Studio 2015 Task Runner Explorer Bindings


  • 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!
like image 29
FiniteLooper Avatar answered Oct 14 '22 07:10

FiniteLooper


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.

like image 32
Michael Braude Avatar answered Oct 14 '22 07:10

Michael Braude