当前位置：首页 > news >正文

Vue3+Monaco Editor：从零封装一个支持SQL语法与智能提示的代码编辑器

news 2026/7/15 23:12:45

1. 为什么需要自定义SQL编辑器

在管理后台开发中，我们经常遇到需要让用户自定义查询条件的场景。比如数据分析平台、CMS内容管理系统或是内部运维工具，都需要灵活的数据查询能力。传统做法是开发固定的查询表单，但这种方式扩展性差，每次新增查询条件都要改代码。

这时候如果能让用户直接编写SQL查询语句，开发效率会大幅提升。但直接在前端暴露SQL输入框存在明显风险：语法错误、性能问题甚至SQL注入攻击。因此我们需要一个智能的SQL编辑器，它应该具备：

语法高亮：直观区分关键词、表名、字段名
自动补全：输入时提示数据库表名、字段名
代码片段：快速插入常用查询模板
错误检查：实时验证SQL语法合法性

Monaco Editor作为VS Code的底层编辑器，完全能满足这些需求。但官方文档对SQL支持着墨不多，实际开发中会遇到不少坑。接下来我就带你从零封装一个Vue3+Monaco的SQL编辑器，分享我趟过的那些坑。

2. 环境搭建与基础封装

2.1 项目初始化

首先创建Vue3项目（假设你已配置好开发环境）：

npm create vue@latest sql-editor-demo

安装Monaco Editor核心库：

npm install monaco-editor@latest

重要提示：直接导入整个monaco-editor会导致打包体积暴增4MB+。正确做法是按需引入：

// 只导入基础编辑器API import * as monaco from 'monaco-editor/esm/vs/editor/editor.api'

2.2 基础编辑器组件

创建components/MonacoEditor.vue：

<template> <div ref="container" class="w-full min-h-[450px]" :style="{ height }"></div> </template> <script setup> import { ref, onMounted, watch } from 'vue' const props = defineProps({ value: String, language: { type: String, default: 'sql' }, theme: { type: String, default: 'vs' }, height: { type: String, default: '450px' } }) const container = ref(null) const editor = ref(null) onMounted(() => { editor.value = monaco.editor.create(container.value, { value: props.value, language: props.language, minimap: { enabled: false }, automaticLayout: true }) }) </script>

这个基础版本已经支持：

代码编辑基础功能
主题切换（light/dark）
自动布局调整
按语言显示基础语法高亮

3. 深度SQL支持实现

3.1 添加SQL语言支持

Monaco默认不包含完整SQL支持，需要手动配置：

// 注册SQL语言 monaco.languages.register({ id: 'sql' }) // 导入SQL语法定义 import 'monaco-editor/esm/vs/basic-languages/sql/sql.contribution'

但这样只能实现基础高亮，缺少智能提示。我们需要自定义补全逻辑：

monaco.languages.registerCompletionItemProvider('sql', { provideCompletionItems: (model, position) => { // 这里返回补全建议 return { suggestions: [ { label: 'SELECT', kind: monaco.languages.CompletionItemKind.Keyword, insertText: 'SELECT ' }, // 更多关键词... ] } } })

3.2 动态表名补全

实际项目中，补全建议应该来自后端API。这里演示如何集成：

async function fetchTableSuggestions() { const res = await fetch('/api/tables') return res.json() } // 在补全提供器中 const tables = await fetchTableSuggestions() const tableSuggestions = tables.map(table => ({ label: table.name, kind: monaco.languages.CompletionItemKind.Struct, insertText: table.name, documentation: `表: ${table.comment || '无描述'}` }))

3.3 实用代码片段

开发中常用查询可以做成代码片段：

{ label: 'queryUserBasic', kind: monaco.languages.CompletionItemKind.Snippet, insertText: [ 'SELECT id, name, email', 'FROM users', 'WHERE ${1:condition}' ].join('\n'), insertTextRules: monaco.languages.CompletionItemInsertTextRule.InsertAsSnippet, documentation: '基础用户查询' }

输入时按Tab可以在占位符间跳转，大幅提升编码效率。

4. 性能优化实战

4.1 按需加载语言特性

Monaco的各种功能都是可插拔的：

// 按需加载功能 import 'monaco-editor/esm/vs/editor/contrib/suggest/suggestController' import 'monaco-editor/esm/vs/editor/contrib/hover/hover'

4.2 Worker配置优化

Web Worker处理语法分析等重型任务：

self.MonacoEnvironment = { getWorker(_, label) { if (label === 'sql') { return new Worker('./sql.worker.js') } return new Worker('./editor.worker.js') } }

4.3 主题与渲染优化

// 使用轻量主题 import 'monaco-editor/esm/vs/editor/contrib/colorPicker/colorContributions' monaco.editor.defineTheme('my-light', { base: 'vs', inherit: true, rules: [{ token: 'keyword.sql', foreground: 'FF0000' }] })

5. 安全与生产实践

5.1 SQL安全检查

前端验证只是第一道防线：

function validateSQL(sql) { const bannedKeywords = ['DROP', 'DELETE', 'UPDATE'] return !bannedKeywords.some(kw => sql.includes(kw)) }

5.2 错误处理与日志

editor.value.onDidChangeModelContent(() => { try { const value = editor.value.getValue() emit('update:value', value) } catch (err) { console.error('编辑器错误:', err) } })