Next.js中react-codemirror2 JS编辑器如何获取保存时的语法校验结果

实现方案 #

你可以通过以下两种方式实现保存前的语法校验，两种方案的校验结果都和编辑器自带的错误标记完全对齐：

方案1：直接调用内置JSHINT校验（最简便，无需修改现有组件结构）

你已经在初始化逻辑中把JSHINT挂载到了window对象上，编辑器的lint能力本身就是调用这个实例实现的，直接在保存逻辑中复用即可：

// 将SaveCode改为箭头函数避免this指向异常
SaveCode = () => {
  // 调用JSHINT校验当前代码，返回值为true代表无错误
  const isCodeValid = window.JSHINT(this.state.code);
  if (isCodeValid) {
    // 此处写代码保存逻辑
    console.log("代码校验通过，保存成功", this.state.code);
  } else {
    // JSHINT.errors属性存储了所有错误详情，可自行格式化提示
    const errorList = window.JSHINT.errors;
    alert(`代码存在${errorList.length}处语法错误，请修正后再保存`);
    console.error("错误详情：", errorList);
  }
}

方案2：通过编辑器实例获取校验结果

如果你需要和编辑器当前标记的错误完全同步（比如包含自定义lint规则的场景），可以通过存储编辑器实例的方式获取校验结果：

1. 首先给UnControlled组件绑定挂载事件获取实例：

// 在render方法中修改UnControlled组件配置
<UnControlled
  value={this.state.code}
  onBeforeChange={(a, b, value) => {
    this.setState({ code:value });
  }}
  // 新增editorDidMount事件获取编辑器实例
  editorDidMount={(editor) => {
    this.cmEditor = editor;
  }}
  options={{
    readOnly: false,
    mode: "javascript",
    theme: "eclipse",
    lineNumbers: true,
    lint: true,
  }}
/>

2. 修改保存逻辑：

SaveCode = () => {
  // 从编辑器实例中获取所有已标记的lint错误
  const markedErrors = this.cmEditor?.state?.lint?.marked || [];
  if (markedErrors.length === 0) {
    // 此处写保存逻辑
    console.log("校验通过，保存成功");
  } else {
    alert(`代码存在${markedErrors.length}处错误，请修正后保存`);
  }
}

内容的提问来源于stack exchange，提问作者Mohammad Reza Hosainy