I have always been adding my Visual Studio Code extension settings to the contributes.configuration object, but I was missing a way to organize the settings in multiple sections/groups. That way, the end user gets a better overview of all settings grouped by their category.
When reading the VSCode contributes.configuration schema documentation, I spotted the following: “This section can either be a single object, representing a single category of settings, or an array of objects, representing multiple categories of settings.”
As mentioned, I have always used the contributes.configuration property as a single object. However, if you want to group your settings by categories, you only need to define it as an array.
Here you can see an example of how it looks like for a single object:
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
| {
"contributes": {
"configuration": [
{
"title": "Content",
"properties": {
"frontMatter.content.hideFm": {
"type": "boolean",
"markdownDescription": "%setting.frontMatter.content.hideFm.markdownDescription%"
},
"frontMatter.content.hideFmMessage": {
"type": "string",
"default": "Use the editor panel to make front matter changes",
"markdownDescription": "%setting.frontMatter.content.hideFmMessage.markdownDescription%"
},
"frontMatter.dashboard.content.pagination": {
"type": [
"boolean",
"number"
],
"default": true,
"markdownDescription": "%setting.frontMatter.dashboard.content.pagination.markdownDescription%"
}
}
}
]
}
}
|
To create multiple categories, all you need to do is change the contributes.configuration to an array, and each object you add needs to contain the title (used as the category title) and properties (used for the settings in the category) properties. When we group the settings of the above example into two categories, it looks as follows:
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
| {
"contributes": {
"configuration": [
{
"title": "Content",
"properties": {
"frontMatter.content.hideFm": {
"type": "boolean",
"markdownDescription": "%setting.frontMatter.content.hideFm.markdownDescription%"
},
"frontMatter.content.hideFmMessage": {
"type": "string",
"default": "Use the editor panel to make front matter changes",
"markdownDescription": "%setting.frontMatter.content.hideFmMessage.markdownDescription%"
}
}
},
{
"title": "Dashboard",
"properties": {
"frontMatter.dashboard.content.pagination": {
"type": [
"boolean",
"number"
],
"default": true,
"markdownDescription": "%setting.frontMatter.dashboard.content.pagination.markdownDescription%"
}
}
}
]
}
}
|
This results in the following outcome:
