如何找到Azure DevOps拉取请求列表页的正确扩展贡献点？

一、用浏览器开发者工具直接抓取当前页面的贡献点 #

这是最直接的实操方式，不用依赖模糊的文档：

• 打开拉取请求列表页，按F12唤起开发者工具，切换到Console标签页
• 执行以下命令：

  VSS.getService(VSS.ServiceIds.ExtensionData).then(() => console.log(VSS.getContributions()))
  

• 在输出的贡献点列表里，筛选包含pull-requests、list、view这类关键词的ID，比如ms.vss-code-web.pr-list-view就是PR列表页的核心视图贡献点，大部分页面修改类的扩展都会基于它来做嵌套贡献。

二、参考官方开源扩展的配置 #

微软开源了不少Azure DevOps官方扩展，直接看它们的vss-extension.json配置文件就能找到常用的贡献点：

• 比如要给PR列表工具栏加内容，会用到ms.vss-code-web.pr-list-toolbar；要嵌入内容到列表区域，会用到ms.vss-code-web.pr-list-content；如果要修改列表项的渲染逻辑，可能会用到ms.vss-code-web.pr-list-item-renderer这类贡献点。

三、利用扩展SDK的调试能力 #

在你的扩展开发过程中，启动本地调试流程：

• 用tfx extension serve命令启动本地服务，然后在Azure DevOps里加载你的开发版扩展
• 在开发者工具的Sources标签里找到你的扩展代码，在初始化逻辑里打断点，调用VSS.getContributions()输出当前页面的所有贡献点，同时可以参考SDK的类型定义文件vss-web-extension-sdk.d.ts里的贡献点相关类型，辅助判断哪些是可用的。

类似实现参考 #

社区里有很多同类扩展的实践：

• 不少自定义PR筛选、显示额外字段的扩展，都是以ms.vss-code-web.pr-list-view作为父贡献点，通过ms.vss-web.control类型的贡献来嵌入自定义React或Vue组件，从而修改页面内容
• 还有一些扩展会通过ms.vss-code-web.pr-list-context-menu来扩展列表项的右键菜单，但如果是要修改页面主体区域，重点关注列表视图相关的核心贡献点即可。

内容的提问来源于stack exchange，提问作者Steven Yates