How to add extension settings schema on vscode?

Question

The settings in VS Code supports graphic panel like below:

I am developing an extension in vscode but I couldn't find a document or example to show how to add these settings. Is there any tutorial I can read for doing that?

I tried below configuration but the GUI doesn't show panel for these fields:

"configuration": [
      {
        "type": "object",
        "title": "MongoDB Runner Configuration",
        "properties": {
          "mongoRunner": {
            "type": "object",
            "default": {},
            "description": "Complete connection configuration for your MongoDB.",
            "properties": {
              "connection": {
                "title": "MongoDB Runner Configuration",
                "type": "object",
                "properties": {
                  "url": {
                    "type": "string",
                    "default": "mongodb://",
                    "description": "MongoDB URI"
                  },
                  "activeOnStartUp": {
                    "type": "boolean",
                    "default": false,
                    "description": "whether launch mongodb runner on start up"
                  }
                }
              }
            }
          }
        }
      }
    ]

below is the json file format I need to support:

"mongoRunner": {
        "connection": {
            "activeOnStartUp": true,
            "url": "mongodb://localhost:27017"
        }
    },

Answer 1

Is this what you're looking for? You can use markdown in the description (property markdownDescription), and the checkbox appears by using type boolean.

Example:

"configuration": {
        "type": "object",
        "title": "Test configuration",
        "properties": {
                "test.usingUI": {
                        "type": "boolean",
                        "default": false,
                        "markdownDescription": "**Some bold text**\nYes or no?"
                },
                "test.text": {
                        "type": ["string", "null"],
                        "default": null,
                        "description": "You can't edit me now!"
                }
        }
    },

Looking in the UI like this

---

Edit - 2:

In this case your syntax is malformed, try this:

    "configuration": {
        "type": "object",
        "title": "MongoDB Runner Configuration",
        "properties": {
            "mongoRunner.url": {
                "type": "string",
                "default": "mongodb://",
                "description": "MongoDB URI"
            },
            "mongoRunner.activeOnStartUp": {
                "type": "boolean",
                "default": false,
                "description": "whether launch mongodb runner on start up"
            }
        }
    },

-> UI