CODEWITHSUNDEEP
typescriptcodemirror
Martyn Wynn
Martyn Wynn

Reputation: 137

typescript linter for CodeMirror

I use CodeMirror editor in one of my one CMS apps. Does anyone have any suggestions/experience of incorporating a typescript linter into CodeMirror?

P.S. I am aware of ts lint https://www.npmjs.com/package/tslint but it is not obvious how to incorporate this.

Upvotes: 1

Views: 1279

Answers (2)

basarat
basarat

Reputation: 276393

You need to use the lint addon : http://codemirror.net/doc/manual.html#addon_lint to provide lint errors from tslint -> code mirror

More

You can even wrap up the lint addon into something nicer like a promise based linter (warning complex code but just a demo of something that does work 🌹) https://github.com/basarat/tsb/blob/master/src/app/codemirror/codeEditor.tsx / https://github.com/basarat/tsb/blob/master/src/app/codemirror/addons/linter.ts

Upvotes: 1

Remo H. Jansen
Remo H. Jansen

Reputation: 25044

It should not be a problem all you need to do is install tsd:

$ npm install -g tsd

Install the CodeMirror type definitions in your project:

# from your project folder
$ tsd install codemirror --save

That will create a folder named typings that will contain a filed codemirror.d.ts.

You can then add a reference to this file in the TypeScript files that invoke the CodeMirror API:

/// <reference path="../typings/codemirror/codemirror.d.ts" />

// USE CODE MIRROR HERE

Once you have finished coding you can use Gulp and gulp-tslint.

# npm install gulp gulp-tslint vinyl-source-stream vinyl-buffer --save-dev

Create a gulpfile.js:

var gulp        = require("gulp"),
    source      = require("vinyl-source-stream"),
    buffer      = require("vinyl-buffer"),
    tslint      = require("gulp-tslint");


gulp.task("lint", function() {
  return gulp.src([
                __dirname + "/source/**/**.ts", // Path to your TS files
              ])
             .pipe(tslint())
             .pipe(tslint.report("verbose"));
});

An finally run the Gulp task:

$ gulp lint

If you need additional help with Gulp check out the Official Getting Started.

Upvotes: 1

Related Questions