CodeMirror 是一个强大的浏览器代码编辑器，可以用来编写和编辑代码，支持多种编程语言。

目前CodeMirror最新版本是6.0.1.集成时报错，资料较少。所以我卸载重新安装了CodeMirror5.

首先，安装依赖包：

npm install codemirror-editor-vue3 codemirror@^5 -S

如果项目需要 TypeScript 支持，还需安装 @types/codemirror 依赖。

npm install @types/codemirror -D

然后，注册组件。有两种方式，全局注册和局部注册。

1.全局注册（不推荐，可能导致模板中无法正确获取类型提示）

在 main.js 中添加如下代码：

import { createApp } from 'vue';
import App from './App.vue';
import { InstallCodemirror } from 'codemirror-editor-vue3';
 
const app = createApp(App);
app.use(InstallCodemirror);
app.mount('#app');

2.局部注册和使用小案例

<template>
  <Codemirror
    v-model:value="code"
    :options="cmOptions"
    ref="editor"
    border
    height="300"
    width="100%"
    @ready="onReady"
  />
</template>
 
<script>
import { ref } from 'vue';
import Codemirror from 'codemirror-editor-vue3';
// 引入css文件
import 'codemirror/lib/codemirror.css'
// 引入主题 可以从 codemirror/theme/ 下引入多个
import 'codemirror/theme/idea.css'
// 引入语言模式 可以从 codemirror/mode/ 下引入多个
import 'codemirror/mode/sql/sql.js';
// 代码提示功能 具体语言可以从 codemirror/addon/hint/ 下引入多个
import 'codemirror/addon/hint/show-hint.css';
import 'codemirror/addon/hint/show-hint';
import 'codemirror/addon/hint/sql-hint';
 
export default {
  components: { Codemirror },
  setup() {
    const code = ref('SELECT *\n');
    const cmOptions = {
      // 语言及语法模式
      mode: 'text/x-sql',
      // 主题
      theme: 'default', // 'idea'
      // 显示函数
      line: true,
      // 显示行号
      lineNumbers: true,
      // 软换行
      lineWrapping: true,
      // tab宽度
      tabSize: 4,
      // 代码提示功能
      hintOptions: {
            // 避免由于提示列表只有一个提示信息时，自动填充
            completeSingle: false,
            // 不同的语言支持从配置中读取自定义配置 sql语言允许配置表和字段信息，用于代码提示
            tables: {
              "BPSuv": ["DocEntry", "Subject", "DocStatus","Remarks"],
              "BPSuvA": ["DocEntry", "LineNum", "Question","QstType"],
              "BPSuvB": ["DocEntry", "LineNum", "UserID","UserName"],
            },
          },
    };
    const onReady = (editor) => {
      editor.on('inputRead', function (cm, location) {
          if (/[a-zA-Z]/.test(location.text[0])) {
              cm.showHint();
          }
      });
    };
    return {
      code,
      cmOptions,
      onReady,
    }
  },
};
</script>

最后，运行成功。

其它高级功能后续在慢慢加。 

CodeMirror 配置项

以下是一些常用的配置选项：

1. 基本配置
value：编辑器的初始内容。
mode：设置编辑器的语言模式，如 javascript、htmlmixed、css 等，用于语法高亮。
theme：设置编辑器的主题，如 default、material、dracula 等。
lineNumbers：布尔值，是否显示行号。默认值为 false。
lineWrapping：布尔值，是否启用自动换行功能。默认值为 false。
readOnly：是否设置为只读模式，值可以是 true、false 或 "nocursor"（显示内容，但隐藏光标）。
tabSize：设置 Tab 缩进的空格数量，默认是 4。
2. 光标和选择
cursorBlinkRate：设置光标闪烁的速率，默认是 530 毫秒。如果设置为 0，光标将不闪烁。
cursorScrollMargin：光标接近编辑器顶部或底部时，滚动前保持的距离（单位为像素）。
cursorHeight：光标高度，0-1 的小数，默认值为 1 表示整个行高。
selectionPointer：当触摸设备上的指针按住选区时，显示不同的指针样式。
3. 自动补全和提示
extraKeys：允许自定义快捷键映射。可以定义键盘快捷键触发的功能。
hintOptions：自动提示相关配置，用于设置自动补全的行为。
4. 编辑行为
smartIndent：布尔值，是否在新行缩进时保持前一行的缩进。默认值为 true。
indentWithTabs：布尔值，是否使用 Tab 键进行缩进，默认值为 false。
electricChars：布尔值，是否在输入右括号、引号等字符时自动缩进。默认值为 true。
autoCloseBrackets：布尔值或配置对象，是否在输入括号或引号时自动补全。可以设置为 true、false 或指定自定义的括号匹配规则。
matchBrackets：布尔值或配置对象，是否高亮匹配的括号。
5. 滚动和布局
lineWrapping：布尔值，是否开启自动换行。
viewportMargin：默认值为 10。设置虚拟滚动的可见行数，以减少性能开销。
scrollbarStyle：设置滚动条的样式，如 native、null 等。
6. 事件监听
onChange：编辑器内容变化时触发的事件。
onCursorActivity：光标活动时触发的事件。
onKeyEvent：键盘事件时触发的事件，可以用来拦截或自定义某些按键的行为。
onFocus / onBlur：编辑器获得或失去焦点时触发的事件。
7. 高亮相关
styleActiveLine：布尔值，是否高亮当前行。
highlightSelectionMatches：布尔值或配置对象，是否高亮与当前选择匹配的所有其他实例。可用来实现选中关键词的批量高亮。
8. Linting
lint：布尔值或配置对象，是否开启 linting（代码检查）功能。需要额外的插件支持，如 ESLint 插件。
9. 代码折叠
foldGutter：布尔值，是否显示代码折叠按钮。
gutters：设置显示行号和折叠按钮等的边栏，可以是一个数组，用于自定义样式。
10. 高级配置
firstLineNumber：设置第一个行号，默认是 1。
lineSeparator：设置行分隔符，如 \n 或 \r\n。
configureMouse：自定义鼠标行为的配置对象。
这些配置项可以帮助你根据需求对 CodeMirror 编辑器进行高度自定义。在 Vue 项目中，可以将这些配置项封装在一个对象中并传入到 CodeMirror 实例的初始化选项中。

CodeMirror官网：CodeMirror

codemirror-editor-vue3地址：rennzhang/codemirror-editor-vue3: CodeMirror component for Vue3