Vue2的SQL编辑器 - monaco的基本使用

概述

本文在vue中实现了一个基本的SQL编辑器，包括语法高亮，关键字补全，表名，字段名补全等功能

细节功能等尚未进行完善，仅作学习使用

效果如下：

iShot_2022-11-11_00.02.50.gif

准备工作

本文在vue-cli创建的项目中，使用vue2
需要安装两个包

    "monaco-editor": "0.30.0", // 编辑器主体
    "monaco-editor-webpack-plugin": "6.0.1", // 帮我们处理语法高亮等问题

使用 yarn add 或者 npm install 等命令均可，但是版本会有很大的影响，monaco-editor 的版本与 monaco-editor-webpack-plugin 的版本有对应关系，如下：

monaco-editor-webpack-plugin	monaco-editor
7.*.*	>= 0.31.0
6.*.*	0.30.*
5.*.*	0.29.*
4.*.*	0.25.*, 0.26.*, 0.27.*, 0.28.*
3.*.*	0.22.*, 0.23.*, 0.24.*
2.*.*	0.21.*
1.9.*	0.20.*
1.8.*	0.19.*
1.7.*	0.18.*

如果对应关系不正确会导致无法运行，各种莫名其妙的报错
建议直接在package.json 文件里面添加上面的固定版本依赖项

先处理 monaco-editor-webpack-plugin

在 vue.config.js 中添加

// 把 monaco webpack plugin 搞进去
const MonacoWebpackPlugin = require('monaco-editor-webpack-plugin');

module.exports={
  configureWebpack: config => {
    config.plugins.push(
      new MonacoWebpackPlugin({
        languages:["sql"], // 目前只处理SQL语言
        features:["coreCommands","find"] // 基本命令和搜索功能
      })
    )
  },
}

代码编辑器主体

SQLEditor.vue

<template>
  <div id="app" style="height: 100vh">
    <div id="code-editor" ref="code-editor" style="height: 100%; width: 100%"></div>
  </div>
</template>

script 中的代码，全注释版

import * as monaco from "monaco-editor";
import { language } from "monaco-editor/esm/vs/basic-languages/sql/sql";
// 从 monaco-editor 的 sql 里面拿到关键字
const { keywords } = language;
export default {
  name: "App",
  data() {
    return {
      // 编辑器实例
      monacoEditor: null,
      // 原本已经写入的数据
      value: "SELECT * FROM users;\n\nSELECT * FROM roles;",
      // 补全的数据，建议在编辑器初始化之间就请求回来放好
      tables: {
        users: ["name", "id","email","phone","password"],
        roles:["id","name","order","created_at","updated_at","deleted_at"]
      },
      // 编辑器主题
      theme: "vs-dark", // 默认是 "vs"
    };
  },
  methods: {
    /**
     * @description: 获取编辑器中填写的值
     */
    getValue() {
      return this.monacoEditor.getValue();
    },

    /**
     * @description: 初始化自动补全
     */
    initAutoCompletion() {
      monaco.languages.registerCompletionItemProvider("sql", {
        // 触发提示的字符
        triggerCharacters: [".", " ", ...keywords],
        provideCompletionItems: (model, position) => {
          let suggestions = [];
          // 行号，列号
          const { lineNumber, column } = position;
          // 光标之前的所有字符，即从这一行的 0 到当前的字符
          const textBeforePointer = model.getValueInRange({
            startLineNumber: lineNumber,
            startColumn: 0,
            endLineNumber: lineNumber,
            endColumn: column,
          });

          // trim() 取消两边空格，保证拆分出来前后都不是空值 
          // \s是指空白，包括空格、换行、tab缩进等所有的空白
          const words = textBeforePointer.trim().split(/\s+/);

          // 最后的一个有效词
          const lastWord = words[words.length - 1];

          if (lastWord.endsWith(".")) { // 如果这个词以 . 结尾，那么认为是希望补全表的字段
            // 拿到真实的表名，把 . 去掉
            const tableName = lastWord.slice(0, lastWord.length - 1);
            if (Object.keys(this.tables).includes(tableName)) {
              suggestions = [...this.getFieldsSuggest(tableName)];
            }
          } else if (lastWord === ".") {
            // 如果这个词本身就是一个 . 即点前面是空的，那么什么都不用补全了
            // 按理说这应该是个语法错误
            suggestions = [];
          } else {
            // 其他时候都补全表名，以及关键字
            suggestions = [...this.getTableSuggest(), ...this.getKeywordsSuggest()];
          }

          return {
            suggestions,
          };
        },
      });
    },
    
    /**
     * @description: 获取关键字的补全列表
     * @tips: CompletionItemKind 的所有枚举可以在monaco.d.ts 文件中找到，有二十多个，取需即可
     */    
    getKeywordsSuggest() {
      return keywords.map((key) => ({
        label: key,// 显示的名称
        kind: monaco.languages.CompletionItemKind.Keyword,
        insertText: key,// 真实补全的值
      }));
    },

    /**
     * @description: 获取表名的补全列表
     */    
    getTableSuggest() {
      return Object.keys(this.tables).map((key) => ({
        label: key, // 显示的名称
        kind: monaco.languages.CompletionItemKind.Variable,
        insertText: key, // 真实补全的值
      }));
    },

    /**
     * @description: 根据表名获取字段补全列表
     * @param {*} tableName
     */    
    getFieldsSuggest(tableName) {
      const fields = this.tables[tableName];
      if (!fields) {
        return [];
      }
      return fields.map((name) => ({
        label: name,
        kind: monaco.languages.CompletionItemKind.Field,
        insertText: name,
      }));
    },
  },

  mounted() {
    // 建议在这里把表名和字段名先拿出来
    // ....
    // this.tables = res.data?.data
    // 首先初始化
    this.initAutoCompletion();
    // 初始化编辑器
    this.monacoEditor = monaco.editor.create(document.getElementById("code-editor"), {
      value: this.value, // 初始文字
      language: "sql", // 语言
      readOnly: false, // 是否只读
      automaticLayout: true, // 自动布局
      theme: this.theme, // vs | hc-black | vs-dark
      minimap: {
        enabled: false,// 关闭小地图
      },
      tabSize: 2, // tab缩进长度
      fontSize: 16, // 文字大小
    });
  },

  beforeDestroy() {
    // 销毁之前把monaco的实例也销毁了，不然会多次注册
    if (this.monacoEditor) {
      this.monacoEditor.dispose();
    }
  },
};

结果总结

以上代码未进行组件封装，只是实现了基本功能

还可以枚举更多的补全情况，让补全显得更加智能

当然本文只是简单使用，尚未进行深入，待后续使用到了再继续研究