vscode emmet, how to expand div. to other than

Question

I am working in react with react-css-module. In jsx, emment provides className for .'s expansion. but now I want to expand:

anytagName. (or anytagName,)

to

<anyTagName styleName=''></anyTagName>

To make double quotes to single quotes, I read some doc and solve this problem.

"emmet.syntaxProfiles": {
    "html": {
        "attr_quotes": "single"
    },
    "jsx": {
        "attr_quotes": "single",
        "self_closing_tag": true
    }
}

How can I expand something to the styleName attribute?

Answer 1

See my edited answer Vscode snippet variable

You could do this with a simple keybinding or an emmet expansion. Here is the keybinding:

{
    "key": "ctrl+alt+n",
    "command": "editor.action.insertSnippet",
    "when": "editorTextFocus",
    "args": {
      "snippet": "<${TM_SELECTED_TEXT} styleName='$1'>$0<\/${TM_SELECTED_TEXT}>"
    }
}

Choose whatever keybinding you wish. Select your anyTag, hit the keybinding and it will expand as you wish.

anytagName becomes <anytagName styleName=''></anytagName>

No emmet is involved, and there is no tab expansion - only select and keychord. The emmet expansion route is actually more complicated. I will add that later.

Answer 2

open snipptes

step1: open your user code spipptes like above. choose javascript.json. Its directory is ~/Library/Application Support/Code/User/snippets.

step2:custom your snippets like this. { "div, react-css-module in js": { "prefix": "div,", "body": [ "<div styleName='$1'>$2</div>", ], "description": "" }, "p, react-css-module in js": { "prefix": "p,", "body": [ "<p styleName='$1'>$2</p>", ], "description": "" }, "span, react-css-module in js": { "prefix": "span,", "body": [ "<span styleName='$1'>$2</span>", ], "description": "" }, "img, react-css-module in js": { "prefix": "img,", "body": [ "<img styleName='$1' alt= '$2'", " src={$3}", " srcSet={`", " ${$4} 2x", " ${$5} 3x", " `} ", "/>", ], "description": "" }, "image path": { "prefix": "imgpath", "body": [ "'/easicare-mobile/static/images/pages/$1';" ] } }

so input div,, choose the suggestion then press enter will expand to <div styleName='$1'>$2</div>.