尧图网站建设 
文档教程【免费下载链接】vscode-docsPublic documentation for Visual Studio Code项目地址https://gitcode.com/gh_mirrors/vs/vscode-docs点击查看免费下载本指南基于 Visual Studio Code 官方文档仓库vscode-docs中的 UX 规范Notifications 编写面向所有使用 VS Code 扩展 API 与用户交互的开发者。阅读本文后你将掌握扩展中信息Information、警告Warning、错误Error三类通知的使用场景与对应 API、如何借助通知决策树克制地使用通知以尊重用户注意力、进度通知与模态对话框的正确用法以及哪些做法应当坚决避免。通知是什么通知Notification是 VS Code 从窗口右下角浮出显示的简短信息条用于在用户执行某项操作时向其反馈结果。它是扩展与用户之间最直接但也最容易打扰用户的交互通道之一。在 VS Code 扩展 API 中通知通过vscode.window命名空间下的三个方法发送分别对应三种严重级别通知类型对应 API典型场景信息Informationwindow.showInformationMessage纯告知性消息如扩展已更新到 v3.2.0警告Warningwindow.showWarningMessage功能存在问题、需要用户注意并可能介入的场景错误Errorwindow.showErrorMessage操作失败需要用户了解并采取行动三个方法均可在传入的字符串消息之外追加可选的动作Action按钮供用户点击后执行相应回调。在 通用扩展能力文档 中VS Code 明确将这三类 API 作为几乎每个扩展都需要向用户呈现信息的标准途径列出window.showInformationMessage(message, ...items); window.showWarningMessage(message, ...items); window.showErrorMessage(message, ...items);通知决策树什么时候才应该弹通知发送通知前请先自问这条信息真的需要打断用户吗为了帮助扩展作者做出判断官方提供了一棵通知决策树其判断路径如下如果立即需要用户进行多步骤输入→ 使用多步骤 Quick Pick如果立即需要用户输入但不是多步骤→ 使用模态对话框Modal Dialog如果需要展示的进度优先级较低→ 将进度放到状态栏Status Bar如果交互由用户主动触发→ 找准时机、在用户触发动作后才显示通知如果需要展示多条通知→ 尽量把它们合并为一条如果用户并不真正需要被通知→ 选择什么都不显示保持克制。核心原则只有一条通知是最后手段优先把信息放进上下文视图、编辑器、状态栏中只有真正需要用户注意力时才使用通知。三种通知的实际示例信息通知信息通知出现在用户运行Update version更新版本命令之后此时扩展已完成版本升级通知不附带任何额外动作按钮纯粹是告知性的。警告通知警告通知用于某个功能存在问题、需要用户输入或操作来解决的场景因此通常附带可执行的动作按钮引导用户解决该问题。错误通知错误通知展示一次失败的运行结果同样携带解决该问题的动作例如重试或查看日志。在真实扩展代码中这三个方法的使用非常普遍。例如 远程扩展开发文档 中扩展在远程登录成功后调用vscode.window.showInformationMessage(Sign in successful!)Hello World 示例 则在命令触发后弹出vscode.window.showInformationMessage(Hello World!)。通知使用规范Do 与 Dont应当这样做✔️ Do尊重用户注意力只在绝对必要时发送通知为每条通知提供 Do not show again不再显示选项让用户可以主动关闭后续同类通知一次只显示一条通知避免多条通知同时弹出造成的噪音。不应这样做❌ Dont反复发送重复通知同一个问题不要每次操作都弹窗用于促销推广通知不是宣传位首次安装后就索取反馈此时用户尚未建立使用习惯应避免打扰没有动作却显示动作按钮通知上展示的每个按钮都必须有实际意义。进度通知Progress Notification当需要展示时间不确定的进度例如正在搭建开发环境、建立远程连接时可以使用进度通知。需要强调的是全局进度通知应当作为最后手段使用——进度信息最好保持在上下文内如某个视图或编辑器中而非占用通知区域。使用进度通知时应当这样做✔️ Do提供查看详情链接例如跳转到输出日志随进度更新展示阶段信息如 initializing、building 等提供取消操作的动作如果该操作可取消为超时场景设置计时器避免进度卡死却无人知晓。不应这样做❌ Dont让通知一直停留在进行中状态进度必须能够结束、成功或失败。上面的示例展示了扩展在建立远程连接时使用进度通知通知区域展示当前正在进行的设置步骤同时提供details详情链接指向输出日志方便用户随时查看底层进展。在扩展 API 层面进度通知可通过vscode.Progress与ProgressLocation.Notification配合实现这与 common-capabilities 文档 中提到的进度可显示在通知区域、源代码管理视图或 VS Code 窗口通用位置相对应。若进度优先级较低应优先考虑状态栏进度Status Bar而非通知。模态对话框Modal Dialog当需要立即获得用户的输入/确认来继续某个动作时可以使用模态对话框。官方警告模态对话框会阻塞对话框之外的所有用户交互直到其被关闭因此必须谨慎使用。示例中的对话框出现在用户移动一个 JavaScript/TypeScript 文件之后VS Code 询问是否同步更新其他文件中的 import 语句——这是典型的需要立即确认才能继续的场景。应当这样做✔️ Do仅在确实需要立即用户交互时使用模态对话框在合适场景提供免重复确认的动作如Always/Never按钮考虑用复选框记住用户的选择例如记住我的选择下次不再询问。不应这样做❌ Dont用模态对话框确认多个步骤多步骤输入应使用多步 Quick Pick用模态对话框展示不需要用户动作的消息纯告知信息应使用普通通知或状态栏对并非用户显式发起的行为弹模态对话框避免在用户毫无预期时阻塞界面。进阶实践如何减少不必要且重复的通知结合仓库内 通用扩展能力文档 中的状态持久化方案可以进一步落实克制通知的原则扩展可以在context.globalState中记录当前版本号只有当用户安装的扩展版本发生变化时才展示更新通知避免每次启动都打扰用户const versionKey lastShownVersion; const currentVersion context.extension.packageJSON.version; const lastVersionShown context.globalState.get(versionKey); if (isHigher(currentVersion, lastVersionShown)) { context.globalState.update(versionKey, currentVersion); // 在这里弹出更新通知 }跨机器共享状态如记录已关闭/已查看标志可以进一步避免用户在多台设备上重复看到同一通知。此外如果只是需要记录运行日志应优先使用window.createOutputChannel输出到 Output 面板而不是用通知刷屏——这也与进度通知中提供日志详情链接的做法一脉相承。小结与延伸阅读通知从右下角浮出只有信息、警告、错误三种类型对应showInformationMessage/showWarningMessage/showErrorMessage三个 API先走决策树能放进上下文就放进上下文进度尽量用状态栏通知是最后手段规范红线一次一条、必须可不再显示、不促销、不重复、不为没有的动作留按钮进度通知是展示不确定时长操作的兜底方案必须可取消、可查详情、有超时保护模态对话框只服务于立即需要用户交互的场景且要提供免重复确认的途径。如果你想进一步了解通知 API 在完整扩展中的用法可继续阅读仓库中的相关文档通用扩展能力Display Notifications扩展解剖Extension AnatomyHello World 通知示例远程扩展开发中的通知使用示例VS Code API 参考模板window 命名空间赞分享文档教程【免费下载链接】vscode-docsPublic documentation for Visual Studio Code项目地址https://gitcode.com/gh_mirrors/vs/vscode-docs点击查看免费下载相关推荐掌握Visual Studio Code通知系统从消息提示到进度管理的完整指南掌握Visual Studio Code通知系统从消息提示到进度管理的完整指南 Visual Studio CodeVS Code作为一款广受欢迎的代码编开发工具代码编辑器OHIF UI Services 架构实践让扩展在 React 之外驱动模态框、通知与对话框OHIF UI Services 架构实践让扩展在 React 之外驱动模态框、通知与对话框 OHIF 的 UI 服务UI Services是平台将“界面医疗健康前端音视频开源ETL工具贡献指南如何为awesome-etl项目提交PR开源ETL工具贡献指南如何为awesome etl项目提交PR awesome etl是一个精心策划的ETL框架、库和软件列表旨在帮助开发者发现和使用高质量上一篇突破语音合成质量瓶颈F5-TTS全流程应用与训练指南下一篇告别照片管理混乱darktable光桌视图批量处理全攻略创作声明：本文部分内容由AI辅助生成（AIGC），仅供参考 VS Code 扩展通知 UX 指南：三种通知类型、进度通知与模态对话框的最佳实践
文档教程【免费下载链接】vscode-docsPublic documentation for Visual Studio Code项目地址https://gitcode.com/gh_mirrors/vs/vscode-docs点击查看免费下载本指南基于 Visual Studio Code 官方文档仓库vscode-docs中的 UX 规范Notifications 编写面向所有使用 VS Code 扩展 API 与用户交互的开发者。阅读本文后你将掌握扩展中信息Information、警告Warning、错误Error三类通知的使用场景与对应 API、如何借助通知决策树克制地使用通知以尊重用户注意力、进度通知与模态对话框的正确用法以及哪些做法应当坚决避免。通知是什么通知Notification是 VS Code 从窗口右下角浮出显示的简短信息条用于在用户执行某项操作时向其反馈结果。它是扩展与用户之间最直接但也最容易打扰用户的交互通道之一。在 VS Code 扩展 API 中通知通过vscode.window命名空间下的三个方法发送分别对应三种严重级别通知类型对应 API典型场景信息Informationwindow.showInformationMessage纯告知性消息如扩展已更新到 v3.2.0警告Warningwindow.showWarningMessage功能存在问题、需要用户注意并可能介入的场景错误Errorwindow.showErrorMessage操作失败需要用户了解并采取行动三个方法均可在传入的字符串消息之外追加可选的动作Action按钮供用户点击后执行相应回调。在 通用扩展能力文档 中VS Code 明确将这三类 API 作为几乎每个扩展都需要向用户呈现信息的标准途径列出window.showInformationMessage(message, ...items); window.showWarningMessage(message, ...items); window.showErrorMessage(message, ...items);通知决策树什么时候才应该弹通知发送通知前请先自问这条信息真的需要打断用户吗为了帮助扩展作者做出判断官方提供了一棵通知决策树其判断路径如下如果立即需要用户进行多步骤输入→ 使用多步骤 Quick Pick如果立即需要用户输入但不是多步骤→ 使用模态对话框Modal Dialog如果需要展示的进度优先级较低→ 将进度放到状态栏Status Bar如果交互由用户主动触发→ 找准时机、在用户触发动作后才显示通知如果需要展示多条通知→ 尽量把它们合并为一条如果用户并不真正需要被通知→ 选择什么都不显示保持克制。核心原则只有一条通知是最后手段优先把信息放进上下文视图、编辑器、状态栏中只有真正需要用户注意力时才使用通知。三种通知的实际示例信息通知信息通知出现在用户运行Update version更新版本命令之后此时扩展已完成版本升级通知不附带任何额外动作按钮纯粹是告知性的。警告通知警告通知用于某个功能存在问题、需要用户输入或操作来解决的场景因此通常附带可执行的动作按钮引导用户解决该问题。错误通知错误通知展示一次失败的运行结果同样携带解决该问题的动作例如重试或查看日志。在真实扩展代码中这三个方法的使用非常普遍。例如 远程扩展开发文档 中扩展在远程登录成功后调用vscode.window.showInformationMessage(Sign in successful!)Hello World 示例 则在命令触发后弹出vscode.window.showInformationMessage(Hello World!)。通知使用规范Do 与 Dont应当这样做✔️ Do尊重用户注意力只在绝对必要时发送通知为每条通知提供 Do not show again不再显示选项让用户可以主动关闭后续同类通知一次只显示一条通知避免多条通知同时弹出造成的噪音。不应这样做❌ Dont反复发送重复通知同一个问题不要每次操作都弹窗用于促销推广通知不是宣传位首次安装后就索取反馈此时用户尚未建立使用习惯应避免打扰没有动作却显示动作按钮通知上展示的每个按钮都必须有实际意义。进度通知Progress Notification当需要展示时间不确定的进度例如正在搭建开发环境、建立远程连接时可以使用进度通知。需要强调的是全局进度通知应当作为最后手段使用——进度信息最好保持在上下文内如某个视图或编辑器中而非占用通知区域。使用进度通知时应当这样做✔️ Do提供查看详情链接例如跳转到输出日志随进度更新展示阶段信息如 initializing、building 等提供取消操作的动作如果该操作可取消为超时场景设置计时器避免进度卡死却无人知晓。不应这样做❌ Dont让通知一直停留在进行中状态进度必须能够结束、成功或失败。上面的示例展示了扩展在建立远程连接时使用进度通知通知区域展示当前正在进行的设置步骤同时提供details详情链接指向输出日志方便用户随时查看底层进展。在扩展 API 层面进度通知可通过vscode.Progress与ProgressLocation.Notification配合实现这与 common-capabilities 文档 中提到的进度可显示在通知区域、源代码管理视图或 VS Code 窗口通用位置相对应。若进度优先级较低应优先考虑状态栏进度Status Bar而非通知。模态对话框Modal Dialog当需要立即获得用户的输入/确认来继续某个动作时可以使用模态对话框。官方警告模态对话框会阻塞对话框之外的所有用户交互直到其被关闭因此必须谨慎使用。示例中的对话框出现在用户移动一个 JavaScript/TypeScript 文件之后VS Code 询问是否同步更新其他文件中的 import 语句——这是典型的需要立即确认才能继续的场景。应当这样做✔️ Do仅在确实需要立即用户交互时使用模态对话框在合适场景提供免重复确认的动作如Always/Never按钮考虑用复选框记住用户的选择例如记住我的选择下次不再询问。不应这样做❌ Dont用模态对话框确认多个步骤多步骤输入应使用多步 Quick Pick用模态对话框展示不需要用户动作的消息纯告知信息应使用普通通知或状态栏对并非用户显式发起的行为弹模态对话框避免在用户毫无预期时阻塞界面。进阶实践如何减少不必要且重复的通知结合仓库内 通用扩展能力文档 中的状态持久化方案可以进一步落实克制通知的原则扩展可以在context.globalState中记录当前版本号只有当用户安装的扩展版本发生变化时才展示更新通知避免每次启动都打扰用户const versionKey lastShownVersion; const currentVersion context.extension.packageJSON.version; const lastVersionShown context.globalState.get(versionKey); if (isHigher(currentVersion, lastVersionShown)) { context.globalState.update(versionKey, currentVersion); // 在这里弹出更新通知 }跨机器共享状态如记录已关闭/已查看标志可以进一步避免用户在多台设备上重复看到同一通知。此外如果只是需要记录运行日志应优先使用window.createOutputChannel输出到 Output 面板而不是用通知刷屏——这也与进度通知中提供日志详情链接的做法一脉相承。小结与延伸阅读通知从右下角浮出只有信息、警告、错误三种类型对应showInformationMessage/showWarningMessage/showErrorMessage三个 API先走决策树能放进上下文就放进上下文进度尽量用状态栏通知是最后手段规范红线一次一条、必须可不再显示、不促销、不重复、不为没有的动作留按钮进度通知是展示不确定时长操作的兜底方案必须可取消、可查详情、有超时保护模态对话框只服务于立即需要用户交互的场景且要提供免重复确认的途径。如果你想进一步了解通知 API 在完整扩展中的用法可继续阅读仓库中的相关文档通用扩展能力Display Notifications扩展解剖Extension AnatomyHello World 通知示例远程扩展开发中的通知使用示例VS Code API 参考模板window 命名空间赞分享文档教程【免费下载链接】vscode-docsPublic documentation for Visual Studio Code项目地址https://gitcode.com/gh_mirrors/vs/vscode-docs点击查看免费下载相关推荐掌握Visual Studio Code通知系统从消息提示到进度管理的完整指南掌握Visual Studio Code通知系统从消息提示到进度管理的完整指南 Visual Studio CodeVS Code作为一款广受欢迎的代码编开发工具代码编辑器OHIF UI Services 架构实践让扩展在 React 之外驱动模态框、通知与对话框OHIF UI Services 架构实践让扩展在 React 之外驱动模态框、通知与对话框 OHIF 的 UI 服务UI Services是平台将“界面医疗健康前端音视频开源ETL工具贡献指南如何为awesome-etl项目提交PR开源ETL工具贡献指南如何为awesome etl项目提交PR awesome etl是一个精心策划的ETL框架、库和软件列表旨在帮助开发者发现和使用高质量上一篇突破语音合成质量瓶颈F5-TTS全流程应用与训练指南下一篇告别照片管理混乱darktable光桌视图批量处理全攻略创作声明：本文部分内容由AI辅助生成（AIGC），仅供参考