Empty elements don't autoclose in JSX

[federicobond]

Steps to reproduce:

• Open JSX file
• Expand img

Result:

<img src="|" alt="">

Expected result:

<img src="|" alt="" />

I did several attempts at a fix, but could not figure it out. Overriding empty_element_suffix for jsx does not seem to have any effect.

[mattn]

if you want it

let emmet_html5 = 0

put this into your vimrc.

[federicobond]

Yes, but for JSX it's always an error to produce an empty element without a suffix, whereas for html it's okay to configure it the way you want.

[mattn]

Ah, I miss your explain sorry.

[indiesquidge]

@mattn, could we solve this by simply setting emmet_html5 = 0 by default? Or is the idea to make the latest progression of standardizations (e.g. HTML5) the default setting? If that is the case, another way I can think of fixing this issue would be to check if the current buffer's filetype is js or jsx and use self-closing tags if that is the case.

[indiesquidge]

I suppose another way would be to have a global flag for one to set. Something like g:emmet_jsx = 1 to allow users to specify that they would like to use JSX. I would assume this would still require knowing the filetype.

[mattn]

Did you try set empty_element_suffix?

let g:user_emmet_settings = {
\    'html': {
\        'empty_element_suffix': 1,
\    }
\}

[HenryMarshall]

I favor the suggestion by @indiesquidge to use "something like g:emmet_jsx = 1" even if it is just an alias for emmet_html5. I'd never think to toggle the latter when encountering the issue were it not for this thread.

I think it's worth noting that the React community and Facebook in particular seem to be moving away from using the jsx filetype in favor of plain js (details). So I definitely favor the default behavior being changed for both file types.

As html isn't valid js, the only potential problem I can see is for people using jQuery constructor functionality though my brief experimentation did not show any errors. Considering that emmet will mess up a single line constructor anyway ($("span becomes <span></span>), I'm not too concerned by this. Can anyone think of any other conflicts?

[indiesquidge]

@mattn, I'm not able to get

let g:user_emmet_settings = {
\    'html': {
\        'empty_element_suffix': 1,
\    }
\}

To work properly. At first I thought you had actually meant for the key to be 'jsx', but after trying that as well, I am still not getting a self-closing tag in my JSX files. Not entirely sure what I'm doing incorrectly 😕

[mattn]

could you please try these configurations commented on following issue?

#350

[indiesquidge]

Hi, @mattn. The configuration

let g:user_emmet_settings = {
\  'javascript.jsx' : {
\      'extends' : 'jsx',
\  },
\}

works, but not as I'd hoped.

The default, out-of-the-box snippet expansion looks like this:

<img src="**cursor**" alt="">

And with the above code, it now looks like this:

<img />
**cursor**

I'm a bit confused as to why the whole snippet and cursor placement changed, when all that was desired was a self-closing tag.

For instance, having let emmet_html5 = 0 produces the desired snippet

<img src="**cursor**" alt="" />

My question would then be,

Is there a way to turn on self-closing tags for JSX files without the snippet being changed beyond the self-closing tag?