Emmet: Abbreviation for self-closing tags in jsx

[deathmood]

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.

[jmk2142]

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

[sergeche]

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

[jmk2142]

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

[deathmood]

The simplest solution is to use default shortcuts:

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

[brumm]

@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.

[deathmood]

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

[rockallite]

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.

[ignaciopicun]

In atom you can do Command + Shift + j

[mpolichette]

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

[eromoe]

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

[dziamid]

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

[IamManchanda]

For VS Code also

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

[nishitmehta1]

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

[sergeche]

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

[shahmir811]

For VS Code also

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

That works, awesome