Codemirror Lint Feature Not Working React-codemirror In React/redux/typescript App

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, etc. Ho

Solution 1:

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:

importCodeMirrorfrom'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
}

Solution 2:

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;