Support for Airbnb-style indentation about vim-jsx

[mxw]

@ksmithbaylor—vim-jsx uses vim's native XML indentation to auto-indent within JSX blocks. It seems like your preference is not supported natively, so this is a wontfix.

Note that, historically, Facebook favored this style in all of its inline-XML fragments:

<Foo
  lol="lolololol"
  haha="hahahahahahah">
  <Bar />
</Foo>

This conveniently is also the style implicitly recommended by vim's XML support—you could consider changing your style guide to match this (more common? more prescribed?) styling.

[ksmithbaylor]

Got it. I understand why it can't be easily implemented, but I still think it has some merit.

The reason why I prefer the closing angle bracket on its own line (which admittedly looks uglier) is so that I can re-order, add, and remove props without having to think about moving it.

Since the Airbnb style guide is fairly popular in the React community (I don't work for Airbnb, I just like their guide), especially their eslint configuration (which I see used everywhere in various projects), is it infeasible to implement this behind an optional flag? Can the behavior that governs this behavior in vim's native XML indentation be overridden when this plugin is active?

I may be speaking out of ignorance, as I have never implemented a vim plugin and don't understand all the semantics.

[mxw]

vim-jsx doesn't implement XML indentation at all—it relies on whatever XML indentation vim ships with to indent XML fragments. It does likewise with JS. vim-jsx merely glues two separate syntax and indentation packages together. Its surface area is very minimal, and I doubt it will ever include custom support for either sub-language.

This means that if you want a particular indentation for XML, you have to take it up with the indent/xml.vim script that shipped with your vim distro. If it supports your style, then your style is supported by vim-jsx; otherwise, it's not.

If your style is supported by another XML vim plugin, you should be able to hook that into vim-jsx (you may not even have to do anything but have it installed with your plugin manager).

[ksmithbaylor]

Okay, thanks! I'll give it a try.

[lencioni]

@ksmithbaylor I know this doesn't really solve your problem, but you can achieve the ESLint configuration that will support Vim's default closing bracket alignment by using the following configuration:

"jsx-closing-bracket-location": [2, {
  "nonEmpty": "props-aligned",
  "selfClosing": "tag-aligned"
}]