Given an emmet abbreviation:
div.layoutStyles.container
Is there a way to produce:
<div className={layoutStyles.container}></div>
instead of <div className="layoutStyles container"></div>
Given an emmet abbreviation:
div.layoutStyles.container
Is there a way to produce:
<div className={layoutStyles.container}></div>
instead of <div className="layoutStyles container"></div>
You can make a custom emmet snippet, but the workflow is the same as a regular snippet - although it is good to know this technique as well. In snippets.json:
{
"html": {
"snippets": {
"divx" : "<div className = {$1}>$2</div>"
}
}
See Link+tab shortcut Emmet on VSCode - How can I get the "type" to be included in this? for more details on how to create custom emmet snippets - and do reload whenever you make changes to them.
Then, just like a regular snippet, you start with the prefix (here I made it divx
) and then type your class info.
An alternative method is to use Hyper Snips, another form of snippets.
See VSCode Advanced Custom Snippets for more info on setting up that extension.
Then, in your javascriptreact.hsnips file:
snippet `div\.([^ ]+) ` "expand to jsx className" A
<div className={``rv=m[1]``}>$1</div>
endsnippet
A space actually acts as the trigger and you can have as many items in the className
as you want. Demo:
You can use Replace Rules and a keyboard shortcut
Add to your settings.json
(Global or Workspace)
"replacerules.rules": {
"class-brace": {
"find": ["(?<= className=)\"([^<>\"]+)\""],
"replace": ["{$1}"]
},
"class-points": {
"find": ["(?<= className=){([^\" <>]+) ([^\"<>]+)}"],
"replace": ["{$1.$2}"]
}
},
"replacerules.rulesets": {
"class-brace-point": {
"rules": [
"class-brace",
"class-points",
"class-points",
"class-points"
]
}
If you might have tags with more than 4 classes you can add more "class-points"
or press the keyboard shortcut multiple times.
Add a keyboard shortcut to call the RuleSet
{
"key": "ctrl+f5", // or any other key combo
"when": "editorTextFocus",
"command": "replacerules.runRuleset",
"args": {"rulesetName": "class-brace-point"}
}