TypeScript: Maybe don't spread overloaded function signature
Nobody has claimed this yet.
- 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
First steps
- Read the whole issue, then the project's contributing guide.
- Comment on the issue to say you are picking it up — it saves two people doing the same work.
- Fork the repository and make your change on a branch.
- 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