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

你需要加载 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
}