如何在 nextjs 的 javascript 语言的 react-codemirror 编辑器中启用语法验证

Question

我在 Next.js 应用程序中使用 react-codemirror2 编辑器。编辑器默认标记语法验证错误和警告。我想确保当用户保存代码时代码中没有语法错误。我需要访问验证结果，我不知道如何实现。这是我的代码：

import React, { Fragment } from "react";
let CodeMirror;
export default class Editor extends React.Component {
  state = {
    render: false,
    code: "",
  };
  componentDidMount = () => {
    CodeMirror = require("react-codemirror2");
    require("codemirror/lib/codemirror.css");
    require("codemirror/theme/eclipse.css");
    require("codemirror/addon/lint/lint.css");
    require("codemirror/addon/hint/show-hint.css");
    require("codemirror/mode/javascript/javascript.js");
    require("codemirror/addon/lint/javascript-lint");
    require("codemirror/addon/lint/lint.js");
    require("codemirror/addon/hint/javascript-hint");
    const { JSHINT } = require("jshint");
    window.JSHINT = JSHINT;
    this.setState({ render: true });
  };
  SaveCode() {
    // here I need to validate the [this.state.code]
    // if there is no syntax error then save it
  }
  render() {
    if (!this.state.render) return null;
    const { UnControlled } = CodeMirror;
    return (
      <>
        <UnControlled
          value={this.state.code}
          onBeforeChange={(a, b, value) => {
            this.setState({ code:value });
          }}
          options={{
            readOnly: false,
            mode: "javascript",
            theme: "eclipse",
            lineNumbers: true,
            lint: true,
          }}
        />
        <div style={{ padding: "10px 25px 25px", textAlign: "right" }}>
          <button onClick={this.SaveCode}>Save</button>
        </div>
      </>
    );
  }
}

Answer 1

您可以使用 onUpdateLinting 函数接收 linting 错误。像这样更改 CodeMirror 组件的 options 属性中的 lint 字段：

lint: {
  onUpdateLinting: this.handleErrors,
},

如何在 nextjs 的 javascript 语言的 react-codemirror 编辑器中启用语法验证

How to enable syntax validation in react-codemirror editor for javascript language in nextjs

validation

reactjs

next.js

react-codemirror2