For those familiar with Emacs and finding the best productive way of writing js/jsx code.
Despite personal habits, evil mode’s keybindings are more productive than Emacs’ default keybindings. One of the reason is that Insert/Normal modes make single key shortcuts possible.
Syntax highlight and indent
For editing jsx code, there are mainly two options. One is rjsx-mode, which is based on js2-mode. Another one is the versatile web-mode, which can edit almost any kind of web related files, including css, html, vue, django templates etc. None of them are not perfect at jsx indentation (this issue can be mitigated by Prettier), but web-mode is a little bit better than rjsx-mode for indentation. Unlike rjsx-mode, web-mode includes its own indentation function, while rjsx-mode uses the builtin indent function in js.el. The built-in js indent function has very poor support for jsx files and is not actively maintained.
Code completion and navigation
Tide comse with a basic flycheck checker, it’s enough for 99% situations.