Visual Studio Code

| Posted on by



Visual Studio dev tools & services make app development easy for any platform & language. Try our Mac & Windows code editor, IDE, or Azure DevOps for free. In Visual Studio Code, is there a way to get a merged git log of all git commands from both Source Control pane and Terminal window?

-->

In this tutorial, you learn how to use the API Management Extension for Visual Studio Code for common operations in API Management. Use the familiar Visual Studio Code environment to import, update, test, and manage APIs.

  • The first time you open a C# file in Visual Studio Code, OmniSharp loads in the editor. Select Yes when Visual Studio Code prompts you to add the missing assets to build and debug your app. Replace the contents of the Main method in Program.cs, which is the line that calls Console.WriteLine, with the following code.
  • Visual Studio extension development. Create add-ons and extensions for Visual Studio, including new commands, code analyzers, and tool windows. Add the SDKs and tools you need to create new commands, code analyzers, tool windows, and language services using C#. Then, share your extension with the community in the Visual Studio.

You learn how to:

  • Import an API into API Management
  • Edit the API
  • Apply API Management policies
  • Test the API
Code

For an introduction to additional API Management features, see the API Management tutorials using the Azure portal.

Prerequisites

  • Understand Azure API Management terminology
  • Ensure you have installed Visual Studio Code and the latest Azure API Management Extension for Visual Studio Code

Import an API

The following example imports an OpenAPI Specification in JSON format into API Management. Microsoft provides the backend API used in this example, and hosts it on Azure at https://conferenceapi.azurewebsites.net?format=json.

  1. In Visual Studio Code, select the Azure icon from the Activity Bar.
  2. In the Explorer pane, expand the API Management instance you created.
  3. Right-click APIs, and select Import from OpenAPI Link.
  4. When prompted, enter the following values:
    1. An OpenAPI link for content in JSON format. For this example: https://conferenceapi.azurewebsites.net?format=json.This URL is the service that implements the example API. API Management forwards requests to this address.
    2. An API name, such as demo-conference-api, that is unique in the API Management instance. This name can contain only letters, number, and hyphens. The first and last characters must be alphanumeric. This name is used in the path to call the API.

After the API is imported successfully, it appears in the Explorer pane, and available API operations appear under the Operations node.

Edit the API

You can edit the API in Visual Studio Code. For example, edit the Resource Manager JSON description of the API in the editor window to remove the http protocol used to access the API. Then select File > Save.

To edit the OpenAPI format, right-click the API name in the Explorer pane and select Edit OpenAPI. Make your changes, and then select File > Save.

Apply policies to the API

API Management provides policies you can configure for your APIs. Policies are a collection of statements that are executed sequentially on the request or response of an API. Policies can be global, which apply to all APIs in your API Management instance, or they can be scoped to a specific API or API operation.

This section shows how to apply some common outbound policies to your API that transform the API response. The policies in this example change response headers and hide original backend URLs that appear in the response body.

Visual

  1. In the Explorer pane, select Policy under the demo-conference-api that you imported. The policy file opens in the editor window. This file configures policies for all operations in the API.

  2. Update the file with the following content in the <outbound> element:

    • The first set-header policy adds a custom response header for demonstration purposes.
    • The second set-header policy deletes the X-Powered-By header, if it exists. This header can reveal the application framework used in the API backend, and publishers often remove it.
    • The redirect-content-urls policy rewrites (masks) links in the response body so that they point to the equivalent links via the API Management gateway.

  3. Save the file. If you are prompted, select Upload to upload the file to the cloud.

Test the API

Get the subscription key

To test the imported API you imported and the policies that are applied, you need a subscription key for your API Management instance.

  1. In the Explorer pane, right-click the name of your API Management instance.

  2. Select Copy Subscription Key.

Test an API operation

  1. In the Explorer pane, expand the Operations node under the demo-conference-api that you imported.
  2. Select an operation such as GetSpeakers, and then right-click the operation and select Test Operation.
  3. In the editor window, next to Ocp-Apim-Subscription-Key, replace {{SubscriptionKey}} with the subscription key that you copied.
  4. Select Send request.

When the request succeeds, the backend responds with 200 OK and some data.

Notice the following details in the response:

  • The Custom header is added to the response.
  • The X-Powered-By header doesn't appear in the response.
  • URLs to the API backend are redirected to the API Management gateway, in this case https://apim-hello-world.azure-api.net/demo-conference-api.

Trace the API operation

For detailed tracing information to help you debug the API operation, select the link that appears next to Ocp-APIM-Trace-Location.

The JSON file at that location contains Inbound, Backend, and Outbound trace information so you can determine where any problems occur after the request is made.

Tip

When you test API operations, the API Management Extension allows optional policy debugging (available in the Developer service tier).

Clean up resources

When no longer needed, remove the API Management instance by right-clicking and selecting Open in Portal to delete the API Management service and its resource group.

Alternately, you can select Delete API Management to only delete the API Management instance (this operation doesn't delete its resource group).

Visual Studio Code Online

Next steps

This tutorial introduced several features of the API Management Extension for Visual Studio Code that you can use to import and manage APIs. You learned how to:

  • Import an API into API Management
  • Edit the API
  • Apply API Management policies
  • Test the API

Visual Studio Code Linux

The API Management Extension provides additional features to work with your APIs. For example, debug polices (available in the Developer service tier), or create and manage named values.

Learn to use the GitHub integration in Visual Studio Code, including authentication, publishing repos, and viewing your repo timeline.

Visual Studio Code C++

Learning objectives

In this module, you will:

  • Sign in to GitHub by using Visual Studio Code.
  • Use Visual Studio Code to search GitHub for repos.
  • Clone a repo from Visual Studio Code.
  • Publish a local project to GitHub by using Visual Studio Code.
  • View a timeline of activity on a GitHub repo.

Visual Studio Code Download

Prerequisites

Visual Studio Code Extension

  • A GitHub account
  • Basic knowledge of Git concepts such as repositories and cloning, as described in Using Git version control tools in Visual Studio Code
  • Visual Studio Code