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
+13-9Lines changed: 13 additions & 9 deletions
Display the source diff
Display the rich diff
Original file line number
Diff line number
Diff line change
@@ -10,7 +10,7 @@ ms.custom:
10
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
-
# 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
14
14
15
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
@@ -64,6 +64,7 @@ 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.
67
68
68
69
69
70
## API design conformance
@@ -75,7 +76,7 @@ To ensure design conformance with organizational standards as you build APIs, th
75
76
76
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**).
77
78
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":::
79
80
80
81
## Breaking change detection
81
82
@@ -87,7 +88,7 @@ When introducing new versions of your API, it's important to ensure that changes
87
88
88
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**).
89
90
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":::
91
92
92
93
## Generate OpenAPI specification file from API code
93
94
@@ -96,26 +97,29 @@ Use the power of GitHub Copilot with the Azure API Center extension for Visual S
96
97
> [!NOTE]
97
98
> This feature is available in the pre-release version of the API Center extension.
98
99
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":::
100
101
101
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.
102
103
103
104
## Discover APIs
104
105
105
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.
106
107
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":::
108
109
109
110
Search for APIs within an API Center by using the search icon shown in the **Apis** tree view item.
110
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
+
111
115
## View API documentation
112
116
113
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.
114
118
115
119
1. Expand the API Center tree view to show an API definition.
116
120
1. Right-click on the definition, and select **Open API Documentation**. A new tab appears with the Swagger UI for the API definition.
117
121
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":::
119
123
120
124
1. To try the API, select an endpoint, select **Try it out**, enter required parameters, and select **Execute**.
121
125
@@ -132,7 +136,7 @@ You can view a `.http` file based on the API definition in your API center. If t
132
136
1. Expand the API Center tree view to show an API definition.
133
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.
134
138
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":::
136
140
137
141
1. To make a request, select an endpoint, and select **Send Request**.
138
142
@@ -150,7 +154,7 @@ Use the Microsoft Kiota extension to generate an API client for your favorite la
150
154
1. Enter configuration details about the SDK name, namespace, and output directory.
151
155
1. Select the language for the generated SDK.
152
156
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":::
154
158
155
159
The client is generated.
156
160
@@ -165,7 +169,7 @@ To export a specification in the extension's tree view:
165
169
1. Expand the API Center tree view to show an API definition.
166
170
1. Right-click on the definition, and select **Export API Specification Document**. A new tab appears that renders an API specification document.
167
171
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":::
169
173
170
174
You can also export a specification using the Command Palette:
0 commit comments