Logo Questions Linux Laravel Mysql Ubuntu Git Menu
 

How to configure Visual Studio Code and tslint?

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.

like image 264
Mark Nadig Avatar asked Jun 03 '15 23:06

Mark Nadig


People also ask

How do I enable workspace library execution in VSCode?

To enable code execution from the current workspace you must enable workspace library execution. TSLint: Manage workspace library execution" and hit Enter key. 3- From the menu that replaces the input, pick enable workspace library execution and again press Enter key.

Is TSLint obsolete?

TSLint has been the recommended linter in the past but now TSLint is deprecated and ESLint is taking over its duties.

Should I use TSLint or ESLint?

TSLint was a linter equivalent to ESLint that was written specifically to work directly on TypeScript code. TSLint is deprecated and you should use typescript-eslint instead.


2 Answers

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.

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

Fourth, enjoy your integrated TS Lint.

TSLint in action in VS Code.

like image 65
Shaun Luttin Avatar answered Sep 22 '22 13:09

Shaun Luttin


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();     }); } 
like image 36
John Papa Avatar answered Sep 22 '22 13:09

John Papa