Monaco Editor实现sql和java代码提示实现示例

Monaco Editor实现sql和java代码提示实现示例

目录

monaco editor创建

sql提示(库表字段关联)

java自定义联想

monaco editor创建 //创建和设置值 if (!this.monacoEditor) { this.monacoEditor = monaco.editor.create(this._node, { value: value || code, language: language, ...options }); this.monacoEditor.onDidChangeModelContent(e => { const value = this.monacoEditor.getValue(); //使value和其值保持一致 if (value !== this.value) { this.value = value; this.props.getValue && this.props.getValue(value) } }); } // 设置编辑器语言 this.completionItemProvider = monaco.languages.registerCompletionItemProvider( language, { triggerCharacters: [' ', '.', ...this.triggerCharacters], provideCompletionItems: (model, position) => this.sqlSnippets.provideCompletionItems(model, position) } ) sql提示(库表字段关联) async provideCompletionItems(model, position) { const { lineNumber, column } = position // 光标前文本 const textBeforePointer = model.getValueInRange({ startLineNumber: lineNumber, startColumn: 0, endLineNumber: lineNumber, endColumn: column }) const textBeforePointerMulti = model.getValueInRange({ startLineNumber: 1, startColumn: 0, endLineNumber: lineNumber, endColumn: column }) // 光标后文本 // const textAfterPointer = model.getValueInRange({ // startLineNumber: lineNumber, // startColumn: column, // endLineNumber: lineNumber, // endColumn: model.getLineMaxColumn(model.getLineCount()) // }) const textAfterPointerMulti = model.getValueInRange({ startLineNumber: lineNumber, startColumn: column, endLineNumber: model.getLineCount(), endColumn: model.getLineMaxColumn(model.getLineCount()) }) // const nextTokens = textAfterPointer.trim().split(/\s+/) // const nextToken = nextTokens[0].toLowerCase() const tokens = textBeforePointer.trim().split(/\s+/) const lastToken = tokens[tokens.length - 1].toLowerCase() // 数据库名联想 if (lastToken === 'database') { return { suggestions: this.getDataBaseSuggest() } // <库名>.<表名> || <别名>.<字段> } else if (lastToken.endsWith('.')) { // 去掉点后的字符串 const tokenNoDot = lastToken.slice(0, lastToken.length - 1) if (this.dbSchema.find(db => db.dbName === tokenNoDot.replace(/^.*,/g, ''))) { // <库名>.<表名>联想 return { suggestions: [...this.getTableSuggestByDbName(tokenNoDot.replace(/^.*,/g, ''))] } } else if (this.getTableNameAndTableAlia(textBeforePointerMulti.split(';')[textBeforePointerMulti.split(';').length - 1] + textAfterPointerMulti.split(';')[0])) { const tableInfoList = this.getTableNameAndTableAlia(textBeforePointerMulti.split(';')[textBeforePointerMulti.split(';').length - 1] + textAfterPointerMulti.split(';')[0]) const currentTable = tableInfoList.find(item => item.tableAlia === tokenNoDot.replace(/^.*,/g, '')) // <别名>.<字段>联想 if (currentTable && currentTable.tableName) { return { suggestions: await this.getTableColumnSuggestByTableAlia(currentTable.tableName) } } else { return { suggestions: [] } } } else { return { suggestions: [] } } // 库名联想 } else if (lastToken === 'from' || lastToken === 'join' || /(from|join)\s+.*?\s?,\s*$/.test(textBeforePointer.replace(/.*?(/gm, '').toLowerCase())) { // const tables = this.getTableSuggest() const databases = this.getDataBaseSuggest() return { suggestions: databases } // 字段联想 } else if (['select', 'where', 'order by', 'group by', 'by', 'and', 'or', 'having', 'distinct', 'on'].includes(lastToken.replace(/.*?(/g, '')) || (lastToken.endsWith('.') && !this.dbSchema.find(db => `${db.dbName}.` === lastToken)) || /(select|where|order by|group by|by|and|or|having|distinct|on)\s+.*?\s?,\s*$/.test(textBeforePointer.toLowerCase())) { return { suggestions: await this.getTableColumnSuggest() } // 自定义字段联想 } else if (this.customKeywords.toString().includes(lastToken)) { return { suggestions: this.getCustomSuggest(lastToken.startsWith('$')) } // 默认联想 } else { return { suggestions: [...this.getDataBaseSuggest(), ...this.getTableSuggest(), ...this.getKeywordSuggest()] } } } java自定义联想 monaco.languages.registerCompletionItemProvider( language, { triggerCharacters: ['ds.','.'], provideCompletionItems: (model, position) =>{ const { lineNumber, column } = position // 光标前文本 const textBeforePointer = model.getValueInRange({ startLineNumber: lineNumber, startColumn: 0, endLineNumber: lineNumber, endColumn: column }) if(['ds.'].includes(textBeforePointer)){ return {suggestions: [ { label: 'connection("")', //显示的提示名称 insertText: 'connection("")' //选择后粘贴到编辑器中的文字 }, { label: 'query("","")', insertText: 'query("","")' }, ]}; } if(['ds.connection("").'].includes(textBeforePointer)){ return {suggestions: [ { label: 'query("")', insertText: 'query("")', }, ]}; } } } )

以上就是Monaco Editor代码提示sql和java实现示例的详细内容,更多关于Monaco Editor代码提示的资料请关注易知道(ezd.cc)其它相关文章!

推荐阅读

    优化PostgreSQL中的批量更新性能

    优化PostgreSQL中的批量更新性能,数据,表格,在Ubuntu 12.04上使用PG 9.1. 我们目前需要24小时才能运行大量UPDATE数据库上的语句,其形式

    mac怎么安装mysql| macbook怎么下载mysql

    mac怎么安装mysql| macbook怎么下载mysql,标签,学习python 不得不学习的就是数据库,那么在开始学习数据库之前,那么今天我们先说下怎么安装m

    确定java按钮响应事件的代码

    确定java按钮响应事件的代码,,* 阅读本文可以结合最后在java登录窗口界面下面是一个链接。 是定义的容器。 容器(CP =得到内容面板); / /

    SQL 查看触发器

    SQL 查看触发器,触发器,示例, 1、通过可视化操作来管理和查看触发器 在Microsoft SQL Server Management Studio中,选中某一数据库的某一

    MySQL更新更新页面1/4。

    MySQL更新更新页面1/4。,,插入和替换 插入和替换语句的功能是将新数据插入表中,这两个语句的语法相似,它们之间的主要区别是如何处理重复的

    MSSQL临时表与内存表的区别

    MSSQL临时表与内存表的区别,变量,存储过程,区别一:<PRE lang=sql>CREATE table #T (s varchar(128))DECLARE @T table (s varchar(128))IN

    postgresql的ALTER常用操作

    postgresql的ALTER常用操作,字段,数据类型,postgresql版本:psql (9.3.4)1、增加一列ALTER TABLE table_name ADD column_name datatype;

    PostgreSQL数据库修改sql表的方法汇总

    PostgreSQL数据库修改sql表的方法汇总,字段,默认值, 一,修改表 PostgreSQL 提供了一族命令用于修改现有表。 可以实现: 增加字段, 删除字段,

    java电脑驱动下载|java驱动开发

    java电脑驱动下载|java驱动开发,,1. java驱动开发你可以写一个线程去执行 也可以用java计数器去写 (多少时间执行一次)以下为定时器代码My