JSON was originally introduced as a data format for browser/server communication. It is the most popular format for transferring asynchronous data between browser and server, and for good reason. It is simple, human readable and compact. These attributes have made JSON extremely popular with web developers and has broadened the usage of JSON from just data transfer to various other scenarios. One such use case is configuration files. Many a times these configuration files can be quite complex. In honesty, XML is a perfectly capable and in many cases a better choice for such configurations. However, JSON is gaining popularity in these scenario as well. If you are tasked with developing a JSON configuration file, you should seriously consider authoring a JSON Schema. It allows you to define you Configurations, have Validations and integrates with various editors to provides intellisense and auto complete. In this post, I walk through the process of creating a JSON schema for a JSON configuration file and integrate it with Visual Studio Code to provide tool tips, Auto complete and Snippets.

1. Visual Studio Code Json File
2. Json Visual Studio Code
3. Json Viewer Visual Studio Code
4. Visual Code Format Json
5. Beautify Json Visual Studio Code
6. Launch.json Visual Studio Code

Question Bank Example

A quick video about how to open JSON files using Visual Studio Code. If you have been struggling to learn web development or you're having a hard time wrappi. A very simple extension that will let you convert selected text to a Go struct if it's valid JSON. Can be run through the command pallete or the editor context menu inside supported files with the JSON to Go command. This is the initial release and I welcome any suggestions.

Lets take a sample json that is used to represent multiple choice questions in a Quiz application.

Open vscode and search extensions for 'json viewer' download; reload; Usage: open a file, Press F1 and run 'Open in json viewer' Run the command again on editor to update the view. Show JSON file as a treeview in vscode. Extension Settings. Known Issues Release Notes. Special thanks to JSONEditor. Editing JSON with Visual Studio Code JSON is a data format that is common in configuration files like package.json or project.json. We also use it extensively in Visual Studio Code for our configuration files. When opening a file that ends with.json, VS Code provides features to make it simpler to write or modify the file's content.

Looking at the above JSON, there are a few things that are evident

1. You can specify Questions with locale. The key of is of the format Question_<>.
2. Each question has the following fields. question, option_1, option_2, option_3, option_4, correct_option, explanation, category, level, multimedia

But there are many more conditions that are implemented in the application. For instance

1. question, 4 options and correct_option are the only fields required.
2. category is a list of predefined categories [ GEOGRAPHY, HISTORY, MATH, CURRENT_AFFAIRS ]
3. options can either be text or can be images or audio clips
4. multimedia types can be images or audio clips
5. there are other optional attributes for multimedia

Having a Json Schema defined for the file, will not only document these constraints, but also allow us to have validations and intellisense in the code editors.

Here’s how you would define a Schema for the above file.

Writing the Json Schema for Question Bank Example

Having the right tools can make this quite simple. Here’s what I recommend.

1. A good Editor: VS Code, Sublime etc etc etc. (I will use VS Code)
2. Json Schema Validator: You can use a simple online Json Schema validator to quickly check if a json is according to your schema. Here’s one I like http://www.jsonschemavalidator.net

To get started. Lets create a directory and create QuestionBank.json with the contents from the previous section. Create a new file QuestionBank-schema.json in the same directory with the following contents.

Now specify the schema file in your QuestionBank.json

Having VS Code in split screen allows you to author your Json Schema and check the json file in tandem. Here’s how your editor should look.

Note that when I added “additionalProperties”: false to the schema file, you see the error in QuestionBank.json. If you hover on the error you can see the error message too.

You can go through the excellent examples at json-schema.org to understand more. For our example, lets add a few things. We want our QuestionBank.json to adher to a schema, so lets add a property called “$schema” in the Schema. Next we use patternProperties to add a format for our Keys. You can use regex to restrict the language code. You can also use $ref to give some structure to your schema. Here’s what the schema looks like now.

Now We can start defining the question-schema. For now, lets assume that options can only be strings. We specify that question, option_1, option_2, option_3, option_4 and correct_option are required fields.
Also, lets create an enum to define allowed Categories.

Visual Studio Code Json File

Improving the Editing experience with VSCode

Creating Tool tips

All objects in Json Schema allows you to add a description. This is used by VS Code to show as tool tips.

For example, you can add the following to our example to describe level for a question

Creating Auto Complete Snippets

Note that this is specific to VS Code. You can add defaultSnippets to your Json schema which lets you create context specific menus and allows you to create snippets.

Lets say you want to create a create a short cut to create new questions with only required fields. To do this add the following to the questions-schema

Once added, if you press Ctrl-Space while in “Questions_EN”, you will see a menu showing the option to add a new question.

Once you click on New Question you will see a snippet added with the required fields.

For more information on Adding Snippets in VS Code you can see the documentation

You can see the entire examples samples at my GitHub

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.

You learn how to:

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

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.

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.

Json Visual Studio Code

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.

Json Viewer Visual Studio Code

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

Visual Code Format Json

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).

Next steps

Beautify Json Visual Studio Code

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:

Launch.json Visual Studio Code

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

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.