如何调整Prettier对React代码的格式化方式？

你遇到的这种极端换行、代码可读性骤降的情况，核心原因是Prettier的printWidth配置值过小，部分格式差异（比如单引号变双引号）也可通过配置修正。以下是具体解决步骤：

1. 调整项目级Prettier配置 #

在项目根目录创建.prettierrc配置文件，写入以下内容：

{
  "printWidth": 100,
  "singleQuote": true,
  "trailingComma": "es5",
  "tabWidth": 2,
  "semi": true
}

关键配置说明： #

• printWidth：控制代码触发换行的宽度阈值，默认是80。如果设得太小（比如30-50），Prettier会强制把紧凑内容拆成多行。设为100-120既能避免不必要的换行，又能保证长代码及时折行。
• singleQuote：强制使用单引号，和你原始代码的风格对齐。
• trailingComma：在数组、对象的最后一个元素后添加逗号，保持格式统一。
• tabWidth：设置缩进为2个空格，符合React项目的通用规范。

2. 检查编辑器配置冲突 #

如果你用VS Code这类编辑器，需确保编辑器的Prettier插件配置未覆盖项目配置：

• 打开编辑器设置，搜索prettier.printWidth，确认值和.prettierrc里的一致。
• 关闭可能冲突的其他格式化插件（比如禁用ESLint的自动格式化，确保Prettier是默认的代码格式化工具）。

3. 版本差异说明 #

Prettier的核心格式化逻辑在大版本更新中确实有微调，但默认的printWidth一直保持为80，不会出现你示例中这种极端换行的情况。更大可能是你当前的项目配置或编辑器配置被修改过，而非版本本身的问题。

调整后效果示例 #

用上述配置格式化你的代码后，会回到接近你原始代码的紧凑风格：

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;

内容的提问来源于stack exchange，提问作者bit07123