Is there any way to change how prettier formats React code?

Question

I'm trying to learn React and I'm using Prettier as my code formatter. I keep running into the problem where Prettier formats my code in a very unreadable way. For example:

import ExpenseItem from './components/ExpenseItem';

function App() {
  const expenses = [
    {
      id: 'e1',
      title: 'Toilet Paper',
      amount: 94.12,
      date: new Date(2020, 7, 14),
    },
    { id: 'e2', title: 'New TV', amount: 799.49, date: new Date(2021, 2, 12) },
    {
      id: 'e3',
      title: 'Car Insurance',
      amount: 294.67,
      date: new Date(2021, 2, 28),
    },
    {
      id: 'e4',
      title: 'New Desk (Wooden)',
      amount: 450,
      date: new Date(2021, 5, 12),
    },
  ];

  return (
    <div>
      <h2>Let's get started!</h2>
      <ExpenseItem
        title={expenses[0].title}
        amount={expenses[0].amount}
        date={expenses[0].date}
      ></ExpenseItem>
      <ExpenseItem
        title={expenses[1].title}
        amount={expenses[1].amount}
        date={expenses[1].date}
      ></ExpenseItem>
      <ExpenseItem
        title={expenses[2].title}
        amount={expenses[2].amount}
        date={expenses[2].date}
      ></ExpenseItem>
      <ExpenseItem
        title={expenses[3].title}
        amount={expenses[3].amount}
        date={expenses[3].date}
      ></ExpenseItem>
    </div>
  );
}

export default App;

Is formatted like this:

import ExpenseItem from "./components/ExpenseItem";

function App() {
  const expenses =
    [
      {
        id: "e1",
        title:
          "Toilet Paper",
        amount: 94.12,
        date: new Date(
          2020,
          7,
          14
        ),
      },
      {
        id: "e2",
        title:
          "New TV",
        amount: 799.49,
        date: new Date(
          2021,
          2,
          12
        ),
      },
      {
        id: "e3",
        title:
          "Car Insurance",
        amount: 294.67,
        date: new Date(
          2021,
          2,
          28
        ),
      },
      {
        id: "e4",
        title:
          "New Desk (Wooden)",
        amount: 450,
        date: new Date(
          2021,
          5,
          12
        ),
      },
    ];

  return (
    <div>
      <h2>
        Let's
        get
        started!
      </h2>
      <ExpenseItem
        title={
          expenses[0]
            .title
        }
        amount={
          expenses[0]
            .amount
        }
        date={
          expenses[0]
            .date
        }
      ></ExpenseItem>
      <ExpenseItem
        title={
          expenses[1]
            .title
        }
        amount={
          expenses[1]
            .amount
        }
        date={
          expenses[1]
            .date
        }
      ></ExpenseItem>
      <ExpenseItem
        title={
          expenses[2]
            .title
        }
        amount={
          expenses[2]
            .amount
        }
        date={
          expenses[2]
            .date
        }
      ></ExpenseItem>
      <ExpenseItem
        title={
          expenses[3]
            .title
        }
        amount={
          expenses[3]
            .amount
        }
        date={
          expenses[3]
            .date
        }
      ></ExpenseItem>
    </div>
  );
}

export default App;

Any way to change this?

I've looked at the Prettier documentation but can't find which setting it would be and searching for answers on SO but what I found was that Prettier is an opinionated formatter and there isn't a way to change it. In the post I found, it was actually Prettier actually formatted the code in a way that I would like better: https://stackoverflow.com/questions/65632429/how-to-fix-jsx-react-formatting-issue-with-prettier-in-vscode

Is this just due to Prettier being changed over time? The tutorial I'm following also seems to format it in the old way.

Answer 1

I think you need to add a .prettierrc file to the root of your project. One comment already mentioned changed the printWidth in this config file to something higher than default.
Here are 2 links that explain how to create a config file for prettier. https://prettier.io/docs/en/configuration.html
https://prettier.io/docs/en/options.html