GNU bug report logs -
#24896
JSX prop indentation after fat arrow
Previous Next
Full log
Message #5 received at submit <at> debbugs.gnu.org (full text, mbox):
[Message part 1 (text/plain, inline)]
(Preemptive apologies if this is the wrong list/format for this comment --
first time filer here!)
When indenting JSX code using js2- or js-mode, the indentation function
gets confused when there's a fat arrow function in a JSX prop. Compare the
way the following two code blocks are auto-indented:
const Component = props => ( // Incorrect indentation
<FatArrow a={e => c}
b={123}>
</FatArrow>
);
const Component = props => ( // Correct indentation
<NoFatArrow a={123}
b={123}>
</NoFatArrow>
);
I've tracked the problem down to `sgml-calculate-indent' using
`parse-partial-sexp' with `sgml-tag-syntax-table', where `>' is treated as
a close-parenthesis character (and thus the end-of-tag marker). I don't
think there's a way to patch the syntax table that would let `>' flip
between punctuation and close-parens based on context, but one possible fix
when using js2-mode (not sure about js-mode) is to apply a "."
'syntax-table text property to the `>' when parsing a fat arrow.
Unfortunately, `js-jsx-indent-line' calls `sgml-indent-line' using
`js--as-sgml', which sets `parse-sexp-lookup-properties' to nil.
Would there be any harm in setting `parse-sexp-lookup-properties' to t
instead? As far as I can tell, js-mode and js2-mode only use 'syntax-table
propeties for regex literals.
As a side-note, there may well be a different solution to this problem; I
still don't understand why the following block is indented correctly:
const Component = props => (
<WithRegex a={/>/}
b={123}>
</WithRegex>
);
[Message part 2 (text/html, inline)]
This bug report was last modified 5 years and 352 days ago.
Previous Next
GNU bug tracking system
Copyright (C) 1999 Darren O. Benham,
1997,2003 nCipher Corporation Ltd,
1994-97 Ian Jackson.