Configuration

Plainwind works great out of the box, but you can customize it to fit your workflow.

Settings

Access these settings via Preferences → Settings → Plainwind or by editing settings.json directly.

`plainwind.enabled`

Enable or disable the extension globally.

Type: boolean
Default: true

{
  "plainwind.enabled": false
}

`plainwind.displayMode`

Choose how translations appear in your editor.

Type: "codelens" | "hover" | "off"
Default: "codelens"

{
  "plainwind.displayMode": "hover"
}

codelens shows translations above className attributes
hover shows translations on hover only
off hides translations (extension stays active for quick re-enabling)

`plainwind.groupByCategory`

Organize translations by category (Layout, Spacing, Colors, etc.) or show them in source order.

Type: boolean
Default: true

{
  "plainwind.groupByCategory": false
}

When enabled:

Layout: flexbox, centers items
Spacing: padding 1rem

When disabled:

flexbox, centers items, padding 1rem

`plainwind.showCategoryEmojis`

Show emojis next to category names. Only works when groupByCategory is enabled.

Type: boolean
Default: false

{
  "plainwind.showCategoryEmojis": true
}

When enabled:

📦 Layout: flexbox container
↔️ Spacing: padding 1rem
🎨 Colors: blue background

Commands

Access these via command palette (⌘⇧P on macOS, Ctrl+Shift+P on Windows/Linux) or assign keyboard shortcuts.

Command	Description
Show Options Menu	Quick menu with all settings and options
Choose Display Mode	Switch between CodeLens, Hover, or Off
Toggle Extension On/Off	Enable/disable Plainwind globally
Toggle for This File	Enable/disable for current file only
Disable for This File	Disable Plainwind for current file
Enable for This File	Enable Plainwind for current file
Toggle Group By Category	Toggle category grouping on/off
Toggle Category Emojis	Show/hide emojis in category names
Toggle Visual Enhancements In Detail Panel	Toggle color, font, and spacing previews
Set CodeLens Truncation Length	Adjust when translations get truncated
Clear All Detail Panels	Close all open translation panels

Tip: Use Plainwind: Show Options Menu for quick access to the most common settings.

Keyboard Shortcuts

No shortcuts are assigned by default, but you can add them:

Open Preferences → Keyboard Shortcuts
Search for "Plainwind"
Click the + icon next to a command
Press your preferred key combination

Suggested shortcuts:

// macOS
{
  "key": "cmd+shift+t",
  "command": "plainwind.toggleForFile"
},
{
  "key": "cmd+shift+d",
  "command": "plainwind.chooseDisplayMode"
}
 
// Windows/Linux
{
  "key": "ctrl+shift+t",
  "command": "plainwind.toggleForFile"
},
{
  "key": "ctrl+shift+d",
  "command": "plainwind.chooseDisplayMode"
}

Per-Project Settings

You can override settings for specific projects using workspace settings. Just create a .vscode/settings.json file in your project:

{
  "plainwind.displayMode": "hover",
  "plainwind.groupByCategory": false
}

Workspace settings override your global user settings, so you can have different configurations for different projects.

Features Framework Support