使用Prettier printWidth时如何保持代码可读性？

1. 拆分类型定义为接口/类型别名 #

把构造函数的options参数类型抽成独立的接口或类型别名，Prettier会自动保持接口内部的换行格式，同时不影响全局printWidth的设置。

示例：

interface ConstructorOptions {
  attr: Logger;
  url: string;
  someNumber: number;
  type: string;
}

public constructor(options: ConstructorOptions) {
  // 业务逻辑
}

这种方式不仅解决了换行可读性问题，还提升了类型的可复用性，该类型可在其他场景重复引用。

2. 手动添加初始换行触发Prettier换行逻辑 #

Prettier会尊重代码中已有的换行结构，你可以在对象类型的左大括号后手动换行，Prettier通常会保留后续的多行格式：

public constructor(options: {
  attr: Logger;
  url: string;
  someNumber: number;
  type: string;
}) {
  // 业务逻辑
}

适合不需要复用类型的场景，无需额外定义，直接通过初始换行让Prettier维持多行结构。

3. 调整Prettier的相关格式配置 #

无需全局修改printWidth，可以调整以下配置辅助维持可读性：

• 将bracketSameLine设为false（Prettier 2.4+版本默认值），让对象的闭合括号单独一行，配合手动初始换行更易保持多行格式
• 确保objectLiteralSpacing设为true，维持对象内部的空格规范

修改.prettierrc示例：

{
  "printWidth": 140,
  "bracketSameLine": false,
  "objectLiteralSpacing": true
}

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