如何使用CodeMirror Lint标记语法错误并移除CodeMirror恢复普通textarea

一、JSHINT 报错问题修复 #

该报错是因为CodeMirror的lint插件未找到对应语言的校验库，默认降级查找JS校验工具JSHINT导致，按以下步骤配置即可解决：

• 先安装缺失的依赖包

npm install jsonlint xmllint --save

• 按规范导入所有依赖（Nuxt SSR环境下仅在客户端导入，避免服务端运行报错）

// 仅在客户端执行导入逻辑
if (process.client) {
  const CodeMirror = require('codemirror')
  // 导入基础样式
  require('codemirror/lib/codemirror.css')
  // 导入lint相关样式与核心逻辑
  require('codemirror/addon/lint/lint.css')
  require('codemirror/addon/lint/lint.js')
  // 导入语言模式
  require('codemirror/mode/xml/xml.js')
  require('codemirror/mode/javascript/javascript.js')
  // 导入对应语言的lint适配器
  require('codemirror/addon/lint/xml-lint.js')
  require('codemirror/addon/lint/json-lint.js')
  // 将校验库挂载到全局，供CodeMirror lint插件调用
  window.jsonlint = require('jsonlint')
  window.xmllint = require('xmllint')
}

• 实例化时传入正确的配置项

// JSON编辑器配置
this.jsonCm = CodeMirror.fromTextArea(this.$refs.jsonTextarea, {
  mode: {name: 'javascript', json: true},
  lineNumbers: true,
  lint: true
})
// XML编辑器配置
this.xmlCm = CodeMirror.fromTextArea(this.$refs.xmlTextarea, {
  mode: 'xml',
  lineNumbers: true,
  lint: true
})

配置完成后即可实现对应语言的行级错误高亮与提示功能。

二、重置恢复原生textarea功能实现 #

之前的解决方案无效，是因为没有调用CodeMirror官方提供的原生销毁还原API，按以下逻辑编写reset方法即可：

resetEditor() {
  // 销毁JSON编辑器，还原为原生textarea
  if (this.jsonCm) {
    this.jsonCm.toTextArea()
    this.jsonCm = null
  }
  // 销毁XML编辑器，还原为原生textarea
  if (this.xmlCm) {
    this.xmlCm.toTextArea()
    this.xmlCm = null
  }
}

toTextArea()方法会自动清除CodeMirror添加的所有DOM节点、事件绑定、校验逻辑，完全恢复原始textarea的状态，不需要额外手动清理内容。

内容的提问来源于stack exchange，提问作者BATMAN_2008