Monaco?Editor實現(xiàn)sql和java代碼提示實現(xiàn)示例
更新時間:2022年08月05日 17:11:38 作者:柳杉
這篇文章主要為大家介紹了Monaco?Editor代碼提示sql和java實現(xiàn)示例,有需要的朋友可以借鑒參考下,希望能夠有所幫助,祝大家多多進步,早日升職加薪
monaco editor創(chuàng)建
//創(chuàng)建和設(shè)置值 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) } }); }
// 設(shè)置編輯器語言 this.completionItemProvider = monaco.languages.registerCompletionItemProvider( language, { triggerCharacters: [' ', '.', ...this.triggerCharacters], provideCompletionItems: (model, position) => this.sqlSnippets.provideCompletionItems(model, position) } )
sql提示(庫表字段關(guān)聯(lián))
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() // 數(shù)據(jù)庫名聯(lián)想 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, ''))) { // <庫名>.<表名>聯(lián)想 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, '')) // <別名>.<字段>聯(lián)想 if (currentTable && currentTable.tableName) { return { suggestions: await this.getTableColumnSuggestByTableAlia(currentTable.tableName) } } else { return { suggestions: [] } } } else { return { suggestions: [] } } // 庫名聯(lián)想 } 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 } // 字段聯(lián)想 } 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() } // 自定義字段聯(lián)想 } else if (this.customKeywords.toString().includes(lastToken)) { return { suggestions: this.getCustomSuggest(lastToken.startsWith('$')) } // 默認聯(lián)想 } else { return { suggestions: [...this.getDataBaseSuggest(), ...this.getTableSuggest(), ...this.getKeywordSuggest()] } } }
java自定義聯(lián)想
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實現(xiàn)示例的詳細內(nèi)容,更多關(guān)于Monaco Editor代碼提示的資料請關(guān)注腳本之家其它相關(guān)文章!
相關(guān)文章
MyBatis-Plus聯(lián)表查詢以及分頁代碼實例
在開發(fā)中遇到了一個問題,需要進行聯(lián)表查詢并進行分頁,因為不想自己來寫分頁,所以還是依靠MybatisPlus來實現(xiàn)想要的功能,下面這篇文章主要給大家介紹了關(guān)于MyBatis-Plus聯(lián)表查詢以及分頁的相關(guān)資料,需要的朋友可以參考下2023-06-06java實現(xiàn)合并2個文件中的內(nèi)容到新文件中
這篇文章主要介紹了java實現(xiàn)合并2個文件中的內(nèi)容到新文件中,思路非常不錯,這里推薦給大家。2015-03-03grade構(gòu)建閱讀spring源碼環(huán)境 Idea2020.3的過程
這篇文章主要介紹了grade構(gòu)建閱讀spring源碼環(huán)境 Idea2020.3,本文分步驟通過圖文并茂的形式給大家介紹的非常詳細,對大家的學(xué)習(xí)或工作具有一定的參考借鑒價值,需要的朋友可以參考下2020-10-10Java中ArrayIndexOutOfBoundsException 異常報錯的解決方案
本文主要介紹了Java中ArrayIndexOutOfBoundsException 異常報錯的解決方案,文中通過示例代碼介紹的非常詳細,對大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價值,需要的朋友們下面隨著小編來一起學(xué)習(xí)學(xué)習(xí)吧2023-06-06