CLI ouput in JSON OR any custom format about tslint

[gscshoyru]

There is in fact already a way to do this. I just added some documentation for this in pull request #60 so take a look there. Basically, there is already a formatters directory in node_modules/tslint/build/formatters. You can make your own formatters directory with --formatters-dir and put your custom formatter there -- I would suggest looking at the formatters in the default directory to work out how to write one. And then specify that that's the formatter you want to use with the --format option. At some future point in time we will be writing developer documentation to explain how to write these, as well as your own custom rules, but we haven't gotten to that yet. Let me know if you run into trouble.

Also: line and character are 0-indexed, and I forget if position is or isn't, so be careful. Line and character as as you expect -- the line, and the character on that line where the failure starts/ends/etc. Position is the total number of characters you are from the beginning of the file -- that is, how many times starting from the first character you'd need to press the right arrow to get where the position refers to.

[am11]

@gscshoyru, thank you! I will give it a try. 👍

[am11]

@gscshoyru, with --formatters-dir option set, can we supply a js file name (like tslint-formatter.js) to --format?

[gscshoyru]

You actually have to give it a javascript file; we don't compile the user-provided rules and formatters directories, they need to be javascript files already. And don't include the file extension -- you should just pass tslint-formatter to --format .

[am11]

Once its released, I would probably go with @SLaks' map way:

/* jshint node: true */
"use strict";

var __extends = this.__extends || function (d, b) {
    for (var p in b) if (b.hasOwnProperty(p)) d[p] = b[p];
    function __() { this.constructor = d; }
    __.prototype = b.prototype;
    d.prototype = new __();
};
var Formatter = (function (_super) {
    __extends(Formatter, _super);
    function Formatter() {
        _super.apply(this, arguments);
    }
    Formatter.prototype.format = function (failures) {
        var messageItems = failures.map(function (result) {
            return {
                Line: parseInt(result.startPosition.line, 10)
              , Column: parseInt(result.startPosition.character, 10)
              , Message: "TsLint: " + result.failure
              , FileName: result.name
            };
        });

        JSON.stringify(messageItems);
    };
    return Formatter;
})(Lint.Formatters.AbstractFormatter);
exports.Formatter = Formatter;

Like JsHint, do we have error code in TsLint?

[am11]

@gscshoyru, thanks! Would be nice if we have less details (like ctor and other stuff; again inspired by JsHint) :)

[gscshoyru]

We don't have error codes. Why do you ask? What do you plan on needing/using them for?

[am11]

@gscshoyru, we used them in VS error list, so if someone want's more info, the can search online against the error codes, instead of the error messages. JsHint has a list of error code, so I thought you guys might be planning for TsLint too. :)

[ashwinr]

The rule names are unique, so we think that should be enough in identifying the rule causing the error. Plus it's intuitive to use names. We'll look into exposing the rule names.

[am11]

@ashwinr, thanks. :)

Can you give us ETA on new release?

[gscshoyru]

The formatter feature already exists, and has existed for a long time. It's already out in npm, you should be able to specify a rules directory already. You shouldn't need to wait on a new release for this.

As for the rule names, we'll look into this; we're not sure if it'll be out next release, or later, or at all.

[Bartvds]

For working example: I have tslint-path-formatter on npm, with sorting etc. It is installed like any dependency, and used by providing it's module name as formatter option in grunt-tslint.

[am11]

I tried this command:

cmd /c ""C:\USERS\ADEEL\APPDATA\LOCAL\MICROSOFT\VISUALSTUDIO\12.0EXP\EXTENSIONS\MADS KRISTENSEN\WEB ESSENTIALS 2013\1.6\Resources\nodejs\node.exe" "C:\USERS\ADEEL\APPDATA\LOCAL\MICROSOFT\VISUALSTUDIO\12.0EXP\EXTENSIONS\MADS KRISTENSEN\WEB ESSENTIALS 2013\1.6\Resources\nodejs\tools\node_modules\tslint\bin\tslint" --formatters-dir "C:\USERS\ADEEL\APPDATA\LOCAL\MICROSOFT\VISUALSTUDIO\12.0EXP\EXTENSIONS\MADS KRISTENSEN\WEB ESSENTIALS 2013\1.6\Resources\Scripts" --format "tslint-formatter" --config "C:\Users\Adeel\Web Essentials.tslintrc" --file "C:\Users\Adeel\Documents\Visual Studio 2013\WebSites\WebSite1\type.ts" > "C:\Users\Adeel\AppData\Local\Temp\tmpFF97.tmp" 2>&1"

It gives me the following error:

C:\USERS\ADEEL\APPDATA\LOCAL\MICROSOFT\VISUALSTUDIO\12.0EXP\EXTENSIONS\MADS KRIS
TENSEN\WEB ESSENTIALS 2013\1.6\Resources\nodejs\tools\node_modules\tslint\bin\ts
lint-cli.js:60060
throw new Error("formatter '" + this.options.formatter + "' no
^
Error: formatter 'tslint-formatter' not found
at Linter.lint (C:\USERS\ADEEL\APPDATA\LOCAL\MICROSOFT\VISUALSTUDIO\12.0EXP
EXTENSIONS\MADS KRISTENSEN\WEB ESSENTIALS 2013\1.6\Resources\nodejs\tools\node_m
odules\tslint\bin\tslint-cli.js:60060:23)
at Object. (C:\USERS\ADEEL\APPDATA\LOCAL\MICROSOFT\VISUALSTUDIO\1
2.0EXP\EXTENSIONS\MADS KRISTENSEN\WEB ESSENTIALS 2013\1.6\Resources\nodejs\tools
\node_modules\tslint\bin\tslint-cli.js:60142:25)
at Module._compile (module.js:456:26)
at Object.Module._extensions..js (module.js:474:10)
at Module.load (module.js:356:32)
at Function.Module._load (module.js:312:12)
at Module.require (module.js:364:17)
at require (module.js:380:17)
at Object. (C:\USERS\ADEEL\APPDATA\LOCAL\MICROSOFT\VISUALSTUDIO\1
2.0EXP\EXTENSIONS\MADS KRISTENSEN\WEB ESSENTIALS 2013\1.6\Resources\nodejs\tools
\node_modules\tslint\bin\tslint:3:1)
at Module._compile (module.js:456:26)
at Object.Module._extensions..js (module.js:474:10)
at Module.load (module.js:356:32)
at Function.Module._load (module.js:312:12)
at Function.Module.runMain (module.js:497:10)
at startup (node.js:119:16)
at node.js:902:3

Here is the path to tslint-formatter.js:

"C:\Users\Adeel\AppData\Local\Microsoft\VisualStudio\12.0Exp\Extensions\Mads Kristensen\Web Essentials 2013\1.6\Resources\Scripts\tslint-formatter.js"

[ashwinr]

weird. that should work, as long as the formatter file is in the specified directory. have you upgraded to the latest version of tslint?

[am11]

@ashwinr, I am running 0.4.0. (on that note; please add -v options for version check).

tslint-formatter.js contains the following:

/* jshint node: true */
"use strict";

var __extends = this.__extends || function (d, b) {
    for (var p in b) if (b.hasOwnProperty(p)) d[p] = b[p];
    function __() { this.constructor = d; }
    __.prototype = b.prototype;
    d.prototype = new __();
};
var Formatter = (function (_super) {
    __extends(Formatter, _super);
    function Formatter() {
        _super.apply(this, arguments);
    }
    Formatter.prototype.format = function (failures) {
        var messageItems = failures.map(function (result) {
            return {
                Line: parseInt(result.startPosition.line, 10)
              , Column: parseInt(result.startPosition.character, 10)
              , Message: "TsLint: " + result.failure
              , FileName: result.name
            };
        });

        return JSON.stringify(messageItems);
    };
    return Formatter;
})(Lint.Formatters.AbstractFormatter);
exports.Formatter = Formatter;

[ashwinr]

fair point. will add a version check for the command-line tool. Hmm, that file looks fine to me. It sounds like it's not the contents of the file that's causing the problem, but the path resolution when resolving the formatter file.

[ashwinr]

also, you don't need the boilerplate of __extends that's generated by TypeScript. A cleaner way would be to just create a prototype on the object. For example: https://github.com/Bartvds/tslint-path-formatter/blob/master/index.js

[ashwinr]

oh, the naming is implicit. The formatter files are assumed to be named as "blahFormatter.js" with the --format name being "blah".

[am11]

@ashwinr, would this work:

/* jshint node: true */
"use strict";

module.exports = {
    reporter: function (res) {
        var messageItems = res.map(function (result) {
            return {
                Line: parseInt(result.startPosition.line, 10)
              , Column: parseInt(result.startPosition.character, 10)
              , Message: "TsLint: " + result.failure
              , FileName: result.name
            };
        });

        process.stdout.write(JSON.stringify(messageItems));
    }
};

[ashwinr]

nope, reporter should be called "Formatter" and it should be a constructor function that has a method called "format" on its prototype. that is the minimum requirement. please take a look at the @Bartvds's file I linked to in the previous comment.

[am11]

@ashwinr, I see. Something like this should work:

/* jshint node: true */
"use strict";

module.exports = {
    Formatter: Object.create({
        format: function (failures) {
            var messageItems = failures.map(function (result) {
                return {
                    Line: parseInt(result.startPosition.line, 10)
                  , Column: parseInt(result.startPosition.character, 10)
                  , Message: "TsLint: " + result.failure
                  , FileName: result.name
                };
            });

            return JSON.stringify(messageItems);
        }
    })
};

[ashwinr]

yup, try it out :) you should also rename the file according to my other comment.

On Jan 9, 2014, at 7:23 PM, Adeel Mujahid [email protected] wrote:

@ashwinr, I see. Something like this should work:

/* jshint node: true */
"use strict";

module.exports = {
Formatter: Object.create({
format: function (failures) {
var messageItems = failures.map(function (result) {
return {
Line: parseInt(result.startPosition.line, 10)
, Column: parseInt(result.startPosition.character, 10)
, Message: "TsLint: " + result.failure
, FileName: result.name
};
});

        return JSON.stringify(messageItems);
    }
})

};
—
Reply to this email directly or view it on GitHub.

[am11]

@ashwinr, I just did that (rename). Now its giving error:

C:\USERS\ADEEL\APPDATA\LOCAL\MICROSOFT\VISUALSTUDIO\12.0EXP\EXTENSIONS\MADS KRISTENSEN\WEB ESSENTIALS 2013\1.6\Resources\nodejs\tools\node_modules\tslint\bin\tslint-cli.js:60058
                formatter = new Formatter();
                            ^
TypeError: object is not a function
    at Linter.lint (C:\USERS\ADEEL\APPDATA\LOCAL\MICROSOFT\VISUALSTUDIO\12.0EXP\EXTENSIONS\MADS KRISTENSEN\WEB ESSENTIALS 2013\1.6\Resources\nodejs\tools\node_modules\tslint\bin\tslint-cli.js:60058:29)
    at Object.<anonymous> (C:\USERS\ADEEL\APPDATA\LOCAL\MICROSOFT\VISUALSTUDIO\12.0EXP\EXTENSIONS\MADS KRISTENSEN\WEB ESSENTIALS 2013\1.6\Resources\nodejs\tools\node_modules\tslint\bin\tslint-cli.js:60142:25)
    at Module._compile (module.js:456:26)
    at Object.Module._extensions..js (module.js:474:10)
    at Module.load (module.js:356:32)
    at Function.Module._load (module.js:312:12)
    at Module.require (module.js:364:17)
    at require (module.js:380:17)
    at Object.<anonymous> (C:\USERS\ADEEL\APPDATA\LOCAL\MICROSOFT\VISUALSTUDIO\12.0EXP\EXTENSIONS\MADS KRISTENSEN\WEB ESSENTIALS 2013\1.6\Resources\nodejs\tools\node_modules\tslint\bin\tslint:3:1)
    at Module._compile (module.js:456:26)
    at Object.Module._extensions..js (module.js:474:10)
    at Module.load (module.js:356:32)
    at Function.Module._load (module.js:312:12)
    at Function.Module.runMain (module.js:497:10)
    at startup (node.js:119:16)
    at node.js:902:3

[ashwinr]

the "Formatter" hash value should be a function. then add the Object.create on its prototype.

[SLaks]

To clarify:

function Formatter() { } // Add instance state, which you don't need, here.
Formatter.prototype.format = function(failures) { ... };
module.exports = Formatter;

[am11]

@SLaks, I ended up with this (working cond):

/* jshint node: true */
"use strict";

function PathFormatter() { }

PathFormatter.prototype = Object.create({
    format: function (failures) {
        var messageItems = failures.map(function (result) {
            var lineAndCharacter = result.getStartPosition().getLineAndCharacter();

            return {
                Line: lineAndCharacter.line() + 1
              , Column: lineAndCharacter.character() + 1
              , Message: "TsLint: " + result.getFailure()
              , FileName: result.getFileName()
            };
        }).sort(function (a, b) {
            return a.Line < b.Line ? -1 : (a.Line > b.Line ? 1 : 0);
        });

        return JSON.stringify(messageItems);
    }
});

module.exports = {
    Formatter: PathFormatter
};

Can we improve this?

[SLaks]

You don't need (and shouldn't use) Object.create.
Instead, just add a function to the prototype directly:

PathFormatter.prototype.format = function(failures) { ... };

[am11]

Nice! Also, do we need to initialize function like function PathFormatter(){}?

[SLaks]

Yes; a function will not exist unless you create it.

[am11]

Thanks guys. Its fixed by madskristensen/WebEssentials2013#457

We should probably have a documentation like JSHint reporters docs.

[ashwinr]

feel free to send us a PR :)

[am11]

Please create a repo for *.github.io. :)

[ashwinr]

Created one, using a default gh template. check out the gh-pages branch to edit it. Thanks!

[am11]

@ashwinr, thanks.

I have added a sample formatter with 9cba524 with few other improvements.

[ashwinr]

cool, thanks!

[am11]

(Continuing on the rule-names vs error-codes pattern)

Here is another discussion about the error codes and its significance: jscs-dev/node-jscs#219. It would make sense if we have error codes similar to JsHint and then, as per @pickhardt's suggestion; a CLI option explain to make it more appealing: "tslint explain E101".