Codemirror lint feature not working react-codemirror in React/Redux/Typescript App

Question

I\'m trying to enable the linting addon of the react-codemirror component in a React/Redux/TS app. The normal codemirror stuff works fine, syntax highlighting, line numbers,

Answer 1

I had a similar issue and fixed it by making jshint available on the window by replacing:

import '../../../node_modules/jshint/dist/jshint';

with

(<any>window).JSHINT = require('jshint').JSHINT;

Answer 2

You need to load the lint CSS

codemirror/addon/lint/lint.css

and any other CSS for code mirror.

Also, for further clarification here are my imports:

import CodeMirror from 'react-codemirror'
import { JSHINT } from 'jshint'

import 'codemirror/addon/lint/lint'
import 'codemirror/addon/lint/javascript-lint'
import 'codemirror/mode/javascript/javascript'

window.JSHINT = JSHINT

And don't forget these options:

var options = {
  mode: 'javascript',
  gutters: ['CodeMirror-lint-markers'],
  lint: true
}