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代码提示的资料请关注我们其它相关文章!

(0)

相关推荐

  • Asp.Net Core 使用Monaco Editor 实现代码编辑器功能

    在项目中经常有代码在线编辑的需求,比如修改基于Xml的配置文件,编辑Json格式的测试数据等.我们可以使用微软开源的在线代码编辑器Monaco Editor实现这些功能.Monaco Editor是著名的VSCode的前身,项目地址:https://microsoft.github.io/monaco-editor/.本文介绍在Asp.Net Core项目中使用Monaco Editor实现代码编辑器功能. 安装 可以使用npm下载moaco-editor: npm install monaco

  • vue2.x中monaco-editor的使用说明

    目录 vue2中使用monaco-editor 安装 配置 创建MonacoEditor公共组件 使用vue-monaco-editor遇到的坑 编辑器重复加载上次编辑器中的内容,不会被新的内容替代 编辑器editorOptions上的配置无法生效 vue2中使用monaco-editor 安装 注意两个库的版本指定 npm install monaco-editor@0.30.1 --save-dev npm install monaco-editor-webpack-plugin@6.0.0

  • vue中实现Monaco Editor自定义提示功能

    这次接到一个需求,要在浏览器的 IDE 中支持自定义提示功能,如下所示: 可以看到,它可以根据用户输入的内容来一项一项排除,只显示完全匹配的那一项. 项目的框架是 Vue ,编辑器用的是 Monaco Editor . 什么是 Monaco Editor vscode 是我们经常在用的编辑器,它的前身是微软的一个叫 Monaco Workbench 的项目,而 Monaco Editor 就是从这个项目中成长出来的一个 web 编辑器,他们很大一部分的代码都是共用的,所以 Monaco Edit

  • 详解基于IDEA2020.1的JAVA代码提示插件开发例子

    之前因为项目组有自己的代码规范,为了约束平时的开发规范,于是基于2019.1.3版本开发了一个代码提示的插件.但是在把IDEA切换到2020.1版本的时候,却发现疯狂报错,但是网上关于IDEA插件开发的相关文章还是不够多,只能自己解决.于是根据官方的SDK文档,使用Gradle重新构建了一下项目,把代码拉了过来.下文会根据2020.1版本简单开发一个代码异常的提示插件,把容易踩坑的地方提示一下. 1.首先先根据IDEA插件开发官方文档,用Gradle新建一个project 选中file -> n

  • Android Studio 设置代码提示和代码自动补全快捷键方式

    想必使用过Eclipse的小伙伴们都习惯Eclipse快捷键带来的方便,但是当我们使用Android studio来进行开发的时候也想要这种方便该怎么办呢,当然使用过Android studio的小伙伴可能已经知道了它的方便以及强大之处,接下来我就把我知道的分享给大家,方便和大家一起学习,一起进步. [设置代码提示] 方法步骤如下 1.左上角点击File选项,找到Settings 2.点击Settings后,找到Editor 3.点击Editor后,找到General,点击General,找到C

  • springmvc+mybatis 做分页sql 语句实例代码

    废话不多说了,直接给大家贴代码了,具体代码如下所示: <?xml version="1.0" encoding="UTF-8" ?> <!DOCTYPE mapper PUBLIC "-//mybatis.org//DTD Mapper 3.0//EN" "http://mybatis.org/dtd/mybatis-3-mapper.dtd"> <mapper namespace="s

  • 利用types增强vscode中js代码提示功能详解

    使用 types 增强vscode中javascript代码提示功能 微软的vscode编辑器是开发typescript项目的不二首选,其本身也是采用typescript开发的. 使用过ts的同学都知道 *.d.ts 类型声明文件,其管理工具,从最初的 tsd,到后来的 typings,一直到现在的@types,类型声明文件为ts的智能提示,类型检查提供了有力支持. 我们也可以使用类型声明文件,增强vscode编辑javascript时的智能提示. 关于vscode这方面更深的说明,请访问以下链

  • PL/SQL实现JAVA中的split()方法的例子

    众所周知,java中为String类提供了split()字符串分割的方法,所以很容易将字符串以指定的符号分割为一个字符串数组.但是在pl/sql中并没有提供像java中的split()方法,所以要想在pl/sql中实现字符串的分割还需要自己动手.由于在项目中需要用到此类方法,所以自己研究了一下,方便以后参考.这里以逗号作为分隔符为例,代码如下: declare v_str varchar2(200) := 'abd,324,u78,23f,sd09,2345,dsaf,9079'; type s

  • Spring学习笔记1之IOC详解尽量使用注解以及java代码

    在实战中学习Spring,本系列的最终目的是完成一个实现用户注册登录功能的项目. 预想的基本流程如下: 1.用户网站注册,填写用户名.密码.email.手机号信息,后台存入数据库后返回ok.(学习IOC,mybatis,SpringMVC的基础知识,表单数据验证,文件上传等) 2.服务器异步发送邮件给注册用户.(学习消息队列) 3.用户登录.(学习缓存.Spring Security) 4.其他. 边学习边总结,不定时更新.项目环境为Intellij + Spring4. 一.准备工作. 1.m

  • 在myeclipse中如何加入jquery代码提示功能

    一. 在myeclipse中加入jquery代码提示功能(spket是一个写JS的插件) 1. 打开myeclips-windows-preference找到"spket"单击"javaScript Profiles" 2. 单击"New"输入"jquery",然后单击"Add library"选择"jquery" 3. 单击"Add files",将jquery.j

  • java代码效率优化方法(推荐)

    1. 尽量指定类的final修饰符 带有final修饰符的类是不可派生的. 如果指定一个类为final,则该类所有的方法都是final.Java编译器会寻找机会内联(inline)所有的 final方法(这和具体的编译器实现有关).此举能够使性能平均提高50% . 2. 尽量重用对象. 特别是String 对象的使用中,出现字符串连接情况时应用StringBuffer 代替.由于系统不仅要花时间生成对象,以后可能还需花时间对这些对象进行垃圾回收和处理.因此,生成过多的对象将会给程序的性能带来很大

  • VC6.0代码自动提示 VC6.0在win7环境下代码提示智能化

    作为程序猿的你,是否已经喜欢或习惯依赖IDE开发环境呢.作为Java程序猿,我还是蛮深深的依赖Java IDE开发环境滴,比如Eclipse或MyEclipse. 有了IDE环境,即使你想不起方法全名,只要知道某个前缀,或哪怕在提示列表中,一一查询,也可以找到自己想找的方法或属性.但是,若是IDE不这么智能,那你是否还能胜任吗? 目前小弟就遇到此情况.VC6.0环境,o(︶︿︶)o 唉,还是不能跟Eclispe相媲美的,也许是对VC6.0不熟悉,对Eclispe相对于熟悉,所以VC6.0使用起来

随机推荐

其他