One thing that might not be clear from watching this is that you often get tab stops after you expand the Emmet abbreviation. So for example, the three tags would each have a tab stop in between so you can enter some text, press tab and go to the next one, instead of trying to go down and across with your arrow keys.
How to add text to the element before creating it (note: this does NOT work with lorem ipsum (at least not in VS Code): Let’s say you want a with three s inside, which each contains an tag with some text. You’ll then write something like: ul>li*3>a[href=“#”]{Link 1} This will upon generation be: Link 1 Link 1 Link 1 To take this one step further and getting each number to correspond to the number tag it’s inside of, simply write this: ul>li*3>a[href=“#”]{Link $} That’ll turn to this when generated: Link 1 Link 2 Link 3 The “$” simply tells Emmet to count up to the number of generated elements (in this case three, since that’s number we multiplied by).
One thing that might not be clear from watching this is that you often get tab stops after you expand the Emmet abbreviation. So for example, the three tags would each have a tab stop in between so you can enter some text, press tab and go to the next one, instead of trying to go down and across with your arrow keys.
Emmet is absolutely awesome.
Work smarter, not harder.
That lorem is not 20 characters, its 20 words
How to add text to the element before creating it (note: this does NOT work with lorem ipsum (at least not in VS Code):
Let’s say you want a with three s inside, which each contains an tag with some text.
You’ll then write something like:
ul>li*3>a[href=“#”]{Link 1}
This will upon generation be:
Link 1
Link 1
Link 1
To take this one step further and getting each number to correspond to the number tag it’s inside of, simply write this:
ul>li*3>a[href=“#”]{Link $}
That’ll turn to this when generated:
Link 1
Link 2
Link 3
The “$” simply tells Emmet to count up to the number of generated elements (in this case three, since that’s number we multiplied by).
Interesting. You should add the link to you description for ease of use. Thanks.
Looks cool!
Maybe links in desc or in comment?
Does emmet only works when filename is index.html ?
Smart!
That's cool and all but I can never remember this kinda sh*t when I'm it's a plausible time to use it.
HOW DO I OPEN EMMIT
you can also use content {$} before * to automatically generatr 1, 2, 3
great if you straight up writing just HTML ... but who does that anymore
Where is the cheatsheet lol
Is it free?
Yes 👍
Why are you impersonating vscode?
they arent
I hate xml systax. Why don't we reinvent a better syntax like element(attr1=value1, attr2=value2) { /**children**/ }?
sounds like a poorly thought out version of react
low key useless
most editors do the template thing already
and the rest is kinda gimmicky