Skip to content

Latest commit

 

History

History
37 lines (32 loc) · 1.22 KB

File metadata and controls

37 lines (32 loc) · 1.22 KB

[HIGHLIGHT]Avoid extra offset in arrow function body when using long types (#11515 by @kachkaev and @thorn0)

Starting with Prettier 2.3.0, type declarations in arrow functions could affect function body indentation. Changing the length of the type annotation could produce large diffs and thus increased the chance of git conflicts. To prevent this, function body offset was stabilized.
Note: This change may affect a large number of lines in your codebase.

// Input
const MyComponentWithLongName: React.VoidFunctionComponent<MyComponentWithLongNameProps> = ({ x, y }) => {
  const a = useA();
  return <div>{x + y + a}</div>;
};

// Prettier 2.2 and below
const MyComponentWithLongName: React.VoidFunctionComponent<MyComponentWithLongNameProps> = ({
  x,
  y,
}) => {
  const a = useA();
  return <div>{x + y + a}</div>;
};

// Prettier stable
const MyComponentWithLongName: React.VoidFunctionComponent<MyComponentWithLongNameProps> =
  ({ x, y }) => {
    const a = useA();
    return <div>{x + y + a}</div>;
  };

// Prettier main
const MyComponentWithLongName: React.VoidFunctionComponent<
  MyComponentWithLongNameProps
> = ({ x, y }) => {
  const a = useA();
  return <div>{x + y + a}</div>;
};