0

I have problem with the indentation in JSX/TSX files, I'm not sure how to describe it but the thing is that it does not follow the indentation on the file, please take a look the gif below:

Failure to follow indentation

After pressing enter, the line goes to the left ignoring the current level of indentation. I tried pressing tab but nothing happens.

I noticed that using rjsx-mode (major mode, not -minor) fixes the problem but then I lose all the nice functionality from TSX and LSP. Maybe I need to change my approach to this so if you could also point me in the right direction to setup emacs for React with TypeScript, I would be really grateful.

Btw, this is the top of describe-mode:

`Minor modes enabled in this buffer: Company Display-Line-Numbers Eglot--Managed Eglot-Inlay-Hints Eldoc Flymake Font-Lock Js2 Rjsx Tree-Sitter

The major mode is TypeScript TSX mode...`

1 Answer 1

0

When you use rjsx-mode as major mode, the Tree-sitter code parser is not used anymore (becoming useless). That's why it fixes the indentation issue. But, not sure rjsx-mode pretty highlights Typescript specific code.

I do not know which version of Emacs you have, but under Emacs 29.1 with last version of Tree-sitter tsx language, I do not have this issue, but no sure to have tested with a similar JSX structure (not easy, based on your gif).

If you can run Emacs 29+, you could also be interested in using jtsx. It provides jtsx-tsx-mode and jtsx-jsx-mode major modes which use built-in Tree-sitter package and come with some fixes and additional features.

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge you have read our privacy policy.

Not the answer you're looking for? Browse other questions tagged or ask your own question.