How to change JSX indentation rules in VIM? - vim

Question

Currently, I'm using two plugins to format my JS(X) code in VIM:
pangloss/vim-javascript
mxw/vim-jsx
Our team has elected that, when we have React Components whose props spill on to multiple lines, we want those properties to line up with the property on the first line, like so:
Desired:
<Toggle label={dragString} toggled={this.props.canDrag} onToggle={this.toggleDrag}
thumbStyle={toggleStyles.thumbOff}
thumbSwitchedStyle={toggleStyles.thumbOn}
trackStyle={toggleStyles.trackOff}
trackSwitchedStyle={toggleStyles.trackOn}
/>
Instead, it looks like vim-jsx will always indent props on new lines just two spaces (which is what we have our tab size set to):
What actually happens:
<Toggle label={dragString} toggled={this.props.canDrag} onToggle={this.toggleDrag}
thumbStyle={toggleStyles.thumbOff}
thumbSwitchedStyle={toggleStyles.thumbOn}
trackStyle={toggleStyles.trackOff}
trackSwitchedStyle={toggleStyles.trackOn}
/>
Is there a change I can make in my .vimrc or to the vim-jsx plugin code to make React component props on new lines line up with the prop on the first line?

Answer 1

In my case, I already had indentation working as expected for .js files with this line in my .vimrc:
autocmd FileType javascript setlocal shiftwidth=2 tabstop=2
To get similar behavior in .jsx files, I needed to also add:
autocmd FileType javascriptreact setlocal shiftwidth=2 tabstop=2
You can run :set filetype in vim to display the filetype according to vim; in this case javascriptreact.

Answer 2

Unfortunately, there's no easy way to do this. In Vim, indentation works by invoking an "indent expression" stored in the indentexpr setting. The file that does this for JSX in your plugin is here: https://github.com/mxw/vim-jsx/blob/eb656ed96435ccf985668ebd7bb6ceb34b736213/after/indent/jsx.vim
They define a function, called GetJsxIndent, which either delegates to the XML indent, or to the JS indent, or it does something slightly different. Their particular overrides are here: https://github.com/mxw/vim-jsx/blob/eb656ed96435ccf985668ebd7bb6ceb34b736213/after/indent/jsx.vim#L92-L102
Theoretically, you could make your own changes in that area, check where the properties start in the <Toggle line and align to those, but it might end up being much more complicated than it seems at first glance. For instance, they decrease the indent by a single shiftwidth, if the current line is />. With a change like you're proposing, this won't work -- the /> couldn't look at the previous line, it has to find its starting <.
My suggestion would be to open an issue on the vim-jsx project and ask them to implement this, possibly with a setting to turn it on or off. The alternative would be to fork it yourself and try to apply your workaround, but be prepared for it to take some time and effort.

Answer 3

Wanted to update this post, even though it's been a few years. We've been using Prettier for auto-formatting our code, and it takes care of aligning JSX properties properly.
The fix for getting it to format in VIM was adding using the Neoformat Plugin and appending the following to my .vimrc file:
autocmd BufWritePre *.js Neoformat
autocmd FileType javascript setlocal formatprg=prettier\ --stdin\ --parser\ flow
let g:neoformat_try_formatprg = 1 " Use formatprg when available
let g:neoformat_enabled_javascript = ['prettier-eslint', 'prettier']
let g:neoformat_enabled_json = ['prettier-eslint', 'prettier']
let g:neoformat_enabled_css = ['prettier-eslint', 'prettier']
let g:neoformat_enabled_less = ['prettier-eslint', 'prettier']
All my JS(X) code will now be properly formatted every time I save the file (:w)
I'm really happy with this solution, because it eliminates the cognitive load of having to manually format code.