VUE实现SQL在线编辑器，SQL分析器，SQL代码关键字提示

最新推荐文章于 2025-05-12 10:41:40 发布

zhangwenwu的前端小站

最新推荐文章于 2025-05-12 10:41:40 发布

阅读量1.6w

点赞数 3

CC 4.0 BY-SA版权

分类专栏： vue web前端

本文链接：https://blog.csdn.net/zhangwenwu2/article/details/109113900

web前端同时被 2 个专栏收录

58 篇文章

订阅专栏

vue

24 篇文章

订阅专栏

本文介绍了如何利用npm安装和引入CodeMirror插件及sql-formatter库，创建一个支持SQL代码编辑、高亮显示、自动提示和格式化的textarea。在Vue环境中，通过设置配置项，实现了快捷键触发代码提示和自定义提示内容，并提供了代码格式化的功能。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

1、首先使用npm安装CodeMirror插件,sql-formatter格式化插件

npm install --save codemirror
npm install --save sql-formatter

2、然后引入该文件

import 'codemirror/theme/ambiance.css'
import 'codemirror/lib/codemirror.css'
import 'codemirror/addon/hint/show-hint.css'

const CodeMirror = require('codemirror/lib/codemirror')
require('codemirror/addon/edit/matchbrackets')
require('codemirror/addon/selection/active-line')
require('codemirror/mode/sql/sql')
require('codemirror/addon/hint/show-hint')
require('codemirror/addon/hint/sql-hint')
import sqlFormatter from 'sql-formatter'

3、使用

<textarea ref="mycode" v-model="code" placeholder="按Ctrl键进行代码提示" class="codesql" style="height:200px;width:600px;" />

mounted() {
    const mime = 'text/x-mariadb'
    // let theme = 'ambiance'//设置主题，不设置的会使用默认主题
    this.editor = CodeMirror.fromTextArea(this.$refs.mycode, {
      mode: mime, // 选择对应代码编辑器的语言，我这边选的是数据库，根据个人情况自行设置即可
      indentWithTabs: true,
      smartIndent: true,
      lineNumbers: true,
      matchBrackets: true,
      // theme: 'base16-light',
      // autofocus: true,
      extraKeys: { 'Ctrl': 'autocomplete' }, // 自定义快捷键
      hintOptions: {// 自定义提示选项
        tables: {
          users: ['1112', '123123', '124124'],
          countries: ['124', '124124', '1']
        }
      }
    })
    this.editor.on('cursorActivity', () => {
     this.editor.showHint()
    })
  },

4. 格式化SQL语句

/* 代码格式化*/
    format() {
      /* 获取文本编辑器内容*/
      let sqlContent = ''
      sqlContent = this.editor.getValue()
      /* 将sql内容进行格式后放入编辑器中*/
      this.editor.setValue(sqlFormatter.format(sqlContent))
    },