codemirror@5关于代码lint校验失效问题

1.安装codemirror@5最后一个版本npm i codemirror@5

"codemirror": "^5.65.16"

2.初始化一个编辑器

<template>
  <div class="file-editor">
    <textarea ref="editor" class="editor"></textarea>
  </div>
</template>

<script>
import CodeMirror from 'codemirror/lib/codemirror.js'
// 代码错误检查
import 'codemirror/addon/lint/lint.css'
import 'codemirror/addon/lint/javascript-lint'
import 'codemirror/addon/lint/json-lint'
import 'codemirror/addon/lint/css-lint'
import 'codemirror/addon/lint/yaml-lint'
import 'codemirror/addon/lint/html-lint'
import 'codemirror/addon/lint/lint'
// 提示弹窗
import 'codemirror/addon/dialog/dialog.js'
import 'codemirror/addon/dialog/dialog.css'
// 语法智能提示
import 'codemirror/addon/hint/show-hint.css'
import '@/static/show-hint.js'
import '@/static/javascript-hint.js'
import 'codemirror/addon/hint/css-hint'
import 'codemirror/addon/hint/html-hint'
// 括号显示匹配
import 'codemirror/addon/edit/matchbrackets'
import 'codemirror/addon/selection/active-line'

// 代码折叠功能
import 'codemirror/addon/fold/foldgutter.css'
import 'codemirror/addon/fold/foldcode'
import 'codemirror/addon/fold/foldgutter'
import 'codemirror/addon/fold/brace-fold'
import 'codemirror/addon/fold/comment-fold'
import 'codemirror/addon/fold/xml-fold'
import 'codemirror/lib/codemirror.css'
// language js
import 'codemirror/mode/css/css.js'
import 'codemirror/mode/htmlmixed/htmlmixed.js'
import 'codemirror/mode/javascript/javascript.js'
// theme css
import 'codemirror/theme/base16-dark.css'

export default {
  name: 'Index',
  model: {
    prop: 'value',
    event: 'change'
  },
  props: {
    value: {
      type: String,
      default: ''
    },
    options: {
      type: Object,
      default: () => { }
    }
  },
  data() {
    return {
      Editor: null,
      defaultOptions: {
        tabSize: 2,
        mode: 'text/javascript',
        theme: 'base16-dark',
        lineNumbers: true,
        line: true,
        wrap: true,
        gutters: [
          'CodeMirror-linenumbers',
          'CodeMirror-foldgutter',
          'CodeMirror-lint-markers'
        ],
        foldGutter: true,
        foldOptions: {
          rangeFinder: CodeMirror.fold.indent,
          indentUnit: 4
        },
        lineWrapping: true,
        selectionPointer: true,
        matchBrackets: true,
        autoCloseBrackets: true,
        lintOnChange: true,
        lint: true,
        selfContain: true,
      },
      fileInstance: null
    }
  },
  watch: {
    value(v) {
      if (this.Editor) {
        try {
          window.evalFun = eval(this.value)
        } catch (error) {

        }
        this.Editor.setValue(v)
      }
    }
  },
  mounted() {
    this.initMorror()
  },
  methods: {
    initMorror() {
      this.Editor = CodeMirror.fromTextArea(this.$refs.editor, {
        ...this.defaultOptions,
        ...this.options,
        hintOptions: {
          completeSingle: false
        }
      })
      try {
        window.evalFun = eval(this.value)
      } catch (error) {

      }
      this.Editor.setValue(this.value)
      // this.Editor.on("cursorActivity", () => {
      //   this.Editor.showHint();
      // });
      this.Editor.on('inputRead', () => {
        this.Editor.showHint()
      })
    },
    getEditor() {
      return this.Editor
    },
  }
}
</script>
<style>
#cm-complete-0 {
  z-index: 9999;
}

.CodeMirror {
  height: 100%;
}
</style>
<style scoped>
.file-editor {
  width: 100%;
  height: 100%;
  position: relative;
}

.file-editor:focus {
  outline: 0;
}

.editor {
  width: 100%;
  height: 100%;
}
</style>

3.启动项目会报错，原因是html-lint.js依赖外部插件，需手动安装npm i htmlhint -D

4.此时项目启动正常，但是js、json、css语法检测依旧未生效，通过查看官方demo发现缺失三个lint.js文件

手动添加到项目index.html引入即可

<script src="https://unpkg.com/jshint@2.13.2/dist/jshint.js"></script>
<script src="https://unpkg.com/jsonlint@1.6.3/web/jsonlint.js"></script>
<script src="https://unpkg.com/csslint@1.0.5/dist/csslint.js"></script>