monaco-plus

已实现功能

1. 封装组件安装的webpack插件，方便引用
2. 支持sql语言的库、表、字段提示功能
3. 支持sql语言格式化功能
4. 支持错误提示

使用步骤

// 安装
npm i monaco-plus

// 引用1
import monacoPlus from 'monaco-plus'
Vue.use(monacoPlus)

or

// 引用2
import {monacoPlus} from 'monaco-plus'
export default {
  components: {
    "monaco-plus": monacoPlus,
  },
  ...
}

// 使用
<monaco-plus
  class="editor"
  ref="editorRef"
  :options="{ value: sqlStr }"
></monaco-plus>

自定义参数

// 注：其中options参数为monaco原生配置参数
// options中加入自定义配置如下：
options: {
  sqlFuns: {
    getDBNames, // 数据库名字
    getTableNamesByDBName, // 获取数据表
    getColumnNamesByTableName, // 获取字段名 
    getMarkers, // 错误提示 其中
  }, // 自定义sql提示的回调函数
  isSql: true, // 自定义sql提示开关
}

type Marker = {
   startLineNumber: 1, // 开始的行号，注：行号列号都从1开始
   startColumn: 1, // 开始的列号
   endLineNumber: 1, // 结束的行号
   endColumn: 5, // 结束的列号
   message: "拼写错误", // 错误信息
   severity: monaco.MarkerSeverity.Error, // 错误级别枚举值
 }

方法名	入参	出参	说明
getDBNames	-	Array[String] 数据库名字的数组	数据库名字
getTableNamesByDBName	dbName:String 数据库名字	Array[String] 数据表名字的数组	根据库名获取数据表
getColumnNamesByTableName	tableName:String 数据表名字	Array[String] 字段名字的数组	根据表名获取字段名
getMarkers	sqlStr:String sql的每行的数据通过\n拼串	Array[Marker] Marker类型的数组	错误提示