Codemirror lint 功能在 React/Redux/Typescript 应用程序中不起作用 react-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

代码镜像/插件/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;