Monaco Editor实现sql和java代码提示实现示例

 更新时间:2022年08月05日 17:11:38   作者:柳杉  
这篇文章主要为大家介绍了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代码提示的资料请关注脚本之家其它相关文章!

相关文章

  • spring@value注入配置文件值失败的原因分析

    spring@value注入配置文件值失败的原因分析

    这篇文章主要介绍了spring@value注入配置文件值失败的原因分析,具有很好的参考价值,希望对大家有所帮助。如有错误或未考虑完全的地方,望不吝赐教
    2021-12-12
  • 聊聊BeanUtils.copyProperties和clone()方法的区别

    聊聊BeanUtils.copyProperties和clone()方法的区别

    这篇文章主要介绍了聊聊BeanUtils.copyProperties和clone()方法的区别,具有很好的参考价值,希望对大家有所帮助。如有错误或未考虑完全的地方,望不吝赐教
    2021-09-09
  • Spring Boot假死诊断实战记录

    Spring Boot假死诊断实战记录

    这篇文章主要给大家介绍了关于Spring Boot假死诊断的相关资料,文中通过示例代码介绍的非常详细,对大家学习或者使用Spring Boot具有一定的参考学习价值,需要的朋友们下面来一起学习学习吧
    2019-07-07
  • 使用多种方式实现遍历HashMap的方法

    使用多种方式实现遍历HashMap的方法

    下面小编就为大家带来一篇使用多种方式实现遍历HashMap的方法。小编觉得挺不错的,现在分享给大家,也给大家做个参考。一起跟随小编过来看看吧
    2016-05-05
  • 简单通用JDBC辅助类封装(实例)

    简单通用JDBC辅助类封装(实例)

    下面小编就为大家带来一篇简单通用JDBC辅助类封装(实例)。小编觉得挺不错的,现在就分享给大家,也给大家做个参考。一起跟随小编过来看看吧
    2016-07-07
  • 原因分析IDEA导入Spring-kafka项目Gradle编译失败

    原因分析IDEA导入Spring-kafka项目Gradle编译失败

    这篇文章主要为大家介绍分析了IDEA导入Spring-kafka项目Gradle中编译失败原因及解决,有需要的朋友可以借鉴参考下,希望能够有所帮助,祝大家多多进步
    2022-02-02
  • hibernate 三种状态的转换

    hibernate 三种状态的转换

    本文主要介绍了hibernate三种状态的转换。具有很好的参考价值。下面跟着小编一起来看下吧
    2017-03-03
  • Java实现广度优先遍历的示例详解

    Java实现广度优先遍历的示例详解

    广度优先遍历:广度优先遍历是连通图的一种遍历策略,因为它的思想是从一个顶点V0开始,辐射状地优先遍历其周围较广的区域故得名。本文详细介绍了Java如何实现广度优先遍历,感兴趣的小伙伴可以学习一下
    2022-02-02
  • 详解springMVC两种方式实现多文件上传及效率比较

    详解springMVC两种方式实现多文件上传及效率比较

    本篇文章介绍了springMVC两种方式实现多文件上传及效率比较。springMVC实现多文件上传有两种,一种是字节流的方式进行文件上传,另外一种是使用springMVC包装好的解析器进行上传,有兴趣的可以了解一下。
    2016-12-12
  • 一文秒懂通过JavaCSV类库读写CSV文件的技巧

    一文秒懂通过JavaCSV类库读写CSV文件的技巧

    本文给大家推荐第三方工具库 JavaCSV,用来造一些 csv 测试数据文件,使用超级方便,本文通过示例代码给大家介绍的非常详细,感兴趣的朋友跟随小编一起看看吧
    2021-05-05

最新评论