2
"snippet with class binding":{
 "prefix": "row.${variable}",
 "body":[
 "<table class=\"row ${same_variable_here}\">",
 "\t<tr>",
 "\t\t<td>",
 "\t\t\t0ドル",
 "\t\t</td>",
 "\t</tr>",
 "</table>"
 ]
}

Is it possible(and how if so) to create variables like some_entity.classname expanding into something like this(in html for example):

<div class="classname"></div>
dreftymac
32.6k27 gold badges125 silver badges191 bronze badges
asked Aug 15, 2018 at 9:31

1 Answer 1

3

It looks like you have two questions there. Yes, emmet expansion will automatically turn div.myClass into <div class="myClass"></div>. See emmet in vscode.

Your other question is about a emmet snippet for a full table expansion. See custom emmet snippets. In your settings.json you will need:

 "emmet.extensionsPath": "C:\\Users\\Mark\\.vscode\\extensions"

That should point to a folder that contains a new file that you will create called snippets.json. In that file put:

{
 "html": {
 "snippets": {
 "tableR": 
 "table.row.1ドル>tr>td"
 }
 }
}

Use whatever prefix you want besides "tableR". Then you must reload vscode. Then type your prefix and tab to expand (assuming you have the emmet tab expansion setting in your settings.]

[EDIT]: Based on your comment below, perhaps you are looking for something as simple as a snippet with a keybinding:

{
 "key": "ctrl+alt+n",
 "command": "editor.action.insertSnippet",
 "when": "editorTextFocus",
 "args": {
 "snippet": "${TM_SELECTED_TEXT/(.*)\\.(.*)/<1ドル class=\"2ドル\"><\\/1ドル>/}"
 }
},

So if you select anyTag.someClass becomes <anyTag class="someClass"></anyTag> when you use whatever keybinding you have chosen. Emmet is not involved here, this is just a simple keybinding in your keybindings.json (you can limit it to certain languages if you wish). Emmet expansion does not allow you to transform its prefix (the regexp above) the way a plain snippet can grab the selection or current word and transform it.

answered Aug 15, 2018 at 14:48
Sign up to request clarification or add additional context in comments.

3 Comments

emmet expansion will automatically turn div.myClass into <div class="myClass"></div>. See emmet in vscode. << Mostly my question is about this part, but implemented on a snippet: to turn 'snippet_name.var' **in a structure with autofilled var**(fill class not by using tabstop, but from emmet phrase)
Please edit your question. "In a structure with autofilled var" I could guess at what you mean by that but you should make it explicit in your question with a good example.
So, i think edited section of your answer is almost satisfying my question. Still bad that snippets themselves isn't emmet-like.

Your Answer

Draft saved
Draft discarded

Sign up or log in

Sign up using Google
Sign up using Email and Password

Post as a guest

Required, but never shown

Post as a guest

Required, but never shown

By clicking "Post Your Answer", you agree to our terms of service and acknowledge you have read our privacy policy.

Start asking to get answers

Find the answer to your question by asking.

Ask question

Explore related questions

See similar questions with these tags.