Emmet: Abbreviation for self-closing tags in jsx

Created on 6 Dec 2015  ·  15Comments  ·  Source: emmetio/emmet

Is it possible to expand a word into self-closing tag? I saw smth similar here https://github.com/smihica/emmet-mode#empty-tags it should work like

AppComponet/ -> <AppComponent />

but that does not work with emmet.
Sorry for writing it here, but I could not find anything about this in documentation.

Want to back this issue? Post a bounty on it! We accept bounties via Bountysource.

Most helpful comment

The simplest solution is to use default shortcuts:

Component ---> ctrl+e or tab ------> <Component></Component> ------> ctrl+shift+ ~ ---> <Component />

All 15 comments

Did you find a solution for this? In the same boat.

It requires custom resolver for JSX so upper-cased abbreviations can be resolved to empty tags.

Roger. That's the key word I was looking for. Found some of your other posts regarding how to go about building one. Thanks!

The simplest solution is to use default shortcuts:

Component ---> ctrl+e or tab ------> <Component></Component> ------> ctrl+shift+ ~ ---> <Component />

@deathmood could you elaborate on this?

ctrl+shift+ ~ has no effect here (using atom) and there's no built-in command that turns a closing tag pair into a self-closing one.

@brumm it is a split/join tag action http://docs.emmet.io/actions/split-join-tag/ . That works in sublime.

On Sublime 3 for Mac, the default hotkey for split/join tag is Command + Shift + ' (single quote).

However, that's still inconvenient for multiple tags. For example, expand TabBar>TabItem*10, and I want the <TabItem /> to be self-closing. And now I have to move the cursor and press the above hotkey 10 times. It's insane.

In atom you can do Command + Shift + j

I use emmet for writing JSX and it would be really cool if emmet would let use cycle through the forms.
E.G. repeatedly hitting ctrl+e would cycle as such:
MyComponent -> <MyComponent></MyComponent> -> <MyComponent /> -> MyComponent

I think this would make it really simple to learn/discover the feature also.

I'm not sure if this belongs in the emmet repo or the atom plugin repo, I've cross posted this in https://github.com/emmetio/emmet-atom/issues/408

What about vscode ?? ctrl+e and ctrl+shift+ ~ both not work

Webstorm has this already AppComponet/ TAB => <AppComponent />

For VS Code also

hello-world/ TAB => <hello-world>
so I have to write / by myself but works :)

For VSCode:
Search for Split/Join in Keyboard Shortcuts. You'll see an Emmet option. You can set it to any key you prefer.

Upcoming v2 support elem/ syntax to output self-closing elements

For VS Code also

hello-world/ TAB => <hello-world>
so I have to write / by myself but works :)

That works, awesome

Was this page helpful?
0 / 5 - 0 ratings

Related issues

planetoftheweb picture planetoftheweb  ·  3Comments

corysimmons picture corysimmons  ·  5Comments

sergeche picture sergeche  ·  25Comments

MarvinXu picture MarvinXu  ·  10Comments

midgethoen picture midgethoen  ·  8Comments