Codemirror lint功能在React / Redux / Typescript App中无法运行react-codemirror

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, etc. However, enabling linting adds the extra padding on the left for the lint messages to the component, but no messages are displayed.

I have a suspicion its something about the codemirror lint.js code 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 get this addon working successfully?

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
}