[ANN] tsx-mode.el: a batteries-included major mode for Typescript/TSX
reddit / emacs

----------------------------------------------------------------------
orzechod · 2022-03-19 02:33

I've been throwing together bits of elisp over the past few months and
it's sort of turned into a tiny little major mode for Typescript (and
Javascript) webapp files: https://github.com/orzechowskid/tsx-mode.el

indentation and jit-lock syntax highlighting are powered by tree-
sitter, and code analysis and completion are powered by lsp-mode.
servers and grammars for both should be automatically installed and
configured for you.  tagged template strings for some common CSS-in-JS
patterns are indented and support code-folding, and have CSS syntax
highlighting and completion applied to them when point is inside of
them.

I've been using this at work and at home for a while now and am very
pleased with it.
 but I'm positive there are hidden assumptions it makes and/or
failures in handling use-cases which I personally don't have, so I'd
love to get extra eyes on it to see where it can improve.  comments
(or PRs!) are very welcome.

thanks for looking!

----------------------------------------------------------------------
0xMii · 2022-03-19 09:12

Thanks. I’ve been using a derived mode from web-mode with tree-sitter
TSX-syntax baked into it for this until now, but I’m really curious to
check this out and give some feedback or maybe a small contribution.

----------------------------------------------------------------------
[deleted] · 2022-03-19 09:15

Legend! Gonna give this a go later in the month :D

----------------------------------------------------------------------
ddugue · 2022-03-19 13:47

Hey thanks for this, going to try it too this month

----------------------------------------------------------------------
[deleted] · 2022-03-19 15:28

[deleted]

----------------------------------------------------------------------
LionyxML · 2022-03-19 19:02

Great work!

I ve been using frontmacs as my way to develop tsx latelly (I use both
eslinter and tide, plus prettier with per repo configs).

I am happy to see styled components being edited as css and not as
pure strings, how did you do this sort of sourcery? :D

----------------------------------------------------------------------
orzechod · 2022-03-21 02:59

the answer is, I let someone else do it for me :)  a hidden buffer is
created with scss-mode enabled, into which the contents of a CSS-in-JS
tagged template string are copied.  syntax highlighting, indentation,
and autocompletion are all performed in that buffer and the results of
each are copied back into the original, user-visible, buffer.

it works, but it's not great!  once I figure out the syntax for tree-
sitter queries, some of this should get much cleaner.

- [syntax highlighting](https://github.com/orzechowskid/tsx-
mode.el/blob/3b7bf3a1e66e5788b2331cccddfbf7c695922adc/tsx-
mode.el#L214)
- [indentation](https://github.com/orzechowskid/tsx-
mode.el/blob/3b7bf3a1e66e5788b2331cccddfbf7c695922adc/tsx-
mode.el#L324)
- [completion-at-point](https://github.com/orzechowskid/tsx-
mode.el/blob/3b7bf3a1e66e5788b2331cccddfbf7c695922adc/tsx-
mode.el#L382)

thank you for the kind words, and for introducing me to frontmacs.  it
looks very interesting!

----------------------------------------------------------------------
MistakeNotDotDotDot · 2022-04-02 03:27

Oh, I was just lamenting how proper TSX support felt kind of hacky.
Going to try this out!

I think tree-sitter has the potential to change the way Emacs supports
syntax like LSP changed semantics, and your tsi.el looks like a
natural extension of that.