React中使用Prettier保存时如何自动将组件props拆分为多行

要实现保存时自动把单行编写的组件 props 拆分为多行展示，按以下步骤配置即可：

• 首先确认项目依赖的 Prettier 版本不低于 2.3.0，版本过低的话可以执行 npm install prettier@latest -D 升级
• 找到项目根目录下的 Prettier 配置文件（常见文件名：.prettierrc、.prettierrc.js、.prettierrc.json），新增/修改以下两个配置项：
  1. singleAttributePerLine：设为 true 后，只要组件存在2个及以上属性，就会强制每个属性单独占一行，完全匹配需求
  2. printWidth：可根据编码习惯调整单行代码最大宽度，比如设为60，当单行代码长度超过这个阈值时也会自动触发换行
• 示例完整配置参考（以.prettierrc为例，原有其他配置可直接保留）：

{
  "singleAttributePerLine": true,
  "printWidth": 60,
  "singleQuote": true,
  "semi": false,
  "trailingComma": "es5"
}

• 如果你用 VSCode 开发，可额外在项目的.vscode/settings.json中添加以下配置，确保 Prettier 是当前项目的默认格式化工具且保存自动格式化生效：

{
  "editor.defaultFormatter": "esbenp.prettier-vscode",
  "editor.formatOnSave": true
}

配置完成后重启 VSCode 或者执行「重新加载窗口」命令，再保存代码时即可自动将<A key={id} image={avatar} username={username} />这类单行props代码，转换为每行一个属性的多行格式。

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