Configurations

An extension can contribute extension-specific settings.

Define in Manifest Non-Proprietary

To define the settings in the package.json, you need to add the contributes.configuration field. The configuration field is an object that contains the configuration settings.

package.json

{
  "contributes": {
    "configuration": {
      "title": "My Extension",
      "properties": {
        "myExtension.enable": {
          "type": "boolean",
          "default": true,
          "description": "Enable My Extension"
        },
        "myExtension.greeting.message": {
          "type": ["string", "null"],
          "default": "Hello!",
          "description": "Greeting messag. Set to null to disable"
        }
      }
    }
  }
}

Visit the official documentation for more information.

Use in Extension

To use the settings in the extension, you can use the defineConfig function to define the configuration. The following examples are corresponding to the above configuration.

import { defineConfig, watchEffect } from 'reactive-vscode'

const config = defineConfig<{
  enabled: boolean
  greeting: {
    // Nested configurations are also supported
    message: string | null
  }
}>('your-extension-id')

console.log(config.greeting.message) // read
config.greeting.message = 'Hi!' // write
config.greeting = { message: 'Hello!' } // write nested object

watchEffect(() => {
  console.log('Enabled:', config.enabled) // react to changes
})

Visit the official documentation for more information about the rest of the options.

Use with vscode-ext-gen

You can also use the vscode-ext-gen to generate the configuration types. For example:

// ./generated-meta.ts is generated by vscode-ext-gen

import type { NestedScopedConfigs } from './generated-meta'
import { defineConfig } from 'reactive-vscode'
import { scopedConfigs } from './generated-meta'

const config = defineConfig<NestedScopedConfigs>(scopedConfigs.scope)