Skip to content

General JSX Improvements #73

@bspaulding

Description

@bspaulding

Remaining

  • Expand last argument of arrow function
const els = items.map(item => (
  <div className="whatever">
    <span>{children}</span>
  </div>
));

Right now turns to

const els = items.map(
  item => (
    <div className="whatever">
      <span>{children}</span>
    </div>
  )
);
  • Wrong indent for arrow functions inside of {}
<Something>
  {() => (
      <SomethingElse>
        <span />
      </SomethingElse>
    )}
</Something>;
  • single arrays and objects should stay on the same line and not put on the next indent
<View
  style={
    [
      {
        someVeryLongStyle1: "true",
        someVeryLongStyle2: "true"
      }
    ]
  }
/>;

should be

<View
  style={[
    {
      someVeryLongStyle1: "true",
      someVeryLongStyle2: "true"
    }
  ]}
/>;

and

<View
  style={
    {
      someVeryLongStyle1: "true",
      someVeryLongStyle2: "true"
    }
  }
/>;

should be

<View
  style={{
    someVeryLongStyle1: "true",
    someVeryLongStyle2: "true"
  }}
/>;

Fixed

  • Put parenthesis for bracket-less arrow functions
const StatelessComponent = ({ children }) => (
  <div className="whatever">
    <span>{children}</span>
  </div>
);
  • Put parenthesis for return
function StatelessComponent({ children }) {
  return (
    <div className="whatever">
      <span>{children}</span>
    </div>
  );
}
  • Puts parenthesis for variable declaration
const comp4 = (
  <div style={styles} key="something">
    Create wrapping parens and indent <strong>all the things</strong>.
  </div>
);
  • Preserve space between text nodes and jsx elements in a single line
<span>
    foo <span>bar</span>
</span>
  • Properly escape quotes
<div id='"' />;

should turn into

<div id="&quot;" />;
  • Use double quotes for jsx attributes even with --single-quote
<div id="a" />
  • Should print names with . correctly
<route.page />;
  • brackets should be on the same line as the attributes
const MyComponent = (props) => 
    <div>{
        some.very.very.very.very.very.very.very.very.very.very.long.props.text
    }</div>

should be

const MyComponent = props => (
  <div>
    {some.very.very.very.very.very.very.very.very.very.very.long.props.text}
  </div>
);

(Note: the original issue has been replaced with this list of remaining items, so comments below might not make sense)

Metadata

Metadata

Assignees

No one assigned

    Labels

    No labels
    No labels

    Projects

    No projects

    Milestone

    No milestone

    Relationships

    None yet

    Development

    No branches or pull requests

    Issue actions