JSX Indentation

[alexseitsinger]

It has come to my attention that this plugin, while very awesome, interferes with the indentation of JSX expressions that exist outside of a template tag.

The plugins I have enabled for Javascript are:
pangloss/vim-javascript
maxmellon/vim-jsx-pretty
styled-components/vim-styled-components

It appears that enabling this plugin changes the the indentexpr from GetJsxIndent() to GetStyledIndent() which is what causes the issue. Perhaps there is something that can be adjusted?

[fleischie]

Hello @alexseitsinger,

you are absolutely correct in the statement, that the indent expression is overwritten. On the other hand the new indentexpr uses and evaluates the previously set (and stored indent expression).

Of course I cannot be absolutely certain that this works always reliably (because I am no expert, and yeah...)

If you could provide me with a minimal vimrc that produces that issue together with a demo/screenshot of expected/observed, I can better investigate. 😊🙇

[rsslldnphy]

Hi @fleischie , I've also run into this issue (using neovim) and have created a minimal repo that reproduces it: https://github.com/rsslldnphy/vim-styled-components-indentation-issue. This is the init.vim:

set nocompatible
filetype plugin indent on
syntax on

call plug#begin('~/.config/nvim/vim-plug')

Plug 'HerringtonDarkholme/yats.vim', { 'for': 'typescript' }
Plug 'MaxMEllon/vim-jsx-pretty'
Plug 'styled-components/vim-styled-components', { 'branch': 'main' }

call plug#end()

set shiftwidth=2

Example tsx file using the config that doesn't use vim-styled-components.

Same file with vim-styled-components added to the config:

I've found a partial workaround by reordering the plugin includes so that vim-styled-components is included before vim-jsx-pretty. This leaves the tsx indentation intact, and syntax-highlights the styled-components template string correctly, but doesn't indent the template string correctly unfortunately:

[stevematney]

This is likely to have been resolved with #80, which is currently on the develop branch.