Update README.md to explain the differences (incl. benefits and caveats) of js2-mode versus other packages

[MattMicheletti]

First, let me be frank, I have not used js2-mode. That's not a reflection on the package or anything in particular, but a reflection on just how confusing it is to figure what to use and what not to use in Emacs for web development. I don't believe I am alone in this problem. I am not sure if I need js2-mode or not and if there would be conflicts with other packages (or if those other packages would even be needed). I believe all js2-mode does is add some parsing and advanced syntax highlighting on-top of js-mode, but I am not totally sure of that and the code is far too large/long to really spend the time digging through it (it's just a big ol' file).

It looks the README has not been updated in a few years and the aforementioned problem seems to come up a lot, at least in my searching online. There is often tremendous confusion regarding what pro's and con's there are to js2-mode vs js-mode. As well, where does web-mode and rjsx-mode fit in to all of it? What about TypeScript? etc.

While I don't think any single package bears all of the responsibility of "explain the differences" or answering all the questions; however, I do think it can help people understand the pro's and con's of the package presented if the package's README can explain (in relatively high-level detail) the benefits and caveats of their package versus other packages in the same sphere. This is often done for the more popular packages as they get lots of attention and questions.

I know there is a section for React / JSX in the README, but it doesn't touch upon the caveats of rjsx-mode that it alludes too. What are those?

---

I guess, in a nutshell, it would be nice to have a "js2-mode in relation to other packages" / "FAQ" section that may help address common questions folks have:

1. What's the difference/limits/interaction(s) between Emacs' built-in js-mode and js2-mode?
2. What's the difference/limits/interaction(s) between js2-mode and rjsx-mode?
3. What's the difference/limits/interaction(s) between js2-mode and web-mode?
4. Does/Is js2-mode recommended for TypeScript syntax highlighting/etc. support? If not, what is?
5. Does/Is js2-mode recommended for React/Angular/Vue support? If not, what are?

Thoughts?

[dgutov]

Those are good questions. It would be great if others were to comment on this as well, and/or if someone wanted to start on such a FAQ. My own usage of JavaScript has been fairly limited in the recent years -- e.g. I've only (mostly) done pure JS, no React, and Angular or Vue.

js2-mode is best for that exactly, because it has a parser for JavaScript, but not for JSX, for example. Though it can be used (I think) with Angular and Vue well enough because those don't rely on extending the language syntax.

rjsx-mode is js2-mode with added support for JSX (people are welcome to report on how well it works for them).

web-mode is jack-of-all-trades-master-of-none. It supports a lot of languages, but neither of them too well, IME. But a lot of people recommend it, it's forgiving to syntax mistakes, so if one can configure it well enough, it can be fine (reports wanted here too).

Finally, I also recommend people try the major modes using tree-sitter currently incubating inside Emacs 29. typescript-ts-mode, tsx-ts-mode and js-ts-mode (this one supports editing JSX as well) are the modes to try. The downsides are, they are new, somewhat different from how other Emacs packages do things, and so might be incompatible with some other packages. They are also incompatible with js2-refactor.el, but that's just due to how it's been implemented. With some work by an interested party, a similar set of refactorings can be implemented for tree-sitter modes. Or be already available through some LSP server (again, users of those are welcome to chime in).

[dgutov]

Perhaps @felipeochoa, @jacksonrayhamilton or @mishoo have something to add regarding their own experience.

[felipeochoa]

I mostly use typescript these days -- typescript-mode for .ts, web-mode for .tsx. web-mode is frustrating, but the least bad option.

I wrote rjsx out of frustration with web-mode, and because I wanted to keep using js2-refactor. Which I miss sorely now that I write TS.

Here are a couple of old posts that describe my JS setup. https://news.ycombinator.com/item?id=24119721 https://www.reddit.com/r/emacs/comments/8e24t9/writing_reactjsx_in_2018_what_addons_do_you_all/dxuuz7j/?context=3. Not much has changed except I rarely use js2/rsjx anymore.

---

If I were writing a guide, I'd probably suggest something like:

If you want reasonable out-of-the-box functionality and don't care about extensibility, use LSP-based modes. If you want total control and a hackable setup, use js2/rjsx/typescript/web mode. I typically only use js-mode on gigantic JS files (typically output by a bundler) where the performance of js2/rjsx is not good enough (but I'm not yet using the JIT -- might not be relevant anymore).

file type	best pure emacs mode (hackable)
.js	js2
.jsx	rsjx
.ts	typescript
.tsx	web

[dgutov]

Hey @felipeochoa thanks for the reply.

And if by JIT you mean native compilation, then last I checked (or read), the speedup is around 2x on average. Not bad, but not revolutionary, so gigantic files still won't work too well in js2-mode.

I'm also curious what your opinion on js-ts-mode and typescript-ts-mode will be when you get around to trying them.

[jacksonrayhamilton]

Nowadays I am working with TypeScript+React and for that I use typescript-mode for .ts files and web-mode for .tsx files. Prettier runs whenever I save a file and cleans up subtle formatting errors that either mode might produce. It doesn’t feel ideal, but it gets the job done.

Back when I had more free time to code, I added JSX highlighting and indentation support to js-mode, which I designed to be performant and accurate. I happily use js-mode for .js and .jsx files.

js2-mode was originally built to provide better indentation for JS, as well as to provide an AST in Emacs Lisp, to give Emacs an edge as a JS IDE. That indentation code was later moved upstream to js-mode. Because of the way it is currently implemented, js2-mode cannot yet use the JSX highlighting/indentation features from js-mode, so I don’t feel js2-mode is great for React development. Also, I feel the AST is less important these days because IDE features ended up being delegated to external programs. We have TypeScript+Tide for checks/docs/completions, Flycheck+ESLint for linting, Prettier for code formatting, and AI tools for refactoring. I feel js2-mode is obsolete.

I was a js2-mode user back when I was using it for Context Coloring, but since my career oriented towards maintaining React applications, JSX support became more important to me than coloring.

[llemaitre19]

I post here my own experience since I asked the same questions.

As a React developer, I used rjsx-mode for years and was very happy with it (maybe excepted for large files) : indentation, syntax highlighting, and some handy additional features.

Few months ago I needed to edit TSX files and could not find a solution that really matched my needs. tsx-ts-mode was almost what I was looking for but missed some features.

So I ended by writing jtsx package which provides 2 major modes, jtsx-jsx-mode and jtsx-tsx-mode based respectively on js-ts-mode and tsx-ts-mode, with additional functionalities.

We have TypeScript+Tide for checks/docs/completions, Flycheck+ESLint for linting, Prettier for code formatting, and AI tools for refactoring

@jacksonrayhamilton , what do you mean by AI tools ?

[dgutov]

@llemaitre19 Looking in your package, it seems the main reasons to have major modes in there (as opposed to only minor modes) are 1) backporting fixes missing in Emacs 29.1 (a good thing), b) some new indentation features.

Have you tried filing bug reports for b) to have them in js-ts-mode and tsx-ts-mode too?

[dgutov]

Speaking of setups for React that people use, here's from a recent post on Reddit:

• apheleia for code formatting via prettier
• envrc for managing node versions
• add-node-modules-to-path
• js-ts-mode, typescript-ts-mode, tsx-ts-mode via treesit-auto
• eglot with tsserver

Along with something for eslint in flymake

[llemaitre19]

Have you tried filing bug reports for b) to have them in js-ts-mode and tsx-ts-mode too?

As soon as I do some hack to work around a bug in jtsx package, I fill a bug report if not already fixed in master branch. But, for example concerning the indentation of the body of a switch, I do not consider that no indentation is a bug, even if I do not like it. If I am not wrong, when I used cc-mode few years ago, no indentation was the default too.

[dgutov]

I do not consider that no indentation is a bug, even if I do not like it

If you can't configure it to your liking, in general it's a missing feature. Feature requests are also sent through M-x report-emacs-bug.

[jacksonrayhamilton]

@jacksonrayhamilton , what do you mean by AI tools ?

Copilot, etc