EmacsでReactアプリを書こうとして、tsxに対応したmodeが入っていないことに気づいた。 検索してみると、定番の設定があるわけではなさそうで、皆苦労していそうなことがわかった。web-modeを使ったり、mmm-modeを組み合わせたりするのがポピュラーなようだ。

さらに検索していてtsx-mode.elというそのものずばりな名前のものを見つけた。開発開始からまだ一年ちょっとと新しい。lsp-modeにも対応しているし、まずはこれを使ってみることにした。まだMELPAなどには入っていないようなので、久しぶりにsite-lispを作ってそこにインストールした。

mkdir ~/.emacs.d/site-lisp
cd ~/.emacs.d/site-lisp
git clone git@github.com:orzechowskid/tsx-mode.el.git
git clone git@github.com:orzechowskid/tsi.el.git

init.elへの追加は以下のとおり。

;;; tsx-mode-dependency
(use-package tree-sitter)
(use-package tree-sitter-langs)
(use-package coverlay)
(use-package origami)
(use-package graphql-mode)
(add-to-list 'load-path (expand-file-name "~/.emacs.d/site-lisp/tsi.el"))
;;; tsx-mode
(when (file-exists-p "~/.emacs.d/site-lisp/tsx-mode.el/tsx-mode.el")
  (add-to-list 'load-path (expand-file-name "~/.emacs.d/site-lisp/tsx-mode.el"))
  (require 'tsx-mode)
  (add-to-list 'auto-mode-alist '("\\.tsx\\'" . tsx-mode))
  (add-to-list 'auto-mode-alist '("\\.jsx\\'" . tsx-mode)))