React-codemirror 2 linting功能不起作用

如何解决React-codemirror 2 linting功能不起作用

我已经在我的react应用程序中创建了react-codemirror 2组件，但是该包的linting功能不起作用。我尝试浏览其他堆栈溢出问题，但由于问题至少存在2年之久，因此看起来原始库的文件结构即代码镜像已更改，并且所有解决方案似乎均无效。我还在他们的Github存储库中打开了一个问题，但对此没有任何回应。希望您能提供帮助，这是我组件的代码。

import React from "react";
import { UnControlled as CodeMirror } from "react-codemirror2";

import 'codemirror/lib/codemirror.css';
import 'codemirror/theme/material.css';
import 'codemirror/addon/lint/lint.css';
import 'codemirror/addon/hint/show-hint.css';



import 'codemirror/mode/javascript/javascript.js';
import 'codemirror/addon/lint/javascript-lint';
import 'codemirror/addon/lint/lint.js';
import 'codemirror/addon/hint/javascript-hint';


const JsEditor = ({code}) => {
  return (
    <div>
      <h1> JavaScript </h1>
      <CodeMirror
        value={code}
        options={{
          gutters: ["CodeMirror-lint-markers"],mode: "javascript",theme: "material",lineNumbers: true,lineWrapping: true,lint: true,}}
       
      />
    </div>
  );
};

export default JsEditor;

解决方法

CodeMirror的lint插件需要jshint库。如果添加它（npm i jshint，则以下代码应该可以工作：

import React from 'react';
import { UnControlled as CodeMirror } from "react-codemirror2";
import 'codemirror/lib/codemirror.css';
import 'codemirror/theme/material.css';
import 'codemirror/addon/lint/lint.css';
import 'codemirror/addon/hint/show-hint.css';
import 'codemirror/mode/javascript/javascript.js';
import 'codemirror/addon/lint/javascript-lint';
import 'codemirror/addon/lint/lint.js';
import 'codemirror/addon/hint/javascript-hint';
import { JSHINT } from 'jshint';
window.JSHINT = JSHINT;

const JsEditor = ({ code }) => {
  return (
    <div>
      <h1> JavaScript </h1>
      <CodeMirror
        value={code}
        options={{
          gutters: ["CodeMirror-lint-markers"],mode: "javascript",theme: "material",lineNumbers: true,lineWrapping: true,lint: true,}}
      />
    </div>
  );
};

function App() {
  return (
    <div className="App">
      <JsEditor code={'var widgets =[]; debugger'} />
    </div>
  );
}

export default App;