Alignment

  • Follow these alignment styles for JSX syntax. eslint: react/jsx-closing-bracket-location react/jsx-closing-tag-location

    1. // bad
    2. <Foo superLongParam="bar"
    3. anotherSuperLongParam="baz" />
    4. // good
    5. <Foo
    6. superLongParam="bar"
    7. anotherSuperLongParam="baz"
    8. />
    9. // if props fit in one line then keep it on the same line
    10. <Foo bar="bar" />
    11. // children get indented normally
    12. <Foo
    13. superLongParam="bar"
    14. anotherSuperLongParam="baz"
    15. >
    16. <Quux />
    17. </Foo>
    18. // bad
    19. {showButton &&
    20. <Button />
    21. }
    22. // bad
    23. {
    24. showButton &&
    25. <Button />
    26. }
    27. // good
    28. {showButton && (
    29. <Button />
    30. )}
    31. // good
    32. {showButton && <Button />}