JSX indentation not working

[stevejordan]

Hi there,

Really appreciate your efforts here to provide a decent editing JSX/TSX environment for emacs.

I have tried to setup the package according to the README.md instructions, but am seeing some unusual behaviour with indentation in the JSX portions of my files.

If I start with:

function TestComponent() {
    return (
        <>
            <FormControl></FormControl>
            <FormControl></FormControl>
        </>
    )
}

Then mark the whole buffer and call indent-region I end up with this:

function TestComponent() {
    return (
        <>
        <FormControl></FormControl>
        <FormControl></FormControl>
        </>
    )
}

C-h v js-indent-level

js-indent-level is a variable defined in ‘js.el’.

Its value is 4

Is this a general issue or something my end?

[llemaitre19]

Hi @stevejordan ,

Really appreciate your efforts here to provide a decent editing JSX/TSX environment for emacs.

Thanks !

Is this a general issue or something my end?

There is no known bug related to your issue, so maybe there is something wrong in your configuration. Could you share the part related to jtsx ? Also, are you sure you installed the javascript Tree-sitter language ? (if not please follow this guide).

[stevejordan]

Sure, relevant part of my emacs init file has this (taken from the README):

(use-package jtsx
  :ensure t
  :mode (("\\.jsx?\\'" . jtsx-jsx-mode)
         ("\\.tsx\\'" . jtsx-tsx-mode)
         ("\\.ts\\'" . jtsx-typescript-mode))
  :commands jtsx-install-treesit-language
  :hook ((jtsx-jsx-mode . hs-minor-mode)
         (jtsx-tsx-mode . hs-minor-mode)
         (jtsx-typescript-mode . hs-minor-mode))
  :custom
  ;; Optional customizations
  ;; (js-indent-level 2)
  ;; (typescript-ts-mode-indent-offset 2)
  (jtsx-switch-indent-offset 4)
  ;; (jtsx-indent-statement-block-regarding-standalone-parent nil)
  ;; (jtsx-jsx-element-move-allow-step-out t)
  ;; (jtsx-enable-jsx-electric-closing-element t)
  ;; (jtsx-enable-electric-open-newline-between-jsx-element-tags t)
  ;; (jtsx-enable-jsx-element-tags-auto-sync nil)
  ;; (jtsx-enable-all-syntax-highlighting-features t)
  :config
  (defun jtsx-bind-keys-to-mode-map (mode-map)
    "Bind keys to MODE-MAP."
    (define-key mode-map (kbd "C-c C-j") 'jtsx-jump-jsx-element-tag-dwim)
    (define-key mode-map (kbd "C-c j o") 'jtsx-jump-jsx-opening-tag)
    (define-key mode-map (kbd "C-c j c") 'jtsx-jump-jsx-closing-tag)
    (define-key mode-map (kbd "C-c j r") 'jtsx-rename-jsx-element)
    (define-key mode-map (kbd "C-c <down>") 'jtsx-move-jsx-element-tag-forward)
    (define-key mode-map (kbd "C-c <up>") 'jtsx-move-jsx-element-tag-backward)
    (define-key mode-map (kbd "C-c C-<down>") 'jtsx-move-jsx-element-forward)
    (define-key mode-map (kbd "C-c C-<up>") 'jtsx-move-jsx-element-backward)
    (define-key mode-map (kbd "C-c C-S-<down>") 'jtsx-move-jsx-element-step-in-forward)
    (define-key mode-map (kbd "C-c C-S-<up>") 'jtsx-move-jsx-element-step-in-backward)
    (define-key mode-map (kbd "C-c j w") 'jtsx-wrap-in-jsx-element)
    (define-key mode-map (kbd "C-c j u") 'jtsx-unwrap-jsx)
    (define-key mode-map (kbd "C-c j d") 'jtsx-delete-jsx-node)
    (define-key mode-map (kbd "C-c j t") 'jtsx-toggle-jsx-attributes-orientation)
    (define-key mode-map (kbd "C-c j h") 'jtsx-rearrange-jsx-attributes-horizontally)
    (define-key mode-map (kbd "C-c j v") 'jtsx-rearrange-jsx-attributes-vertically))

  (defun jtsx-bind-keys-to-jtsx-jsx-mode-map ()
    (jtsx-bind-keys-to-mode-map jtsx-jsx-mode-map))

  (defun jtsx-bind-keys-to-jtsx-tsx-mode-map ()
    (jtsx-bind-keys-to-mode-map jtsx-tsx-mode-map))

  (add-hook 'jtsx-jsx-mode-hook 'jtsx-bind-keys-to-jtsx-jsx-mode-map)
  (add-hook 'jtsx-tsx-mode-hook 'jtsx-bind-keys-to-jtsx-tsx-mode-map))

(setq-default js-indent-level 4)

Also, are you sure you installed the javascript Tree-sitter language ?

Yes:

~/code ❯ ls ~/.emacs.d/tree-sitter
libtree-sitter-clojure.dylib        libtree-sitter-markdown_inline.dylib
libtree-sitter-javascript.dylib     libtree-sitter-typescript.dylib

I did discover this curiosity while trying to debug. If I call treesit-inspect-node-at-point at different points:

[llemaitre19]

It seems to come from a bug in the recent Javascript Tree-sitter language. If you compile an older release (maybe v0.20.4) you should get rid of the indentation issue.

I will look deeper at this issue within the next days, to have a better understanding of the problem, fill an issue on the Javascript Tree-sitter project side if necessary and document it in this repository.

[llemaitre19]

For information, the test suite of this project should currently fail because of this bug. Last success of the tests was on last month, so actually using the v0.21.3 should be enough.

[stevejordan]

Using the older grammar has fixed it for me, thanks for your support.

For others interested in one way to achieve installing an older version, this is how I did it:

;; force an older js language grammar until jsx indentation is fixed
(add-to-list
 'treesit-language-source-alist
 (cons 'javascript
       '("https://github.com/tree-sitter/tree-sitter-javascript"
         "v0.21.3"
         "src")))
(treesit-install-language-grammar 'javascript)

I’ll leave this issue open if you need something to link an upstream issue to. Feel free to close it if that isn’t useful.

[llemaitre19]

Using the older grammar has fixed it for me, thanks for your support.

Nice.

For others interested in one way to achieve installing an older version, this is how I did it

Thank you for sharing this.

I’ll leave this issue open if you need something to link an upstream issue to. Feel free to close it if that isn’t useful.

Yes it is better to let it opened for visibility reasons. even if it is not directly a bug in this project.

[llemaitre19]

There is already an issue opened for that bug.

TSX tree-sitter language should also be concerned by the issue.

[llemaitre19]

The tree-sitter-javascript issue is now closed and a new release has been published (0.23.0).

Hence this indentation bug is now fixed. But 4 tests are still failing with this new release. I will investigate to know whether it is related to this issue or not.

[llemaitre19]

But 4 tests are still failing with this new release. I will investigate to know whether it is related to this issue or not.

A new issue is opened.