prettier-plugin-hug-call-arguments weekly downloads statistics

prettier-plugin-hug-call-arguments

[![license][license-src]][license-href] [![npm version][npm-version-src]][npm-version-href] [![npm downloads][npm-downloads-src]][npm-downloads-href] [![CI][ci-src]][ci-href]

Fixes prettier/prettier#11080.

Usage

Requires Prettier 3.x as a peer dependency.

Add it to your Prettier config (.prettierrc, .prettierrc.json, prettier.config.js, or the "prettier" key in package.json):

No other options — it works automatically wherever Prettier already formats JS/JSX/TS/TSX with the estree printer (the babel, babel-ts, and typescript parsers). Nothing to configure, and every case it doesn't recognize is left to Prettier's own formatting untouched.

Examples

Prettier hugs the last argument of a call when it's a function/object/array literal:

...but not when that literal is wrapped in another call, which is a very common pattern for middleware wrappers (Express catchAsync, error boundaries, decorators-as-functions, etc.):

It also flattens method chains instead of breaking every .method() onto its own line — a common look with query builders:

How it works

This plugin wraps Prettier's built-in estree printer and only overrides the print step for CallExpression, ArrayExpression, ObjectExpression, ConditionalExpression, and ArrowFunctionExpression nodes that match one of a few narrow, specific shapes.

Preserving a layout you already chose:

Prettier already does this for object literals by default (`objectWrap: "preserve"): write {` with a newline before the first property and it stays multi-line, even if it would fit on one line. This plugin extends that same "respect how the author wrote it" behavior to call arguments, array elements, and arrow function parameter lists, which Prettier doesn't normally preserve — those always auto-collapse to fit printWidth regardless of the original formatting.

• a list is split one item per line when there's a newline anywhere between its *own* items — right after the opening (/[/{, between two items, or right before the closing bracket — and at least two items. Objects get the same rule, extending Prettier's own "newline before the first key" check • newlines *inside* an item never count: every list decides for itself. A list written on one line stays on that line even when one of its items splits, and only that item breaks:

The same applies to a ternary written on one line (a ? foo([\n...\n]) : null). Either one falls back to Prettier's own layout when even its opening line wouldn't fit printWidth • takes priority over every other feature below: a layout you explicitly chose is never fought by this plugin's own hugging heuristics • bails on comments anywhere in the list, a sparse array, TS type arguments/parameters, or (for parameters) anything but a plain arrow function — a function expression/declaration has a name and block body to reproduce too, which is more than this narrow check takes on

Hugging a call-wrapped callback:

• the callee is a plain identifier or non-computed member chain (foo, a.b.c) — chained calls (a().b()) are left untouched • either the *last* argument is itself a call whose own last argument is a function/object/array literal (looked through recursively, so a chain of wrappers like a(b(cb)) is still found — the common catchAsync(cb) case), or, for a 2-argument call whose second argument is short and simple (a literal or identifier), the *first* argument is such a wrapping call (the lodash-style uniqueBy(collection, "key") shape) • the resulting line actually fits printWidth; if it doesn't (most often because a wrapping call itself sits inside *another* wrapping call), this falls back to Prettier's default printing for the outer call — inner calls still get their own independent chance to hug once Prettier places them at their own, shallower indentation • there's no blank line between arguments, no comments on the relevant nodes, and no TS type arguments

Hugging a call whose sole argument needs it:

• the call has exactly one argument, and it's directly an object or array literal that needs multi-line printing • Prettier already hugs this shape reliably *in isolation*, but its own "does the opening line fit" check can still give up and break the call's own parens too once this plugin has fused several outer layers together (pushing the real column deeper than Prettier expected) — there's essentially never a readability win to that fallback over just hugging directly, so this always does instead

Hugging an arrow function's concise body:

• the arrow has a concise (non-block) body, no type parameters, return type, or predicate, and default arrowParens • the body is a CallExpression that needs multi-line printing (Prettier already hugs directly after => for other body types — objects, arrays, JSX, template literals — so there's no gap to fix there) • the resulting line fits printWidth; otherwise this falls back to Prettier's default (a hardline after =>, body indented on its own line). The arrow's own parameter list can still break onto its own line first the normal way — only the => body boundary is affected

Flattening a method chain:

• every link is a plain, non-optional .name(...) or expr call down to a simple base (an identifier, this, or a non-computed member chain) • each link's own arguments are printed exactly as Prettier would print them standalone — a single object/array/function argument hugs the parens, a multi-argument list breaks onto its own lines only if it doesn't fit — so any number of links can break independently, correctly, with no special casing needed • the whole flattened candidate is still rendered and measured against printWidth as a final check (catching the one thing per-link breaking can't: many short, individually-fitting links whose *combined* length still overflows); if any line would overflow, it falls back to Prettier's normal chain layout…

Description from the npm listing.