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

Question

我正在尝试在React / Redux / TS应用程序中启用react-codemirror组件的linting插件。 正常的codemirror东西工作正常，语法高亮，行号等。但是，启用linting会在左侧添加额外的填充，以便将lint消息添加到组件，但不会显示任何消息。

我怀疑它是关于codemirror lint.js代码没有加载的东西，但我不知道为什么。 以下相关代码段：

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']
    }}
/>

有没有人能够成功地使这个插件工作？

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
}