Atom changes closing tag in jsx


#1

Hi,
I don’t know if this is a package or an atom feature but something is changing my html tags.
instead of <div>foo</div> it will show <div>foo</>
does anybody have an idea of how can I fix this? Thank you!


#2

Please describe the precise circumstances where this happens. Does it happen when you start Atom from the command line with atom --safe?


#3

It doesnt happen with --safe. Also it doesn’t happen in html, it happens in jsx, my bad. Also, It doesn’t break anything, I can still work with it but is really awkward.


#4

Walk us through it. What exact steps do you take in order to get <div>foo</>?

Since it doesn’t happen with --safe, that means that it’s the result of a package and not caused by the editor. In order to figure out why, we need to identify exactly which package is causing it. What JSX packages do you have installed?


#5

Whenever I finish to type the closing tag </div> it replaces it by </> and puts the div word at the end of the line, like this. Like I said, it doesn’t break anything but it’s really awkward.

<div>
  <div>
    {children}
  </>                                                                 div
</>                                                                   div

I have these ones

language-javsacript-jsx
react/orktes
react-native-snippets
atom-react-native-autocomplete
language-babel

I have looked for the option inside those packages but couldn’t find it.


#6

Try disabling them one at a time and seeing if that changes anything.

By this, do you mean that the code still runs? If so, then it’s probably a CSS thing that’s positioning the closing div way out on the edge, which is possible, but a really weird thing to have happen.


#7

I don’t know how I missed that huh. Thank you.

So it was language-babel. I have no idea which option though, disabling and enabling did the job.


#8

If it comes back, jump over to the package’s repo and give them all the information you can. They might be able to get to the bottom of it.