Monaco Editor怎么实现SQL和Java代码提示

2023-05-11 19:00| 来源: 网络整理| 查看: 265

Monaco Editor怎么实现SQL和Java代码提示发布时间：2023-05-09 10:27:01 来源：亿速云阅读：67 作者：iii 栏目：编程语言

这篇文章主要介绍了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怎么实现SQL和Java代码提示”知识都有一定的了解，大家如果还想学习更多知识，欢迎关注亿速云行业资讯频道。

推荐阅读：在vue项目中怎么使用codemirror插件实现代码编辑器功能 Java Idea如何实现高效率配置的技巧讲解

免责声明：本站发布的内容（图片、视频和文字）以原创、转载和分享为主，文章观点不代表本网站立场，如果涉及侵权请联系站长邮箱：[email protected]进行举报，并提供相关证据，一经查实，将立刻删除涉嫌侵权内容。

sql java 上一篇新闻：怎么安装php和配置mysql数据库服务器下一篇新闻：怎么使用Flask Blueprint和SQLAlchemy编写Python应用程序猜你喜欢 YAML简易教程学完Python可以做什么?主要用途有哪些? 关于CNN的优化 python爬虫系列精品之多线程的简单实例 python configparser LeetCode: 505.left叶子节点 CNN-cr-1 0-优化 Mybatis如何传入多个参数 KNN算法调优用Python6种方法：给定一个不超过5位的正整数，判断有几位

【本文地址】

公司简介

联系我们