Codemirror lint功能在React / Redux / Typescript App中無法運行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

我有一個類似的問題，並通過替換以下窗口使jshint可用來修復它：

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

同

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

Answer 2

您需要加載lint CSS

codemirror /插件/皮棉/ 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
}