vue3-monaco-editor

vue3-monaco-editor

English

在线文档 · 在线演示

一个面向 SQL 编辑场景的轻量 Vue 3 Monaco Editor 组件库。它提供类型完善的组件导出、v-model 双向绑定、主题切换、尺寸控制，以及 SQL 关键字、库、表、字段和自定义关键字补全。

特性

• 支持 Vue 3 组件直接引入和插件注册。
• 支持编辑器内容 v-model 双向绑定。
• 内置 SQL 语言和关键字补全。
• 支持通过类型化数据提供库、表、字段补全。
• 支持自定义关键字补全。
• 支持配置宽度、高度、父容器尺寸变化监听、主题和 Monaco 原生配置。
• 输出 ESM、UMD、压缩 UMD、CSS 和 TypeScript 声明文件。
• 项目内置 Vite 示例、Rollup 构建、ESLint、Prettier、Husky 和 VitePress 文档。

安装

pnpm add vue3-monaco-editor monaco-editor

vue 和 monaco-editor 是 peer dependencies，需要在业务项目里安装。

快速开始

全局注册：

import { createApp } from 'vue'
import MonacoEditor from 'vue3-monaco-editor'
import 'vue3-monaco-editor/style.css'

import App from './App.vue'

createApp(App).use(MonacoEditor).mount('#app')

也可以直接引入组件：

<template>
  <MonacoEditor
    v-model="sql"
    :height="320"
    monaco-editor-theme="vs-dark"
    :database-options="databaseOptions"
    :custom-keywords="customKeywords"
  />
</template>

<script setup lang="ts">
import { ref } from 'vue'
import { MonacoEditor } from 'vue3-monaco-editor'
import type { DatabaseOption } from 'vue3-monaco-editor'
import 'vue3-monaco-editor/style.css'

const sql = ref(`select *
from databaseName1.tableName1 t
where t.id = "1001"`)

const customKeywords = ['warehouse', 'partition']

const databaseOptions: DatabaseOption[] = [
  {
    databaseName: 'databaseName1',
    tableOptions: [
      {
        tableName: 'tableName1',
        tableComment: '示例表',
        fieldOptions: [
          {
            fieldName: 'id',
            fieldType: 'string',
            fieldComment: '主键',
            databaseName: 'databaseName1',
            tableName: 'tableName1',
          },
          {
            fieldName: 'created_at',
            fieldType: 'datetime',
            fieldComment: '创建时间',
            databaseName: 'databaseName1',
            tableName: 'tableName1',
          },
        ],
      },
    ],
  },
]
</script>

API

Props

事件

暴露方法

可以通过组件 ref 调用：

<script setup lang="ts">
import { ref } from 'vue'
import { MonacoEditor } from 'vue3-monaco-editor'
import type { MonacoEditorExpose } from 'vue3-monaco-editor'

const editorRef = ref<MonacoEditorExpose | null>(null)

const reset = () => {
  editorRef.value?.resetEditor()
}
</script>

补全数据结构

export type FieldOption = {
  fieldName: string
  fieldType: string
  fieldComment: string
  databaseName: string
  tableName: string
}

export type TableOption = {
  tableName: string
  tableComment: string
  fieldOptions: FieldOption[]
}

export type DatabaseOption = {
  databaseName: string
  tableOptions: TableOption[]
}

补全规则：

• 在 from 或 join 后输入时，提示数据库名称。
• 输入 databaseName. 时，提示该数据库下的表。
• 在 select、where、and、or、on、group by、order by 等 SQL 片段后输入时，提示字段。
• 输入 alias. 时，如果能推断出表别名，会提示对应表字段。
• 自定义关键字会合并到默认关键字提示里。

Monaco 原生配置

monacoEditorOption 接收 Monaco 原生的 IStandaloneEditorConstructionOptions。

<MonacoEditor
  v-model="sql"
  :monaco-editor-option="{
    fontSize: 13,
    minimap: { enabled: true },
    wordWrap: 'on',
  }"
/>

组件会提供一组偏 SQL 编辑体验的默认配置，再把你的配置合并覆盖上去。

样式

在应用中引入一次打包样式：

import 'vue3-monaco-editor/style.css'

本地开发

pnpm install
pnpm dev

常用脚本：

构建产物

dist/vue3-monaco-editor.es.js
dist/vue3-monaco-editor.umd.js
dist/vue3-monaco-editor.umd.min.js
dist/vue3-monaco-editor.css
types/vue3-monaco-editor.d.ts

注意事项

• 本包不会把 vue 和 monaco-editor 打进产物，它们都是外部 peer dependencies。
• 推荐在 Vite、Rollup、Webpack 等现代构建工具中使用。
• Monaco worker 的配置可能仍然取决于业务项目的构建工具。

许可证

MIT