Codemirror Lint功能在React / Redux / Typescript App中不起作用react-codemirror [英] Codemirror lint feature not working react-codemirror in React/Redux/Typescript App

问题描述

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

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.

我怀疑它与未加载codemirror lint.js代码有关，但我不确定为什么。以下相关代码段：

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?

推荐答案

您需要加载皮棉CSS

You need to load the lint CSS

codemirror / addon / lint / lint.css

和其他任何用于代码镜像的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

不要忘记以下选项：

var options = {
  mode: 'javascript',
  gutters: ['CodeMirror-lint-markers'],
  lint: true
}

这篇关于Codemirror Lint功能在React / Redux / Typescript App中不起作用react-codemirror的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！