prettier / prettier/prettier

TypeScript: Maybe don't spread overloaded function signature

Open
#3,678 3 comments 5 reactions 0 assignees View on GitHub

Nobody has claimed this yet.

difficulty:hard lang:typescript
Dominant language
JavaScript
Stars
52.3k
Forks
5k
Avg merge
19h 2m
Merged PRs (30d)
117

Description

This issue is kind of a suggestion and call for feedback at the same time. I think I'm not alone with my impression, but I can only guess. :)


Every now and then it bugs me how Prettier formats overloaded functions in TypeScript.

Take the following example:

Prettier 1.9.2
Playground link

--parser typescript
--no-semi
--single-quote

Input:

class ContextClass {
  public on (event: 'error', listener: (event: ProjectErrorEvent) => void): this
  public on (event: 'warning', listener: (event: ProjectWarningEvent) => void): this
  public on (event: 'debug', listener: (event: ProjectDebugEvent) => void): this
  public on (event: 'log', listener: (event: ProjectLogEvent) => void): this
  public on (event: 'progress', listener: (event: ProjectProgressEvent) => void): this
  public on (event: ProjectEventType, listener: (event: any) => void) {
    this.eventBus.on(event, listener)
    return this
  }
}

Output:
Besides the inconsistently spreaded declarations not being too pleasing for the eye, I think we can agree on the result also being way harder to grasp than the original:

class ContextClass {
  public on(event: 'error', listener: (event: ProjectErrorEvent) => void): this
  public on(
    event: 'warning',
    listener: (event: ProjectWarningEvent) => void
  ): this
  public on(event: 'debug', listener: (event: ProjectDebugEvent) => void): this
  public on(event: 'log', listener: (event: ProjectLogEvent) => void): this
  public on(
    event: 'progress',
    listener: (event: ProjectProgressEvent) => void
  ): this
  public on(event: ProjectEventType, listener: (event: any) => void) {
    this.eventBus.on(event, listener)
    return this
  }
}

Expected behavior:

Disclaimer: Sanity of suggestions below significantly depend on how rigorously Prettier aims to respect the configured print width.

Prettier imho should consider increasing the bar for spreading the signature of overloaded functions across multiple lines. So, the boiled down suggestion is this:

If overloaded function declarations are meant to be visually aligned, Prettier should increase the tolerance for exceeding the print width.

A reasonable indicator if declarations "are meant to be visually aligned" could be if they share the same name with different types for the first argument(s).


What do you think?

Contributor guide

Open the contributing guide

First steps

  1. Read the whole issue, then the project's contributing guide.
  2. Comment on the issue to say you are picking it up — it saves two people doing the same work.
  3. Fork the repository and make your change on a branch.
  4. Open a pull request that references the issue number.

Research direction

Start with the linked Prettier Playground and the TypeScript input/output example; the issue names no source file or test. Done means deciding whether the alignment heuristic is acceptable and demonstrating the chosen formatting behavior for overloaded declarations, including the shown case.

Written by the indexing model from the issue text.

Assessment

Tech stack
javascript, typescript
Domain
tooling
Issue type
Feature
Difficulty
5/5
Estimated time
Over a week
Activity status
Stale
Clarity
Mostly clear
Newbie friendliness
35/100

Get new issues in your inbox

A short digest of beginner-friendly GitHub issues.