vue中codemirror怎么格式化代码

在 Vue 中使用 CodeMirror 可以通过两种方式：使用官方的 Vue 组件或者手动在 Vue 中创建 CodeMirror 实例。

无论哪种方式，都可以通过 CodeMirror 提供的 `autoFormatRange` 函数对文本进行格式化。下面以使用官方的 Vue 组件为例来说明如何在 Vue 中使用 CodeMirror 并格式化代码。

首先，在 Vue 项目中安装 CodeMirror 和 CodeMirror 的 Vue 组件：

npm install codemirror vue-codemirror --save

然后，在 Vue 中注册 CodeMirror 组件：

import Vue from 'vue'
import VueCodemirror from 'vue-codemirror'
import 'codemirror/lib/codemirror.css' // 引入 CodeMirror 样式文件
import 'codemirror/theme/material.css' // 引入 CodeMirror 主题文件
import 'codemirror/mode/javascript/javascript.js' // 引入 JavaScript 语法模式文件

Vue.use(VueCodemirror)

在组件中使用 CodeMirror：

<template>
  <div>
    <codemirror v-model="code" :options="options"></codemirror>
  </div>
</template>

<script>
export default {
  data () {
    return {
      code: '',
      options: {
        tabSize: 2, // Tab 缩进大小为 2
        mode: 'javascript', // 指定语言为 JavaScript
        theme: 'material' // 指定主题为 Material
      }
    }
  },
  methods: {
    format () {
      const editor = this.$refs.myCodeMirror.getCodeMirror()
      const from = editor.getCursor(true)
      const to = editor.getCursor(false)
      editor.autoFormatRange(from, to)
    }
  }
}
</script>

以上代码中，`options` 是 CodeMirror 的配置项，`format` 方法中调用了 `autoFormatRange` 函数对文本进行格式化。需要注意的是，需要通过 `this.$refs.myCodeMirror.getCodeMirror()` 获取 CodeMirror 实例才能调用 `autoFormatRange` 函数。

当然，以上只是一个简单的示例，实际使用中可能需要根据具体需求进行调整。