I have created a react-codemirror 2 component in my react app but the linting feature of the package is not working. I tried browsing other stack overflow questions but since the questions are at least 2 years old it looks like the file structure for the original library i.e. codemirror has been changed and none of the solution seem to work. I also opened an issue in their Github repo but no response on that. Hope you can help, here’s the code for my component.
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;
Advertisement
Answer
The lint addon from CodeMirror requires jshint library. If you add it (npm i jshint
), the following code should work:
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;