How to setup WebStorm / IntelliJ so the output from Grunt console has links into the files, in the same way a FileWatcher that calls tsc would do

Question

Using IntelliJ/WebStorm if I run tsc from a FileWatcher, my compile errors are linked to the files in the editor, such that if I double-click on a compiler error, it opens that file and takes me to the offending line of code.

However if I run Grunt, either via the integrated Grunt console, or via a FileWatcher, the compile errors do not have links and I have to manually open the file and goto the offending line number.

Is there any way to get the compile errors comming from Grunt integrated as links, like the TypeScript FileWatcher's invocation of tsc does?

Answer 1

In Webstorm 8, it is not possible to apply regular expression filters on Grunt console output.

The way to go, as mentioned by lena, is to call Grunt directly via an External tool entry, and set up appropriate regex filters, such as:

For grunt-ts:

$FILE_PATH$\($LINE$,$COLUMN$\):.*

For grunt-tslint:

...$FILE_PATH$\[$LINE$,\s$COLUMN$\]:.*

Also see my comment above regarding a caveat for grunt-tslint in some environments.

Answer 2

When running Grunt as a file watcher, you can set up filters to make links clickable. You can use existing filters as example: open your file watcher settings, press Output Filters..., open the filter settings and copy the regular expression specified there. See http://www.jetbrains.com/webstorm/webhelp/add-filter-dialog.html

Answer 3

I believe the '>>' added by grunt-typescript is throwing it off. Try grunt-ts (disclaimer : one of the authors) which is tested with webstorm https://github.com/grunt-ts/grunt-ts

Answer 4

I noticed in Webstorm 9, the built-in Grunt console was filtering/linking on typescript compile errors with grunt-typescript. I am not sure if this is a recent change or not, but it was linking this for example,

So, I went into grunt-tslint/node_modules/tslint/build/formatters, and copied proseFormatter.js to ./myproseFormatter.js. Then I tweaked it so the tslint output format would match the compile error format, by replacing square brackets with parens, and removing the whitespace between line and column number. Finally, I referenced my custom formatter in my gruntfile tslint config by adding the formatter and formattersDirectory properties:

tslint: {
  options: {
    configuration: grunt.file.readJSON('tslint.json'),
    formatter: 'myprose',
    formattersDirectory: './'
  },
  all: {
      src: [ 'app/**/*.ts' ]
    }
}

and it worked!