Azure DevOps Services
小窍门
有关最新的扩展开发指南，包括主题处理以及从 VSS.SDK 的迁移，请参阅 Azure DevOps 扩展 SDK 开发人员门户。
在本文中，你将创建一个中心，该中心显示在 Sprints 和 查询 中心之后的 Azure Boards 中。
先决条件
- Node.js
- 扩展打包工具：运行
npm install -g tfx-cli
创建扩展结构
为扩展创建目录并初始化它：
mkdir my-hub-extension cd my-hub-extension npm init -y npm install azure-devops-extension-sdk --save目录应如下所示：
|--- my-hub-extension |--- node_modules |--- azure-devops-extension-sdk |--- images |--- icon.png |--- hello-world.html |--- package.json |--- vss-extension.json
创建中心页面
在扩展目录的根目录中创建 hello-world.html 。 此页面加载 SDK，对其进行初始化，并显示当前用户名。
<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title>Hello World</title>
<script src="https://cdnjs.cloudflare.com/ajax/libs/require.js/2.3.6/require.min.js"></script>
<script>
window.requirejs.config({
enforceDefine: true,
paths: {
'SDK': './lib/SDK.min'
}
});
window.requirejs(['SDK'], function (SDK) {
SDK.init();
SDK.ready().then(() => {
document.getElementById("name").innerText = SDK.getUser().displayName;
});
});
</script>
</head>
<body>
<h1>Hello, <span id="name"></span></h1>
</body>
</html>
若要查看可目标的中心组的完整列表，请参阅扩展点参考。
创建扩展清单
在扩展目录的根目录中创建 vss-extension.json ：
{
"manifestVersion": 1,
"id": "sample-extension",
"version": "0.1.0",
"name": "My first sample extension",
"description": "A sample Azure DevOps extension.",
"publisher": "fabrikamdev",
"public": false,
"categories": ["Azure Boards"],
"targets": [
{
"id": "Microsoft.VisualStudio.Services"
}
],
"icons": {
"default": "images/icon.png"
},
"contributions": [
{
"id": "hello-world-hub",
"type": "ms.vss-web.hub",
"description": "Adds a 'Hello' hub to the Work hub group.",
"targets": [
"ms.vss-work-web.work-hub-group"
],
"properties": {
"name": "Hello",
"order": 99,
"uri": "hello-world.html"
}
}
],
"scopes": [
"vso.work"
],
"files": [
{
"path": "hello-world.html", "addressable": true
},
{
"path": "node_modules/azure-devops-extension-sdk",
"addressable": true,
"packagePath": "lib"
},
{
"path": "images/icon.png", "addressable": true
}
]
}
重要
请将发布者更改为你的发布者名称。 若要创建发布者，请参阅 “包”、“发布”和“安装”。 在开发过程中将 public 设置为 false。
关键配置文件属性
| 资产 | DESCRIPTION |
|---|---|
| 贡献 | 声明集线器。
type 是 ms.vss-web.hub，并且targets 指定要将它添加到哪一个中心组。 请参阅 扩展点，以了解所有可以目标的集线器组。 |
| contributions.properties.name | 中心的显示名称。 |
| contributions.properties.order | 中心组内集线器的位置。 |
| contributions.properties.uri | 要显示为中心的页面的路径（相对于扩展基 URI）。 |
| 范围 | 扩展所需的权限。
vso.work 授予对工作项的读取访问权限。 请参阅 作用域。 |
| 文件 | 要包含在包中的文件。 为需要 URL 的文件设置 addressable: true 。 |
有关清单的详细信息，请参阅 扩展清单参考。
添加自定义中心组
与其将集线器添加到内置集线器组（如“工作”或“代码”）中，不如创建自己的集线器组并向其中添加集线器。 添加一个 ms.vss-web.hub-group 贡献和一个针对它的 ms.vss-web.hub 贡献：
"contributions": [
{
"id": "sample-hub-group",
"type": "ms.vss-web.hub-group",
"description": "Adds a 'Samples' hub group at the project level.",
"targets": [
"ms.vss-web.project-hub-groups-collection"
],
"properties": {
"name": "Samples",
"order": 100
}
},
{
"id": "hello-hub",
"type": "ms.vss-web.hub",
"description": "Adds a 'Hello' hub to the Samples hub group.",
"targets": [
".sample-hub-group"
],
"properties": {
"name": "Hello",
"order": 99,
"uri": "hello-world.html"
}
}
]
将中心添加到内置组时的主要区别是：
- 项目级别的中心组贡献目标
ms.vss-web.project-hub-groups-collection或组织级别的中心组贡献目标ms.vss-web.collection-hub-groups-collection。 - 集线器的
targets数组使用相对引用 （.sample-hub-group）来指向在同一扩展中定义的集线器群组。 -
order中枢组的属性控制组在导航中的出现位置。