Reputation: 137
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
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
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
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