Skip to main content
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.
ValueBehavior
"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.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.