首页
学习
活动
专区
圈层
工具
发布
首页
学习
活动
专区
圈层
工具
MCP广场
社区首页 >问答首页 >github copilot用来突出显示文本的元素的名称是什么?

github copilot用来突出显示文本的元素的名称是什么?
EN

Stack Overflow用户
提问于 2021-07-06 01:46:44
回答 1查看 97关注 0票数 1

我想做一个类似于github copilot所使用的控件。我的意思是突出显示提议的文本。Live share扩展使用了一种非常类似的方法。这个控件的名称是什么?

实时预览扩展中的控件:

copilot扩展中的控制:

我猜可能是TextEditorDecorationType?但是,我不知道如何定义它的样式,以便作者绝对处于这样的位置:

EN

回答 1

Stack Overflow用户

发布于 2021-07-23 00:33:47

您可以使用文本编辑器装饰器创建类似的体验。这些装饰器允许您对文档中的任何文本(包括前景色和背景色)使用自定义样式模式。

您在上面可视化的文本突出显示示例,只是为用户选择或扩展建议的文本范围添加背景颜色。

例如:如果您想为console.log添加自定义突出显示

然后,您可以使用以下命令:

代码语言:javascript
运行
复制
import * as vscode from 'vscode'

const decorationType = vscode.window.createTextEditorDecorationType({
  backgroundColor: 'green',
  border: '2px solid white',
})

export function activate(context: vscode.ExtensionContext) {
  vscode.workspace.onWillSaveTextDocument(event => {
    const openEditor = vscode.window.visibleTextEditors.filter(
      editor => editor.document.uri === event.document.uri
    )[0]
    decorate(openEditor)
  })
}

function decorate(editor: vscode.TextEditor) {
  let sourceCode = editor.document.getText()
  let regex = /(console\.log)/

  let decorationsArray: vscode.DecorationOptions[] = []

  const sourceCodeArr = sourceCode.split('\n')

  for (let line = 0; line < sourceCodeArr.length; line++) {
    let match = sourceCodeArr[line].match(regex)

    if (match !== null && match.index !== undefined) {
      let range = new vscode.Range(
        new vscode.Position(line, match.index),
        new vscode.Position(line, match.index + match[1].length)
      )

      let decoration = { range }

      decorationsArray.push(decoration)
    }
  }

  editor.setDecorations(decorationType, decorationsArray)
}

Reference Link

票数 1
EN
页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持
原文链接:

https://stackoverflow.com/questions/68260233

复制
相关文章

相似问题

领券
问题归档专栏文章快讯文章归档关键词归档开发者手册归档开发者手册 Section 归档