Indent JSX in Emacs

2017-03-28 11:54 | Source

emacs
en
jsx
react

I find rjsx-mode annoying when it indents closed html tag with extra spaces.

It's based on js2-mode which is actually just calling Emacs v25 API js-jsx-indent-line.

So the solution is as simple as advice js-jsx-indent-line:

(defadvice js-jsx-indent-line (after js-jsx-indent-line-after-hack activate)
  "Workaround sgml-mode and follow airbnb component style."
  (let* ((cur-line (buffer-substring-no-properties
                    (line-beginning-position)
                    (line-end-position))))
    (if (string-match "^\\( +\\)\/?> *$" cur-line)
      (let* ((empty-spaces (match-string 1 cur-line)))
        (replace-regexp empty-spaces
                        (make-string (- (length empty-spaces) sgml-basic-offset) 32)
                        nil
                        (line-beginning-position) (line-end-position))))))