如何配置Prettier让长行链式函数换行而非拆分函数参数

解决方案 #

Prettier 原生适配方案 #

Prettier 本身没有直接的配置项可以强制优先拆分链式调用而非函数参数，但可以通过以下方式实现需求：

• 手动在首个方法调用末尾加换行：只要你在写代码时在src(...)调用结束后手动换行再写.pipe(...)，Prettier会保留这个链式换行的格式，不会强行合并代码后拆分函数参数。
• 调整基础配置降低参数拆分概率：
  • 适当调大printWidth配置值，默认值为80，可调整为100~120，让单行能容纳更长的src(...)调用内容，避免触发参数拆分逻辑
  • 配置bracketSameLine: true，减少括号换行带来的额外空间占用，降低触发单行长度阈值的概率

搭配ESLint实现自动格式化 #

如果不想手动干预换行，可以搭配ESLint规则自动实现要求的格式：

1. 安装ESLint及对应规则依赖
2. 在ESLint配置中添加如下规则，强制链式调用换行：

{
  "rules": {
    "newline-per-chained-call": ["error", { "ignoreChainWithDepth": 2 }]
  }
}

3. 使用prettier-eslint作为格式化工具，格式化时会先执行ESLint规则修正链式调用换行，再执行Prettier的格式化逻辑，最终得到你需要的格式。

替代格式化工具 #

如果不想使用Prettier+ESLint的组合，可以使用灵活性更高的格式化工具：

• Biome（原Rome）：Rust开发的高性能JS/TS全链路工具，内置格式化支持自定义链式调用的换行优先级，可直接配置为优先拆分链式调用而非函数参数，兼容大部分Prettier的格式规则，迁移成本低。
• ESLint Stylistic：完全基于ESLint规则实现代码格式化，所有格式逻辑都可以通过自定义规则调整，完全满足定制化格式化需求。

内容的提问来源于stack exchange，提问作者Renaud is Not Bill Gates