TSLint in Visual Studio 2015/2017?

Question

My organization uses TSLint pretty heavily for quality-checking our Typescript code, and it provides a valuable service to us! However, we use Visual Studio 2015 & 2017 as our main IDE and the only way to get the linting results it to run a gulp/grunt task which prints the output to the Task Runner Explorer console. It works, but it's slow and not the best development experience.

In smaller projects on my own I've used VSCode, which has a fantastic TSLint plugin that highlights linting violations as you make them, and provides access to the auto-fixers that some TSLint rules have. Like this:

Is it possible to get this same functionality in Visual Studio 2015/2017? The immediate feedback is a life saver when writing TypeScript code.

Flophouse

Answer 1

This is something I coded in a day or two (note that I haven't worked with C# for a few years):

https://github.com/vladeck/TSLint

It is a start of (hopefully) worth-wile Visual Studio 2017 extension that can mark .ts code withing the editor, based on the installed tslint and tslint.json configuration.

It is not published on the marketplace yet (a lot more coding to do), but you can download and build it yourself. Give it a try, If you have the time. The more people try it out, the more I will have data needed to make it worth-wile.

Alchemize

That's really nice looking! You should mention it on this thread: github.com/madskristensen/WebAnalyzer/issues/51 – Flophouse

I did as you suggested. – Alchemize

this works but only shows error if the file is open. – Foreordain

Answer 2

As @Hermann Gruber has mentioned, in Visual Studio 2015 Mads Kristensen's Web Analyzer extension provides support for TSLint of the kind you require.

For Visual Studio 2017 and 2019 I have now personally upgraded Mads' extension, and rebranded it as 'TypeScript Analyzer' as it only supports TSLint. It's available in Visual Studio's Extensions and Updates Gallery under 'TypeScript Analyzer'.

Selfesteem

Please provide better instructions how TypeScript Analyzer can be run. I see nothing about it in Solution Explorer of Microsoft Visual Studio Community 2019 ,while TypeScript Analyzer options exists i n Tools/Options – Hampshire

@IgorMaximov It should run if you open a .ts file, save one, or rightclick in Solution Explorer and select 'Run TypeScript Analyzer'. You can run it for an entire solution from Solution Explorer in this way. Errors don't appear in the code window however, they only appear in the Error List (View menu/Error List). – Selfesteem

Thanks for your prompt answers, but unfortunately, I do not see 'Run TypeScript Analyzer' anywhere in both pop-up menus in Solution Explorer and in open ts file in VS community 2019. So far I just run ts lint from command line: ` npx tslint --format verbose --project ./tsconfig.json --fix src` – Hampshire

Answer 3

This is reported as an issue in the Visual Studio Developer Community. https://developercommunity.visualstudio.com/content/problem/22907/please-support-tslint-as-how-its-supported-in-vs-c.html

The status is "triaged", so I assume that a comparable feature is not (yet) available. You may want to upvote the issue, so that it gets more attention by the VS development team.

EDIT: As noted in the following question, the visual studio plugin web analyzer provides support for tslint in VS 2015 (but not VS 2017):

Set up TSLint for VS2017

Rhymester

Answer 4

Looks like if you are using typescript 3.0 or higher you just need to add tslint plugin into your tsconfig file. Install typescript-tslint-plugin below and you may need to restart visual studio (or simply close all your files and re-open them)

https://github.com/Microsoft/typescript-tslint-plugin

First

npm install --save-dev typescript-tslint-plugin

Then

{
  "compilerOptions": {
    "plugins": [
      {
        "name": "typescript-tslint-plugin"
      }
    ]
  }
}

Stanfield