Typescript checking with TSLint

TSLint is a linter for Typescript, then a program that analyse our code to find potential errors and make the code more readable.

The very nice feature is that TSLint has a separate json file, named tslint.json, to configure the analisys process and allow us to setup the rules; we need to put this file in the root of the project and tslint will use that to read the settings.

Once defined the configuration, we’ll embed this in a task runner process like Gulp and we’ll have a complete process to fix all the typescript projects.

TSLint installation

First of all, we need to install the TSLint npm package and the Gulp TSlint plugin:

npm install tslint –save-dev

npm install gulp-tslint –save-dev

These packages will be added to the package.json file in the root of the project.

TSLint configuration

You need to add tslint.json file in the root of the project and compile that; there are many options that you can specify, the nomenclature is clear and it’s very easy to understand what a specific option means.

After some test, this is the configuration file applied:

{
"rules": {
"align": [ true, "arguments", "parameters", "statements" ],
"class-name": true,
"comment-format": [ true, "check-lowercase", "check-space" ],
"curly": true,
"eofline": true,
"indent": [ true, "spaces" ],
"interface-name": [ true, "always-prefix" ],
"jsdoc-format": true,
"label-position": true,
"label-undefined": true,
"member-access": true,
"member-ordering": [
true,
{
"order": "fields-first"
}
],
"no-any": false,
"no-arg": true,
"no-conditional-assignment": true,
"no-consecutive-blank-lines": true,
"no-construct": true,
"no-constructor-vars": true,
"no-debugger": true,
"no-duplicate-key": true,
"no-duplicate-variable": true,
"no-empty": true,
"no-eval": true,
"no-inferrable-types": false,
"no-internal-module": true,
"no-require-imports": true,
"no-shadowed-variable": true,
"no-string-literal": true,
"no-switch-case-fall-through": true,
"no-trailing-whitespace": true,
"no-unreachable": true,
"no-unused-expression": true,
"no-unused-variable": true,
"no-use-before-declare": true,
"no-var-keyword": true,
"no-var-requires": true,
"one-line": [ true, "check-catch", "check-else", "check-finally", "check-open-brace", "check-whitespace" ],
"quotemark": [ true, "double" ],
"radix": true,
"semicolon": [ true, "always" ],
"switch-default": true,
"triple-equals": true,
"typedef": [ true, "arrow-parameter", "call-signature", "member-variable-declaration", "parameter", "property-declaration", "variable-declaration" ],
"use-strict": [ true, "check-function", "check-module" ],
"variable-name": [ true, "check-format", "allow-leading-underscore", "ban-keywords" ],
"whitespace": [ true, "check-branch", "check-decl", "check-operator", "check-separator", "check-type" ]
}
}

TSLint gulp task

The Gulp plugin need to be added to the gulpfile.js file:

'use strict';

var gulp = require('gulp'),
...
tslint = require('gulp-tslint')

gulp.task('tslint', function () {
gulp.src(config.ts)
.pipe(tslint({
formatter: 'verbose'
}))
.pipe(tslint.report({
emitError: true,
sort: true,
fullPath: true,
reportLimit: 10
}))
});

We have some options that we can specify for the report, the reportLimit is very useful when you execute the task for the first time and the report is too long.

Now, you can execute the task with the command:

gulp tslint

In the console the analisys report will be showed:

You can find the project here.