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. 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?

回答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;

回答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
}

来源：https://stackoverflow.com/questions/42800376/codemirror-lint-feature-not-working-react-codemirror-in-react-redux-typescript-a

标签

javascript

reactjs

typescript

react-redux

codemirror