如何配置Prettier使组件Props保持在单行显示？

嘿，我之前也碰到过一模一样的情况——Prettier总把函数组件的解构参数拆成每行一个，看起来特别啰嗦。其实只要调整几个Prettier的配置项就能搞定，给你两种常用的配置方式：

方法一：通过VSCode全局设置配置 #

1. 打开VSCode的设置面板（快捷键：Windows/Linux用Ctrl+,，Mac用Cmd+,）
2. 在搜索框输入Prettier，找到对应的配置项调整：
   • Print Width：把默认的80改成更大的值（比如120或150），只要你的props总长度没超过这个阈值，就会保持单行显示
   • Trailing Comma：如果你不想保留最后一个props后面的逗号，可以选择none或者es5（es5会在对象/数组里保留尾逗号，但函数参数不会）
   • 确保Single Attribute Per Line是关闭状态（这个主要针对JSX标签属性，顺手检查下也没坏处）

方法二：项目级配置（推荐，团队协作更稳定） #

在项目根目录创建一个.prettierrc（或.prettierrc.json）文件，把下面的配置放进去，整个团队就能共用相同的格式化规则：

{
  "printWidth": 120,
  "trailingComma": "none",
  "singleAttributePerLine": false
}

补充说明： #

• printWidth的数值可以按需调整，要是你经常用长参数，甚至可以设到180，只要单行显示不影响可读性就行
• 如果调整后还是自动换行，说明你的props总长度确实超过了设置的printWidth，这是Prettier的默认逻辑，避免代码过宽
• 目前Prettier没有单独针对函数参数解构的配置项，只能通过调整printWidth来控制换行时机

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