JSX in Emacs

A few years ago, I regretted contributing JSX indentation support to Emacs 25. I wished I had not promoted a non-standard language extension for the trouble it would cause.

My outlook on language extensions has changed. Whether or not a committee from a standards organization agreed on the legitimacy of language features is irrelevant. Programming languages that serve all of society may stem from one man’s mind. Extensions may provide useful abstractions for specific domains, elevating their languages to higher levels; thus, there is greater parity between the syntax and the effect of code, which is a good thing.

So, rather than continue to admonish it, I recently set out to improve Emacs’ JSX support. My improvements will be shipping in the upcoming release of Emacs 27.

Screenshot

Screenshot of JSX support in Emacs

Indenting JSX in Emacs

Over many months I educated the JavaScript mode to properly indent code samples which had been submitted in bug reports since 2016. Notably, JSX almost always needed to be wrapped in parenthesis before Emacs would try to indent it; that restriction has now been lifted. Also, code using arrow functions was especially susceptible to indentation failures; no longer.

The test suite for indentation has grown quite a lot, and my personal experience using the improved logic has been largely without issue.

JSX Syntax Highlighting in Emacs

Unlike the rest of JavaScript mode’s syntax, the JSX parts did not receive syntax highlighting. And God forbid a single quotation mark appear between JSX elements; the whole rest of the buffer might have become a miscolored, misindented string.

Back when I was working on my first round of contributions, I was less concerned with syntax-based highlighting due to my excitement over the context-based variety. However, due to the complexity and performance implications of cutting-edge technology, and its merely marginal advantages over its predecessor, I’ve since drifted back to more traditional ways of reading code. This is probably for the good of all, as my code coloring concerns again align with those of 99.99% of programmers.

So, I added syntax highlighting for JSX, too.

Automatically Enabling JSX Support in Emacs

Users had to opt in to JSX, either by activating js-jsx-mode, or by naming files with a “.jsx” extension. Unfortunately, this obfuscated the feature in the very common case where programmers used “.js” for their files; and what’s the point of having JSX support if people don’t know it’s there?

Now, JSX support will be enabled automatically in normal (“.js”) JavaScript buffers as soon as Emacs can assume the buffer is using JSX.

Trying It Out

To take my latest improvements for a spin, first check the homepage to see if Emacs 27 has been released yet.

As of this writing, Emacs 27 is not out yet, nor is there a release candidate. macOS users can install a Nightly build from Emacs For Mac OS X (scroll down to “Nightlies”). GNU/Linux users can install a snapshot from a PPA or compile from source. The incantations for compiling will probably be similar to these:

sudo apt remove emacs
sudo apt build-dep emacs
git clone git://git.sv.gnu.org/emacs.git
cd emacs
git checkout emacs-27
./autogen.sh
./configure
make
sudo make install

Note that the changes are provided by js-mode. They won’t work with js2-mode, for instance (at least until the following issues are resolved: #527, #528, #529, #530; volunteers welcome). If you were using js2-mode, remove its entry from auto-mode-alist first.

I hope my updates work well for you! (If not, please submit a bug report to bug-gnu-emacs@gnu.org.)