Codemirror lint功能无法正常工作React/Redux/Typescript应用程序中的codemirror

Question

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

我怀疑是代码错误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

您需要加载lint CSS

codemirror/addon/lint/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
}

Answer 2

我有一个类似的问题，并修复了它，使jshint在窗口上可用，通过替换：

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

使用

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