Vue 使用 vue-codeMirror 实现 Groovy 语法校验和高亮错误

要实现语法校验并高亮语法错误，需要使用 CodeMirror 的 lint 插件和 groovy-lint 插件。

首先，安装 CodeMirror 和 groovy-lint 插件：

npm install codemirror vue-codemirror --save
npm install codemirror-groovy-lint --save

然后，在 Vue 组件中引入 CodeMirror 和 groovy-lint 插件：

<template>
  <div>
    <codemirror ref='editor' :options='editorOptions' v-model='code' />
  </div>
</template>

<script>
import CodeMirror from 'codemirror';
import 'codemirror/lib/codemirror.css';
import 'codemirror/mode/groovy/groovy';
import 'codemirror/addon/lint/lint.css';
import 'codemirror/addon/hint/show-hint.css';
import 'codemirror/addon/hint/show-hint.js';
import 'codemirror/addon/hint/anyword-hint.js';
import 'codemirror/addon/lint/lint.js';
import 'codemirror/addon/lint/javascript-lint.js';
import 'codemirror-groovy-lint/groovy-lint.js';

export default {
  data() {
    return {
      code: '',
      editorOptions: {
        mode: 'groovy',
        lineNumbers: true,
        lint: {
          getAnnotations: CodeMirror.lint.groovy,
          async: true
        },
        hintOptions: {
          hint: CodeMirror.hint.anyword
        }
      }
    };
  },
  mounted() {
    this.$nextTick(() => {
      this.$refs.editor.codemirror.on('change', this.onChange);
    });
  },
  methods: {
    onChange() {
      this.$refs.editor.codemirror.performLint();
    }
  }
};
</script>

以上代码中，我们定义了一个 CodeMirror 实例，它的语法模式是 groovy，同时启用了 lint 和 hint 插件。在 lint 插件中，我们配置了 getAnnotations 回调函数为 CodeMirror.lint.groovy，这个函数实际上是 groovy-lint 插件提供的。在 hint 插件中，我们使用了 anyword-hint 插件，这个插件会根据用户输入的提示。

最后，在 mounted 方法中，我们监听了 CodeMirror 的 change 事件，当用户输入代码时，会调用 onChange 方法，这个方法会触发 performLint 方法，这个方法会校验代码并高亮语法错误。

注意，groovy-lint 插件需要服务器支持，所以你需要在自己的服务器上部署 groovy-lint。如果你没有服务器可以使用，可以使用在线服务：https://groovy-lint.herokuapp.com/。只需要将 getAnnotations 回调函数修改为以下代码即可：

getAnnotations: function(content, callback) {
  axios.post('https://groovy-lint.herokuapp.com/lint', { code: content }).then(response => {
    callback(response.data.errors);
  });
},