06. 悬停提示—例子

[PDKSophia]

场景

当你鼠标光标hover至某个代码时，你想要显示一些文字内容

代码展示

// demo6 对package.json中的author进行悬停提示
import * as vscode from 'vscode'

module.exports = function (context: vscode.ExtensionContext) {
  let disposable = vscode.languages.registerHoverProvider('json', {
    provideHover(document, position, token) {
      const fileName = document.fileName
      const word = document.getText(document.getWordRangeAtPosition(position))
      if (/\/package\.json$/.test(fileName) && /\bauthor\b/.test(word)) {
        return new vscode.Hover('悬停提示: 彭道宽牛逼!')
      }
      return undefined
    },
  })

  context.subscriptions.push(disposable)
}

// extension.ts
import * as vscode from 'vscode'
export function activate(context: vscode.ExtensionContext) {
  console.log('your extension "sugar-demo-vscode" is now active!')
  require('./beehive-hoverTips')(context) // demo6 悬停提示
}
export function deactivate() {}

效果展示

源码展示

• beehive-hoverTips.ts