How to add extension settings schema on vscode? - visual-studio-code

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