You signed in with another tab or window. Reload to refresh your session.You signed out in another tab or window. Reload to refresh your session.You switched accounts on another tab or window. Reload to refresh your session.Dismiss alert
Copy file name to clipboardExpand all lines: articles/api-center/build-register-apis-vscode-extension.md
+25-18Lines changed: 25 additions & 18 deletions
Display the source diff
Display the rich diff
Original file line number
Diff line number
Diff line change
@@ -1,24 +1,24 @@
1
1
---
2
-
title: Interact with API inventory using VS Code extension
3
-
description: Build, discover, try, and consume APIs from your Azure API center using the Azure API Center extension for Visual Studio Code.
2
+
title: Build and register APIs - Azure API Center - VS Code extension
3
+
description: API developers can use the Azure API Center extension for Visual Studio Code to build and register APIs in their organization's API center.
4
4
author: dlepow
5
5
ms.service: azure-api-center
6
6
ms.topic: how-to
7
-
ms.date: 08/01/2024
7
+
ms.date: 09/23/2024
8
8
ms.author: danlep
9
9
ms.custom:
10
-
# Customer intent: As a developer, I want to use my Visual Studio Code environment to build, discover, try, and consume APIs in my organization's API center.
10
+
# Customer intent: As an API developer, I want to use my Visual Studio Code environment to build, discover, explore, and consume APIs in my organization's API center.
11
11
---
12
12
13
-
# Get started with the Azure API Center extension for Visual Studio Code
13
+
# Build and register APIs with the Azure API Center extension for Visual Studio Code
14
14
15
-
To build, discover, try, and consume APIs in your [API center](overview.md), you can use the Azure API Center extension in your Visual Studio Code development environment:
15
+
To build, discover, explore, and consume APIs in your [API center](overview.md), you can use the Azure API Center extension in your Visual Studio Code development environment. The extension provides the following features for API developers:
16
16
17
-
***Build APIs** - Make APIs you're building discoverable to others by registering them in your API center. Shift-left API design conformance checks into Visual Studio Code with integrated linting support. Ensure that new API versions don't break API consumers with breaking change detection.
17
+
***Build APIs** - Make APIs you're building discoverable to others by registering them in your API center directly or using CI/CD pipelines in GitHub or Azure DevOps. Shift-left API design conformance checks into Visual Studio Code with integrated linting support. Ensure that new API versions don't break API consumers with breaking change detection.
18
18
19
19
***Discover APIs** - Browse the APIs in your API center, and view their details and documentation.
20
20
21
-
***Try APIs** - Use Swagger UI or REST client to explore API requests and responses.
21
+
***Explore APIs** - Use Swagger UI or REST client to explore API requests and responses.
22
22
23
23
***Consume APIs** - Generate API SDK clients for your favorite language including JavaScript, TypeScript, .NET, Python, and Java, using the Microsoft Kiota engine that generates SDKs for Microsoft Graph, GitHub, and more.
24
24
@@ -28,14 +28,14 @@ To build, discover, try, and consume APIs in your [API center](overview.md), you
28
28
29
29
* One or more API centers in your Azure subscription. If you haven't created one already, see [Quickstart: Create your API center](set-up-api-center.md).
30
30
31
-
Currently, you need to be assigned the Contributor role or higher permissions to access API centers with the extension.
31
+
Currently, you need to be assigned the Contributor role or higher permissions to manage API centers with the extension.
32
32
33
33
*[Visual Studio Code](https://code.visualstudio.com/)
34
34
35
35
*[Azure API Center extension for Visual Studio Code](https://marketplace.visualstudio.com/items?itemName=apidev.azure-api-center)
36
36
37
37
> [!NOTE]
38
-
> Where noted, certain features are available only in the extension's pre-release version. When installing the extension from the [Visual Studio Code Marketplace](https://marketplace.visualstudio.com/items?itemName=apidev.azure-api-center&ssr=false#overview), you can choose to install the release version or a pre-release version. Switch between the two versions at any time by using the extension's **Manage** button context menu in the Extensions view.
38
+
> Where noted, certain features are available only in the extension's pre-release version. [!INCLUDE [vscode-extension-prerelease-features](includes/vscode-extension-prerelease-features.md)]
39
39
40
40
The following Visual Studio Code extensions are optional and needed only for certain scenarios as indicated:
41
41
@@ -64,6 +64,9 @@ Register an API in your API center directly from Visual Studio Code, either by r
64
64
* For **Step-by-step**, select the API center to register APIs with, and answer prompts with information including API title, type, lifecycle stage, version, and specification to complete API registration.
65
65
* For **CI/CD**, select either **GitHub** or **Azure DevOps**, depending on your preferred source control mechanism. A Visual Studio Code workspace must be open for the Azure API Center extension to add a pipeline to your workspace. After the file is added, complete steps documented in the CI/CD pipeline file itself to configure Azure Pipeline/GitHub Action environment variables and identity. On push to source control, the API will be registered in your API center.
66
66
67
+
Learn more about setting up a [GitHub Actions workflow](register-apis-github-actions.md) to register APIs with your API center.
68
+
69
+
67
70
## API design conformance
68
71
69
72
To ensure design conformance with organizational standards as you build APIs, the Azure API Center extension for Visual Studio Code provides integrated support for API specification linting with Spectral.
@@ -73,7 +76,7 @@ To ensure design conformance with organizational standards as you build APIs, th
73
76
74
77
Once an active API style guide is set, opening any OpenAPI or AsyncAPI-based specification file will trigger a local linting operation in Visual Studio Code. Results are displayed both inline in the editor, as well as in the Problems window (**View** > **Problems** or **Ctrl+Shift+M**).
75
78
76
-
:::image type="content" source="media/use-vscode-extension/local-linting.png" alt-text="Screenshot of local-linting in Visual Studio Code." lightbox="media/use-vscode-extension/local-linting.png":::
79
+
:::image type="content" source="media/build-register-apis-vscode-extension/local-linting.png" alt-text="Screenshot of local-linting in Visual Studio Code." lightbox="media/build-register-apis-vscode-extension/local-linting.png":::
77
80
78
81
## Breaking change detection
79
82
@@ -85,7 +88,7 @@ When introducing new versions of your API, it's important to ensure that changes
85
88
86
89
Visual Studio Code will open a diff view between the two API specifications. Any breaking changes are displayed both inline in the editor, as well as in the Problems window (**View** > **Problems** or **Ctrl+Shift+M**).
87
90
88
-
:::image type="content" source="media/use-vscode-extension/breaking-changes.png" alt-text="Screenshot of breaking changes detected in Visual Studio Code." lightbox="media/use-vscode-extension/breaking-changes.png":::
91
+
:::image type="content" source="media/build-register-apis-vscode-extension/breaking-changes.png" alt-text="Screenshot of breaking changes detected in Visual Studio Code." lightbox="media/build-register-apis-vscode-extension/breaking-changes.png":::
89
92
90
93
## Generate OpenAPI specification file from API code
91
94
@@ -94,26 +97,29 @@ Use the power of GitHub Copilot with the Azure API Center extension for Visual S
94
97
> [!NOTE]
95
98
> This feature is available in the pre-release version of the API Center extension.
96
99
97
-
:::image type="content" source="media/use-vscode-extension/generate-api-documentation.gif" alt-text="Animation showing how to use GitHub Copilot to generate an OpenAPI spec from code." lightbox="media/use-vscode-extension/generate-api-documentation.gif":::
100
+
:::image type="content" source="media/build-register-apis-vscode-extension/generate-api-documentation.gif" alt-text="Animation showing how to use GitHub Copilot to generate an OpenAPI spec from code." lightbox="media/build-register-apis-vscode-extension/generate-api-documentation.gif":::
98
101
99
102
After generating the OpenAPI specification file and checking for accuracy, you can register the API with your API center using the **Azure API Center: Register API** command.
100
103
101
104
## Discover APIs
102
105
103
106
Your API center resources appear in the tree view on the left-hand side. Expand an API center resource to see APIs, versions, definitions, environments, and deployments.
104
107
105
-
:::image type="content" source="media/use-vscode-extension/explore-api-centers.png" alt-text="Screenshot of API Center tree view in Visual Studio Code." lightbox="media/use-vscode-extension/explore-api-centers.png":::
108
+
:::image type="content" source="media/build-register-apis-vscode-extension/explore-api-centers.png" alt-text="Screenshot of API Center tree view in Visual Studio Code." lightbox="media/build-register-apis-vscode-extension/explore-api-centers.png":::
106
109
107
110
Search for APIs within an API Center by using the search icon shown in the **Apis** tree view item.
108
111
112
+
> [!TIP]
113
+
> Optionally enable a [platform API catalog](enable-platform-api-catalog-vscode-extension.md) for your API center in Visual Studio Code so that app developers in your organization can discover APIs in a centralized location. The platform API catalog is a read-only view of the API inventory.
114
+
109
115
## View API documentation
110
116
111
117
You can view the documentation for an API definition in your API center and try API operations. This feature is only available for OpenAPI-based APIs in your API center.
112
118
113
119
1. Expand the API Center tree view to show an API definition.
114
120
1. Right-click on the definition, and select **Open API Documentation**. A new tab appears with the Swagger UI for the API definition.
115
121
116
-
:::image type="content" source="media/use-vscode-extension/view-api-documentation.png" alt-text="Screenshot of API documentation in Visual Studio Code." lightbox="media/use-vscode-extension/view-api-documentation.png":::
122
+
:::image type="content" source="media/build-register-apis-vscode-extension/view-api-documentation.png" alt-text="Screenshot of API documentation in Visual Studio Code." lightbox="media/build-register-apis-vscode-extension/view-api-documentation.png":::
117
123
118
124
1. To try the API, select an endpoint, select **Try it out**, enter required parameters, and select **Execute**.
119
125
@@ -130,7 +136,7 @@ You can view a `.http` file based on the API definition in your API center. If t
130
136
1. Expand the API Center tree view to show an API definition.
131
137
1. Right-click on the definition, and select **Generate HTTP File**. A new tab appears that renders a .http document populated by the API specification.
132
138
133
-
:::image type="content" source="media/use-vscode-extension/generate-http-file.png" alt-text="Screenshot of generating a .http file in Visual Studio Code." lightbox="media/use-vscode-extension/generate-http-file.png":::
139
+
:::image type="content" source="media/build-register-apis-vscode-extension/generate-http-file.png" alt-text="Screenshot of generating a .http file in Visual Studio Code." lightbox="media/build-register-apis-vscode-extension/generate-http-file.png":::
134
140
135
141
1. To make a request, select an endpoint, and select **Send Request**.
136
142
@@ -148,7 +154,7 @@ Use the Microsoft Kiota extension to generate an API client for your favorite la
148
154
1. Enter configuration details about the SDK name, namespace, and output directory.
149
155
1. Select the language for the generated SDK.
150
156
151
-
:::image type="content" source="media/use-vscode-extension/generate-api-client.png" alt-text="Screenshot of Kiota OpenAPI Explorer in Visual Studio Code." lightbox="media/use-vscode-extension/generate-api-client.png":::
157
+
:::image type="content" source="media/build-register-apis-vscode-extension/generate-api-client.png" alt-text="Screenshot of Kiota OpenAPI Explorer in Visual Studio Code." lightbox="media/build-register-apis-vscode-extension/generate-api-client.png":::
152
158
153
159
The client is generated.
154
160
@@ -163,7 +169,7 @@ To export a specification in the extension's tree view:
163
169
1. Expand the API Center tree view to show an API definition.
164
170
1. Right-click on the definition, and select **Export API Specification Document**. A new tab appears that renders an API specification document.
165
171
166
-
:::image type="content" source="media/use-vscode-extension/export-specification.png" alt-text="Screenshot of exporting API specification in Visual Studio Code." lightbox="media/use-vscode-extension/export-specification.png":::
172
+
:::image type="content" source="media/build-register-apis-vscode-extension/export-specification.png" alt-text="Screenshot of exporting API specification in Visual Studio Code." lightbox="media/build-register-apis-vscode-extension/export-specification.png":::
167
173
168
174
You can also export a specification using the Command Palette:
169
175
@@ -174,4 +180,5 @@ You can also export a specification using the Command Palette:
174
180
## Related content
175
181
176
182
*[Azure API Center - key concepts](key-concepts.md)
183
+
*[Enable and view platform API catalog in Visual Studio Code](enable-platform-api-catalog-vscode-extension.md)
0 commit comments