Codemirror lint function not working in reaction-codemirror mode in React / Redux / Typescript application

Question

I am trying to include the add-on element of a reaction component-codemirror in a React / Redux / TS application. Regular codemirror stuff works fine, syntax highlighting, line numbers, etc. However, the inclusion of linting adds additional padding on the left for lint messages for the component, but messages are not displayed.

I have a suspicion that codemirror lint.js code is not loading, but I'm not sure why. Relevant code snippets below:

import * as CodeMirror from 'react-codemirror';
import '../../../node_modules/codemirror/mode/javascript/javascript';
import '../../../node_modules/codemirror/addon/lint/lint';
import '../../../node_modules/codemirror/addon/lint/javascript-lint';
import '../../../node_modules/jshint/dist/jshint';

...

<CodeMirror
    options={{
        lineNumbers: true,
        readOnly: false,
        mode: 'javascript',
        lint: true,
        gutters: ['CodeMirror-lint-markers']
    }}
/>

Has anyone been able to successfully launch this addon?

Answer 1

, jshint , :

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

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

Answer 2

lint CSS

CodeMirror///lint.css

CSS .

, :

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

:

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