Spacemacsのtypescript-tsx-modeでインデント幅を設定する方法

挙動

• 複数行を選択し = でインデントの実行をした場合には4spaceでインデントされる
• 1行ごとに == でインデントを実行した場合には2spaceでインデントされる。

System Info

• OS: darwin
• Emacs: 27.2
• Spacemacs: 0.300.0
• Spacemacs branch: develop (rev. f5bd49cc8)
• Graphic display: t
• Distribution: spacemacs
• Editing style: hybrid
• Completion: ivy
• Layers:

 lsp
 (javascript :variables js-indent-level 2)
 (html :variables web-mode-code-indent-offset 2 
  web-mode-markup-indent-offset 2 
  web-mode-css-indent-offset 2 
  web-mode-script-padding 2)
 (typescript :variables typescript-indent-level 2)

修正方法

dotspacemacs/user-config に下記を追加。

(with-eval-after-load 'lsp-mode
  (add-to-list 'lsp--formatting-indent-alist '(typescript-tsx-mode . typescript-indent-level)))

調査ログ

• typescript-layer と html-layer を呼び出す場合は .tsx のメジャーモードは typescript-tsx-mode になる
  • typescript-tsx-mode の実態は web-mode
  • https://github.com/syl20bnr/spacemacs/blob/63056ecb50f93808781b97feab1c3225d35c7aa1/layers/%2Blang/typescript/packages.el#L102-L103
• lsp-mode インデントテーブルには typescript-tsx-modeが定義されていないため standard-indent が使用される
  • https://github.com/emacs-lsp/lsp-mode/blob/237363939b2630a807261f31614ac98fad29b785/lsp-mode.el#L5517-L5556
  • standard-indent が 4 になっていたため、4spaceでインデントされていた
• regionを選択後に = した場合、formatする実態は indent-region だった
  • indent-region-function の設定を変更し lsp-mode の関数呼び出しをしない方法でも解決ができそう
  • つまり (setq indent-region-function nil) 的なことをする
  • https://github.com/emacs-lsp/lsp-mode/issues/398