Блог

Я создал компонент react-codemirror 2 в своем приложении react, но функция компоновки пакета не работает. Я пытался просмотреть другие вопросы о переполнении стека, но поскольку вопросам не менее 2 лет, похоже, что структура файла для исходной библиотеки, т. е. codemirror, была изменена, и ни одно из решений, похоже, не работает. Я также открыл проблему в их репозитории 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;
  

Для дополнения lint от CodeMirror требуется библиотека 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;