Monaco Editor实现sql和java代码提示实现示例
作者:柳杉 发布时间:2023-01-31 16:59:48
标签: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("")',
},
]};
}
}
}
)
来源:https://juejin.cn/post/6986907628937379871
0
投稿
猜你喜欢
- 该篇文章内容较多,包括有rabbitMq相关的一些简单理论介绍,provider消息推送实例,consumer消息消费实例,Direct、T
- 现象说明maven的java项目,测试用例和main所在的源码文件均符合缺省写法和格式,但是在使用mvn clean sonar:sonar
- 在许多Java面试中,我们经常会看到关于Java类加载机制的考察,例如下面这道题:class Grandpa{static{System.o
- 前端页面功能模块化拆分当一个系统的功能很多时,不可能所有功能模块的页面都写在一个页面里面,这时就需要将不同功能模块的页面拆分出去,就像模板一
- 一.分类从实现的技术上来分类,目前主要有三种技术(或者说有三种产品):1.Java自带的java.util.Timer类,这个类允许你调度一
- 0 实验环境在Android Studio中进行有关代码的编写和界面效果展示。SQLite数据库的图形化工具SQLiteStudio下载网址
- 一.方法的基本使用1.什么是方法方法是一个代码片段,类似于C语言中的函数2.方法基本语法基本语法 // 方法定义
- 一、前言最近做的项目由于引入第三方库导致在运行mvn clean package 打jar时,编译出来的 Jar 包很大(服务器多达500M
- 1、编写一个Java程序在屏幕上输出“你好!”。 //programme name Helloworld.java public class
- 类加载子系统classLoader 只负责对字节码文件的加载,至于是否可以运行,还要看执行引擎。加载的类信息存放于方法区的内存空间,除了类信
- 本文实例讲述了Android中SeekBar和RatingBar用法。分享给大家供大家参考,具体如下:什么是SeekBar?可以拖动的进度条
- 这里简单介绍了一些常用的属性,以及一些术语的解释和举例说明,不太全面,希望读者多多补充。1.重载:函数名相同,参数的个数或参数类型不同; p
- 一.hutool工具摘抄一段hutool工具的简介:Hutool是一个小而全的Java工具类库,通过静态方法封装,降低相关API的学习成本,
- 1.比较两个字符串时使用“==”还是equals()方法?当然是equals方法。“==”测试的是两个对象的引用是否相同,而equals()
- 1.介绍有时候我们在Linux中运行Java程序时,需要调用一些Shell命令和脚本。而Runtime.getRuntime().exec(
- 正则: “.”和"\""."点儿,在正则表达式中表示任意一个字符。"\"在正则表
- 1、在ActionSupport中有一个validate()方法,这个方法是验证方法,它会在execute()方法执行之前执行,所以能够起到
- 首先说说什么叫回调函数?在WINDOWS中,程序员想让系统DLL调用自己编写的一个方法,于是利用DLL当中回调函数(CALLBACK)的接口
- java 中 System.out.println()和System.out.write()的区别.这两个函数一个是System
- 介绍:%是求余运算符,也叫模除运算符,用于求余数。%要求两个操作数均为整数(或可以隐式转换成整数的类型)。标准规定:如果%左边的操作数为负数