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