[英]React-codemirror 2 linting feature not working
I have created a react-codemirror 2 component in my react app but the linting feature of the package is not working.我在我的 react 应用程序中创建了一个 react-codemirror 2 组件,但 package 的 linting 功能不起作用。 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 ie codemirror has been changed and none of the solution seem to work.
我尝试浏览其他堆栈溢出问题,但由于这些问题至少有 2 年的历史,看起来原始库的文件结构,即 codemirror 已更改,并且似乎没有一个解决方案有效。 I also opened an issue in their Github repo but no response on that.
我还在他们的 Github 存储库中打开了一个问题,但没有对此作出回应。 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;
The lint addon from CodeMirror requires jshint library. CodeMirror 的 lint 插件需要 jshint 库。 If you add it (
npm i jshint
), the following code should work:如果添加它(
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;
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.