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

问题描述

我正在尝试在 React/Redux/TS 应用程序中启用 react-codemirror 组件的 linting 插件.正常的 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?

推荐答案

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

并且不要忘记这些选项:

And don't forget these options:

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

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