如何配置Prettier使HTML/JSX属性在指定长度内同行显示？

要实现短属性同行、长属性单独换行的效果，你只需要调整Prettier的两个核心配置项：

关键配置说明 #

• printWidth：定义一行代码的最大字符长度，默认是80。你可以根据需求调整这个值（比如设为120），决定属性行什么时候需要换行。
• wrapAttributes：必须设置为"auto"。这个选项会让Prettier自动判断：如果属性行的总长度不超过printWidth，就把多个短属性合并到同一行；如果总长度超出限制，就自动换行，且较长的属性会单独占一行。

配置文件示例 #

你可以在项目根目录的.prettierrc（JSON格式）或prettier.config.js（JS格式）中添加以下配置：

JSON格式（.prettierrc） #

{
  "printWidth": 120,
  "wrapAttributes": "auto",
  "singleQuote": true,
  "trailingComma": "es5"
}

JS格式（prettier.config.js） #

module.exports = {
  printWidth: 120,
  wrapAttributes: "auto",
  singleQuote: true,
  trailingComma: "es5"
};

效果验证 #

配置完成后，你示例中的代码会被Prettier格式化成像这样：

<TextField
  name="message" variant="outlined" label="Message" fullWidth value={postData.message}
  onChange={(e) => setPostData({ ...postData, message: e.target.value })}
/>

短属性因为总长度未超过printWidth限制被合并到同一行，而较长的onChange属性单独换行，完全符合你的期望。

补充提示 #

• 如果觉得合并后的属性行还是太长，可以适当调小printWidth的值；反之如果想让更多短属性同行，可以调大这个值。
• 注意不要把wrapAttributes设为"force-expand-multiline"（这是默认值），否则会强制每个属性单独换行，就是你当前遇到的问题。

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