Prettier的printWidth选项时而生效时而失效的原因咨询

1. 在VSCode中安装「Prettier - Code formatter」扩展
2. 创建 .prettierrc 文件，内容如下：

{
  "tabWidth": 2,
  "singleQuote": true,
  "printWidth": 400,
  "trailingComma": "es5",
  "semi": true,
  "bracketSpacing": true,
  "bracketSameLine": false,
  "jsxBracketSameLine": true
}

注意：已将printWidth选项设置为400

3. 创建 .vscode/settings.json 文件，内容如下：

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

printWidth选项正常生效的场景 #

-- 原始代码

export default function Page() {
  const menu = [{ name: 'hong', age: 11 }, { name: 'gil', age: 22 }, { name: 'gil' }];
  return <>;</>;
}

-- 保存后（自动格式化）

export default function Page() {
  const menu = [{ name: 'hong', age: 11 }, { name: 'gil', age: 22 }, { name: 'gil' }];
  return <>;</>;
}

printWidth选项失效的场景 #

-- 原始代码

export default function Page() {
  const menu = [{ name: 'hong', age: 11 }, { name: 'gil', age: 22 }];
  return <>;</>;
}

-- 保存后（自动格式化）

export default function Page() {
  const menu = [
    { name: 'hong', age: 11 },
    { name: 'gil', age: 22 },
  ];
  return <>;</>;
}

问题 #

请问出现这种现象的原因是什么？

这是Prettier数组格式化的特殊规则导致的：

1. printWidth只是Prettier判断是否换行的最大阈值，而非强制不换行的绝对标准，它会结合代码结构、可读性做综合判断。
2. 当数组内只有2个对象元素时，Prettier认为换行后可读性更优，会强制触发换行格式化，哪怕当前行长度远小于设置的400。
3. 当数组元素增加到3个时，Prettier计算后认为单行展示仍在可读范围内，因此保留了单行格式，就出现了你看到的两种不同结果。

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