VSCode自定义悬停规则怎么写?规则配置详细步骤

阿婷大大_3828

阿婷大大_3828

2026-11-08

470人浏览

原创

VSCode悬停不生效主因是documentSelector与languageId不匹配;Hover内容需用MarkdownString并转义;provideHover须异步避免阻塞;内容更新依赖文件保存而非实时监听。

vscode自定义悬停规则怎么写?规则配置详细步骤

悬停没内容?先确认 languageId 和 documentSelector 是否匹配

VSCode 的 registerHoverProvider 不会自动生效,必须确保注册时用的 documentSelector 和当前文件的真实 languageId 严格一致。很多人写完插件发现 hover 完全不触发,问题就出在这儿。

常见错误包括:

  • 在 package.json 里声明 "onLanguage:javascript",但实际打开的是 .ts 文件 —— 它的 languageId 是 typescript,不是 javascript
  • documentSelector 写成 ['js'] 或 'js',而 VSCode 只认标准 ID,如 javascript、typescript、python
  • 没在 activationEvents 中声明对应语言,插件根本不会被激活

实操建议:

  • 按 Ctrl+Shift+P → 输入 Developer: Toggle Developer Tools → 在 Console 里执行 vscode.window.activeTextEditor?.document.languageId,看真实值
  • package.json 的 contributes.languages 和 activationEvents 必须包含同一个 ID
  • 注册 provider 时用精确数组: [{ language: 'typescript' }],别用模糊匹配

Hover 返回空或格式错乱?MarkdownString 转义和限制要盯紧

vscode.Hover 只接受 vscode.MarkdownString 或字符串,但它对 Markdown 语法有硬性约束:不支持 HTML、不渲染多行代码块、链接必须是绝对 URL 或 command: 协议。

典型翻车点:

  • 返回的文本含未转义的 _、*、`,导致整个提示空白(解析失败)
  • 用 ```ts 包裹类型定义 —— Hover 中多行代码块几乎必崩,只支持单行 `type Foo`
  • 写 [官网](./docs) 这种相对路径,结果链接失效
  • 试图嵌入本地图片:file:// 或 ./img.png 全部被拦截

正确做法:

  • 构造时传 true 启用自动转义:new vscode.MarkdownString(text, true)
  • 精简内容,优先用关键词高亮 + 行内代码,避免大段描述
  • 需要链接时,用 command:extension.openDoc?${encodeURIComponent(id)} 触发命令

悬停卡顿或超时?provideHover 里不能做同步 I/O

provideHover 是同步函数签名,但 VSCode 明确允许你返回 Thenable。如果在里面调 fs.readFileSync、遍历 AST 树、或发起 HTTP 请求,用户鼠标一悬停,编辑器就卡住甚至无响应。

VSCode
VSCode

避免常见的 VSCode 错误——设置冲突、调试器配置和扩展冲突。

下载

关键限制:

  • Node.js 的同步 I/O(如 readFileSync)必须换成 fs.promises.readFile
  • 高频查询(如根据位置找 AST 节点)必须加缓存,键推荐用 document.uri.toString() + position.line + position.character
  • 外部请求必须设超时兜底,例如 Promise.race([fetch(...), new Promise(r => setTimeout(r, 800))])

不处理的后果:VSCode 会在约 1 秒后直接丢弃响应,hover 显示 “Loading…” 然后消失,且不报错。

规则生效但内容不更新?保存文件才是刷新触发点

VSCode 的 hover 内容**不会监听注释或源码变更实时重载**。你改了 JSDoc、更新了扩展逻辑、甚至重启插件进程,只要没保存当前文件,旧提示就一直挂着。

这容易让人误判“规则没生效”。尤其开发自定义 hover 插件时:

  • 修改 provideHover 返回逻辑后,必须保存插件源码并重新加载插件(Ctrl+Shift+P → Developer: Reload Window)
  • 修改了目标文件里的 JSDoc,必须保存那个文件,LSP 才会重新解析并推送到 hover
  • 如果用了缓存,记得在 onDidChangeTextDocument 事件里清掉对应 key,否则改了注释也看不到新内容

最常被忽略的一点:hover 提示是状态快照,不是活视图。它不订阅变化,只响应每次悬停时的即时计算结果。

相关文章

PHP速学视频免费教程(入门到精通)
PHP速学视频免费教程(入门到精通)

PHP怎么学习?PHP怎么入门?PHP在哪学?PHP怎么学才快?不用担心,这里为大家提供了PHP速学教程(入门到精通),有需要的小伙伴保存下载就能学习啦!

下载

本站声明:本文内容由网友自发贡献,版权归原作者所有,本站不承担相应法律责任。如您发现有涉嫌抄袭侵权的内容,请联系admin@php.cn

相关专题

更多
vscode是什么_vscode怎么安装配置
vscode是什么_vscode怎么安装配置

VS Code(Visual Studio Code)是一款免费、开源的跨平台代码编辑器,由微软开发和维护。它被广泛用于软件开发和编程,支持多种编程语言和框架。VS Code 同时提供了丰富的功能和扩展性,使开发者可以高效地编写、编辑和调试代码。

2023.06.30

1575

18

vscode怎么运行代码
vscode怎么运行代码

vscode是一个运行于MacOS X、Windows和Linux之上的,针对于编写现代Web和云应用的跨平台源代码编辑器;vscode免费而且功能强大,对JavaScript和NodeJS的支持非常好,自带很多功能,例如代码格式化,代码智能提示补全、Emmet插件等。php中文网给大家带来了相关的教程以及文章,欢迎大家前来阅读学习。

2023.07.21

3392

3

vscode使用的框架介绍
vscode使用的框架介绍

VSCode是一款跨平台代码编辑器,它基于Electron框架和Monaco Editor构建。想了解更多vscode的相关内容,可以阅读本专题下面的文章。

2024.03.14

2129

12

vscode一般用来写什么语言
vscode一般用来写什么语言

VSCode是一款功能强大的代码编辑器,支持多种编程语言和文件格式。它内置对 JavaScript、Python、Java、C++、TypeScript、HTML/CSS、Go 等语言的支持。想了解更多vscode的相关内容,可以阅读本专题下面的文章。

2024.03.14

1767

8

vscode可以写什么语言
vscode可以写什么语言

vscode是一款强大的代码编辑器,支持多种编程语言的开发。通过安装扩展,可以为 JavaScript/TypeScript、Python、Java、C#、PHP、Go、Ruby、Rust、HTML/CSS 等语言提供智能代码补全、调试和格式化等功能。想了解更多vscode的相关内容,可以阅读本专题下面的文章。

2024.03.15

2627

12

vscode中文设置方法
vscode中文设置方法

方法一:在设置页面中,搜索“locale”,并选择“zh-cn”。方法二:按“Ctrl Shift P”快捷键,输入“Configure Display Language”,将语言修改为“zh-cn”。如果上述方法无效,可考虑安装中文插件。想了解更多vscode的相关内容,可以阅读本专题下面的文章。

2024.03.15

1858

14

vscode用途介绍
vscode用途介绍

Visual Studio Code(VSCode)是一款由 Microsoft 开发的多功能文本编辑器,适用于各种编程语言。作为一款开源软件,VSCode 拥有代码高亮、自动补全、调试、Git 集成等强大功能,成为程序员不可或缺的工具。想了解更多vscode的相关内容,可以阅读本专题下面的文章。

2024.03.15

1302

10

vscode和visualstudio的区别
vscode和visualstudio的区别

Visual Studio是一款功能强大的集成开发环境(IDE),适用于专业开发人员进行复杂项目的构建。而VSCode则是一款轻量级的代码编辑器,更适合各种规模的项目开发。想了解更多vscode的相关内容,可以阅读本专题下面的文章。

2024.03.15

1156

8

vscode设置中文界面不生效解决方法
vscode设置中文界面不生效解决方法

vscode设置中文界面不生效解决方法:安装中文语言包、通过命令面板设置语言、检查 locale.json 设置、重新安装中文语言包、检查 VSCode 版本和更新、排除插件冲突、检查系统语言设置、查看 VSCode 日志和错误消息、重置 VSCode 设置、查看官方文档和社区支持。想了解更多vscode的相关内容,可以阅读本专题下面的文章。

2024.03.15

554

5

热门下载

更多
网站特效
/
网站源码
/
网站素材
/
前端模板

精品课程

更多
相关推荐
/
热门推荐
/
最新课程