Improve typescript-tsx-mode

[otavioschwanck]

Describe your request

Today, the rjsx mode is far superior than typescript-tsx-mode. Typescript is super popular and have a lot of flaws on doom:

Must do:

• The tag system from rjsx is billion times superior than the typescript-tsx-mode (that is the same of web-mode). The divergence in how to manage tags in the two modes is very bad. compare rjsx and typescript-tsx-mode to see.

• If you have any snippet on web-mode with the same name on typescript-tsx-mode, you just can use the web-mode snippet.

Good to do:

• LSP is very slow in typescript for some reason. i compare to neovim with CoC, to show a argument on autocomplete, took less the 0.3s on neovim, in emacs, took 2~5s.

Briefly explain its use-case

Just a javascript and typescript developer

[hlissner]

Unfortunately, a fix won't come from Doom. You'll need to poke the typescript-mode project for TSX support (see emacs-typescript/typescript.el#4), or rjsx-mode for Typescript support. Doom only uses what's available and web-mode was the only game in town.

tsx-mode.el did recently appear, however. You could try that. It's hacky and over-dependent design makes it less than ideal, but I may end up using it for Doom as a stopgap.

[jacksonludwig]

Is there any plan to implement tsx-mode.el as an option for js/ts at this point? It's been a while but I think it is still the best option, even though it is not ideal.

Thanks.

[Smona]

I have been using tsx-mode with doom for several weeks now, and with the exception of auto-formatting with prettier everything has worked fantastically. It's a big improvement over the current typescript-tsx-mode.

Many of the dependencies are for commands that I haven't used and tsx-mode works just fine without them if you don't trigger those commands. Perhaps the module could be included with a limited interface if introducing too many dependencies is the main concern?

[JulienTant]

I have been using tsx-mode with doom for several weeks now, and with the exception of auto-formatting with prettier everything has worked fantastically. It's a big improvement over the current typescript-tsx-mode.

Many of the dependencies are for commands that I haven't used and tsx-mode works just fine without them if you don't trigger those commands. Perhaps the module could be included with a limited interface if introducing too many dependencies is the main concern?

Hey @Smona would you mind sharing how you've set this up? 💙

[Smona]

@JulienTant sure!

;; In packages.el

;; Set up tsx-mode
(package! tsi :recipe (:host github :repo "orzechowskid/tsi.el" :branch "main"))
(package! coverlay)
(package! origami)
(package! tsx-mode :recipe (:host github :repo "orzechowskid/tsx-mode.el" :branch "master"))

;; In config.el

(use-package! tsx-mode
        :config
        (setq auto-mode-alist (delete '("\\.tsx\\'" . typescript-tsx-mode) auto-mode-alist))
        (add-to-list 'auto-mode-alist '("\\.tsx\\'" . tsx-mode)))

I am not sure if coverlay and origami are absolutely required; I haven't tested without them. But tsi should be a hard requirement.

I also tried the following to get formatting working, without success. I'm certainly no expert with doom or elisp, so any help getting that working would be much appreciated.

(setq-hook! 'tsx-mode-hook +format-with 'prettier)

[cmetz]

I also tried the following to get formatting working, without success. I'm certainly no expert with doom or elisp, so any help getting that working would be much appreciated.

(setq-hook! 'tsx-mode-hook +format-with 'prettier)

I also was struggling to get this working. using +format-with is broken like mentioned here #6218

i fixed that issue locally so i can use +format-with, maybe I'll create a pull request that will address this. however, you can also do something like this and define your own formatter:

(use-package! tsx-mode
  :config
  (setq auto-mode-alist (delete '("\\.tsx\\'" . typescript-tsx-mode) auto-mode-alist))
  (add-to-list 'auto-mode-alist '("\\.tsx\\'" . tsx-mode))
  (set-formatter! 'tsx-prettier '("prettier" "--parser" "typescript") :modes '(tsx-mode)))

I'm quite new to the emacs / elisp world, but it seems that doom emacs is using an old format-all-the-code version which is not aware of the tsx-mode and it seems that newer version of that lib now handle language detection differently and not only via major modes.

[dschrempf]

Not sure if this helps, but I think there has been a lot of change with respect to TypeScript support in Emacs. I recommend having a look at https://merrick.luois.me/posts/typescript-in-emacs-29.

tl;dr: Use typescript-ts-mode with built-in tree sitter. Easy to set up and works quite well.