GUIDES
Editor integration
A VS Code snippet for the styling prop, ESLint in the editor, and jumping to definitions.
classStyle snippet
In VS Code, add a snippet that expands class into classStyle={}.
shift + command + p >
select > Snippets: Configure Snippets
select > typescriptreact.json (TypeScript JSX) or javascriptreact.json (JavaScript JSX)
{
"classStyle": {
"prefix": "class",
"body": "classStyle={$1}",
"description": "Plumeria classStyle",
}
}This setting makes the snippet appear at the top of the suggestions.
{
// ...other settings
"editor.snippetSuggestions": "top",
// ...
}Usage
<div class /> -> Enter -> <div classStyle={|} />ESLint
@plumeria/eslint-plugin reports style problems as you type, once your editor's ESLint extension is on.
Set it up with the config in Installation; the plugin reference lists every rule.
Jump to definition
Cmd + click (macOS) or Ctrl + click (Windows, Linux) jumps from a style to its definition, even outside JSX.