How to configure Visual Studio Code and tslint?

Question

In 0.3.0, I'm seeing intellisense for typescript. However, I was also expecting to see some tslinting as I have a tslint.json. Does VSC support linting natively or do I just need to lean on gulp?

If the latter, is it configurable to run as files are changed or does it need to be a manual task that is launched explicitly.

Based on the [web page](https://code.visualstudio.com/Docs/languages) they say there is support for linting for TypeScript and C# — Sami Kuhmonen, Jun 04 '15 at 06:08
Sami, what am I missing? I see "Intelliense, Linting, outling for CSS, HTML, Javascript, JSON, Less and Sass" only - right below "refactoring, find all references for C#, Typescript". No linting for c#/ts and I'm not seeing it applying my tslint.json rules in the IDE, so I'm assuming it isn't wired up yet. But, wanted to see if I missed a toggle somewhere. — Mark Nadig, Jun 04 '15 at 15:28
"No intent to fix" https://code.visualstudio.com/issues/Detail/16540 Suggest we lean on a task https://code.visualstudio.com/Docs/tasks — Mark Nadig, Jun 15 '15 at 18:07

score 34 · Answer 1 · edited Nov 18 '17 at 20:42

34

Short answer

Does VSC support linting natively or do I just need to lean on gulp?

Yes. VS Code supports linting with the TSLint extension. There is no need for gulp.

Steps to integrate TSLint into VS Code

First, install prerequisites: TSLint and TypeScript.

npm install -g tslint typescript

Second, add a tslint.json file to your project root. You can do this with tslint --init, which gives you nice defaults. Alternatively, create the file and use this minimal config, which inherits recommended rules.

// tslint.json 
{
  "extends": "tslint:recommended",
  "rules": {}
}

Third, install the TSLint extension for VS Code.

Open VS Code in your project's root.
Open the command palette CTRL + P
ext install tslint.
Choose Install, then choose Enable, finally restart VS Code.

Fourth, enjoy your integrated TS Lint.

edited Nov 18 '17 at 20:42

mx0

6,445
12
49
54

answered Aug 09 '16 at 23:44

Shaun Luttin

133,272
81
405
467

3

I would also add that if using a custom tsconfig.json file try to run it in the console (i.e. tslint **/*.ts) to make sure that it is a valid file otherwise it won't run in VSCode. – Randall Flagg Aug 29 '16 at 11:31
4

Note that this will only show opened file problems. To get the full list in the "Problems" view, you'll need some more steps I wrote there : http://michael.laffargue.fr/blog/2016/09/16/vscode-make-vscode-tslint-analyze-multiple-files-project/ – Michael Laffargue Sep 16 '16 at 08:57

score 5 · Accepted Answer · answered Jun 08 '15 at 01:54

5

You can add a linting task to your gulpfile like below. Or even a watcher task. Notice I just use TypeScript, not gulp plug in nor tslint, though they are fine too.

gulp.task('ts-watcher', function() {
    gulp.watch('./src/**/*.ts', ['ts-compile']);
});

gulp.task('ts-compile', function(done) {    
    runTSC('src/client', done);
});

function runTSC(directory, done) {
    var tscjs = path.join(process.cwd(), 'node_modules/typescript/bin/tsc.js');
    var childProcess = cp.spawn('node', [tscjs, '-p', directory], { cwd: process.cwd() });
    childProcess.stdout.on('data', function (data) {
        // Code will read the output
        console.log(data.toString());
    });
    childProcess.stderr.on('data', function (data) {
        // Code will read the output
        console.log(data.toString());
    });
    childProcess.on('close', function () {
        done();
    });
}

answered Jun 08 '15 at 01:54

John Papa

21,880
4
61
60

1

Thanks John. I'm using a watcher now that uses gulp-notify. I was hoping for tighter integration - inline notification, etc. I imagine it is coming. – Mark Nadig Jun 08 '15 at 15:42
I agree. The new WebStorm 11 now has tight integration of TSX with in-line linting. I have gone back and forth between VSC and WS, but am currently sticking with Webstorm until VSC has inline notification. – pbanka Oct 17 '15 at 19:02
I actually dont use any of these. VS Code shows TypeScript issue in the editor without having any of these tasks. What additional things are you wanting? Im curious. – John Papa Oct 18 '15 at 13:13
2

Getting on this a bit late, but I think @digger69 was asking about tslint annotations in the editor. I personally like the idea of VS Code, but the lack of tslint annotations is preventing me from moving away from sublime. – Andrew Eisenberg Dec 15 '15 at 05:02
@AndrewEisenberg There's some way now to get TsLint analyze in VSCode "Problems" view. Linking tslint report with a problem analyzer. Tested it here: http://michael.laffargue.fr/blog/2016/09/16/vscode-make-vscode-tslint-analyze-multiple-files-project/ and it works quite well – Michael Laffargue Sep 16 '16 at 09:00

How to configure Visual Studio Code and tslint?

2 Answers2

Short answer

Steps to integrate TSLint into VS Code