Settings Reference

Complete reference for all Design Tokens Explorer settings.

All settings live under the designTokensExplorer namespace and can be set in workspace or user settings.json.

designTokensExplorer.sources · array · default: "[]"

Array of token source objects. See Token Sources for the full schema and examples.

designTokensExplorer.tokenClickAction · "insert" | "copy" · default: "insert"

Controls what happens when you click a token in the sidebar.

Value	Behavior
"insert"	Insert the token at the cursor position in the active editor
"copy"	Copy the formatted token to the clipboard

When no editor is active or no file is open, the token is always copied to the clipboard regardless of this setting.

You can also override the default action on a per-click basis by Shift+clicking a token to copy it even when the action is set to insert.

designTokensExplorer.cssInsertFormat · string · default: "var(--{name})"

Format string used when inserting a token into a CSS, SCSS, Less, or CSS-in-JS file. Use {name} as the placeholder for the token name.

"designTokensExplorer.cssInsertFormat": "var(--{name})"

Custom format examples:

// PostCSS custom function
"designTokensExplorer.cssInsertFormat": "token(--{name})"

// Tailwind arbitrary value
"designTokensExplorer.cssInsertFormat": "[var(--{name})]"

// Sass map access
"designTokensExplorer.cssInsertFormat": "map.get($tokens, '{name}')"

The format must be under 200 characters. Formats that cannot be sanitized fall back to var(--{name}).

designTokensExplorer.showTokenValues · boolean · default: "true"

When true, the raw token value is displayed below the token name in the sidebar. Set to false to show only token names for a more compact view.

designTokensExplorer.rootFontSize · number · default: "16"

Root font size in pixels used to convert rem values to px in token previews (spacing bars, font size previews, etc.).

"designTokensExplorer.rootFontSize": 16

If your project uses a non-standard root font size (e.g. 10px with a 62.5% base), update this value to get accurate visual previews.

designTokensExplorer.usageScanPath · string · default: "**/*.css"

Restricts the hardcoded values scan to a specific path, folder, or glob pattern relative to the workspace root. node_modules is always excluded regardless of this setting.

Examples:

// Default — scan all CSS files in the workspace
"designTokensExplorer.usageScanPath": "**/*.css"

// Scan only the src folder
"designTokensExplorer.usageScanPath": "src"

// Scan a specific styles folder
"designTokensExplorer.usageScanPath": "app/styles"

// Scan a specific file
"designTokensExplorer.usageScanPath": "src/styles/main.css"

// Scan CSS and SCSS files
"designTokensExplorer.usageScanPath": "./**/*.{css,scss}"

The scan path is passed directly to vscode.workspace.findFiles as the include pattern. Within the matched files, only extensions supported by the scanner are processed: .css, .scss, .less, .js, .ts, .jsx, .tsx, .vue, .astro, .svelte, .json.

designTokensExplorer.scanExcludePattern · string

Additional glob pattern(s) excluded from token usage scanning. Passed as the exclude argument to vscode.workspace.findFiles. node_modules is always excluded regardless of this setting.

"designTokensExplorer.scanExcludePattern": "{**/dist/**,**/build/**,**/.next/**,**/.nuxt/**,**/.git/**}"

Use this to exclude additional output directories, generated files, or vendor folders that are not under node_modules:

// Exclude Storybook static output and a legacy vendor folder
"designTokensExplorer.scanExcludePattern": "{**/storybook-static/**,**/vendor/**}"

To exclude multiple patterns, wrap them in curly braces separated by commas — this is standard VS Code glob syntax. For example: "{**/dist/**,**/out/**}".

designTokensExplorer.statusThresholdGood · number · default: "20"

Maximum number of active hardcoded matches still considered Good adoption in the Adoption Audit status.

"designTokensExplorer.statusThresholdGood": 20

Set this lower for stricter quality gates, or higher for gradual migration in large legacy codebases.

designTokensExplorer.statusThresholdDiscrete · number · default: "50"

Maximum number of active hardcoded matches considered Discrete adoption. Above this value, the status becomes Poor adoption.

"designTokensExplorer.statusThresholdDiscrete": 50

If you set statusThresholdDiscrete lower than statusThresholdGood, DTE normalizes values internally to avoid invalid status ranges.

designTokensExplorer.scrollToHardcodedOnHover · boolean · default: "true"

When true, hovering over a hardcoded value entry in the audit panel scrolls the editor to that line. This lets you quickly inspect the surrounding code context without clicking.

designTokensExplorer.openFileOnHover · boolean · default: "false"

When true, hovering over a hardcoded value in the audit panel opens and focuses the file in the editor automatically. The Open button is hidden when this is enabled.

This setting takes precedence over scrollToHardcodedOnHover. When enabled, the file opens and the editor scrolls to the relevant line.