有时会应用“prettier”中的“printWidth”选项，但有时则不然

Question

如何重现该现象

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 <></>;
}

为什么会出现这种情况？

Answer 1

printWidth 选项似乎没有按照您想要的方式工作：

Prettier 的 printWidth 选项的工作方式不同。它不是允许的线路长度硬性上限。这是一种向 Prettier 大致表示您希望排队的长度的方式。 Prettier 会制作更短和更长的线条，但通常会努力满足指定的打印宽度。 - 更漂亮的文档

在文档中，它建议了另一种方法来完成您想要的事情，我认为这可能会有所帮助。它建议将 ESLint 与 max-len 选项一起使用，如下所示。
如果您遇到任何问题请告诉我:)