Skip to content

Commit dcb9ff7

Browse files
author
gitName
committed
cross-links
1 parent 9d24fe1 commit dcb9ff7

File tree

10 files changed

+13
-9
lines changed

10 files changed

+13
-9
lines changed

articles/api-center/build-register-apis-vscode-extension.md

Lines changed: 13 additions & 9 deletions
Original file line numberDiff line numberDiff line change
@@ -10,7 +10,7 @@ ms.custom:
1010
# 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.
1111
---
1212

13-
# Build and register APIs in your API center 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
1414

1515
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:
1616

@@ -64,6 +64,7 @@ Register an API in your API center directly from Visual Studio Code, either by r
6464
* 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.
6565
* 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.
6666

67+
Learn more about setting up a [GitHub Actions workflow](register-apis-github-actions.md) to register APIs with your API center.
6768

6869

6970
## API design conformance
@@ -75,7 +76,7 @@ To ensure design conformance with organizational standards as you build APIs, th
7576

7677
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**).
7778

78-
:::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":::
7980

8081
## Breaking change detection
8182

@@ -87,7 +88,7 @@ When introducing new versions of your API, it's important to ensure that changes
8788

8889
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**).
8990

90-
:::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":::
9192

9293
## Generate OpenAPI specification file from API code
9394

@@ -96,26 +97,29 @@ Use the power of GitHub Copilot with the Azure API Center extension for Visual S
9697
> [!NOTE]
9798
> This feature is available in the pre-release version of the API Center extension.
9899
99-
:::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":::
100101

101102
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.
102103

103104
## Discover APIs
104105

105106
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.
106107

107-
:::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":::
108109

109110
Search for APIs within an API Center by using the search icon shown in the **Apis** tree view item.
110111

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+
111115
## View API documentation
112116

113117
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.
114118

115119
1. Expand the API Center tree view to show an API definition.
116120
1. Right-click on the definition, and select **Open API Documentation**. A new tab appears with the Swagger UI for the API definition.
117121

118-
:::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":::
119123

120124
1. To try the API, select an endpoint, select **Try it out**, enter required parameters, and select **Execute**.
121125

@@ -132,7 +136,7 @@ You can view a `.http` file based on the API definition in your API center. If t
132136
1. Expand the API Center tree view to show an API definition.
133137
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.
134138

135-
:::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":::
136140

137141
1. To make a request, select an endpoint, and select **Send Request**.
138142

@@ -150,7 +154,7 @@ Use the Microsoft Kiota extension to generate an API client for your favorite la
150154
1. Enter configuration details about the SDK name, namespace, and output directory.
151155
1. Select the language for the generated SDK.
152156

153-
:::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":::
154158

155159
The client is generated.
156160

@@ -165,7 +169,7 @@ To export a specification in the extension's tree view:
165169
1. Expand the API Center tree view to show an API definition.
166170
1. Right-click on the definition, and select **Export API Specification Document**. A new tab appears that renders an API specification document.
167171

168-
:::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":::
169173

170174
You can also export a specification using the Command Palette:
171175

168 KB
Loading
Binary file not shown.

0 commit comments

Comments
 (0)