Monaco|Monaco Editor实现sql和java代码提示实现示例 MonacoEditor实现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 = https://www.it610.com/article/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|Monaco Editor实现sql和java代码提示实现示例】以上就是Monaco Editor代码提示sql和java实现示例的详细内容，更多关于Monaco Editor代码提示的资料请关注脚本之家其它相关文章！