microsoft / microsoft/TypeScript
Formatter: indent second operand of intersection operator on next line one indent more
Nobody has claimed this yet.
- Dominant language
- Go
- Stars
- 111k
- Forks
- 14.3k
- Avg merge
- 1d 19h
- Merged PRs (30d)
- 117
Description
I use "vscode.typescript-language-features" as my default JS/TS formatter, and when formatting long lines, the indentation could be improved.
As an example, this is the resulting code after "vscode.typescript-language-features":
const Label = React.forwardRef<
React.ElementRef<typeof LabelPrimitive.Root>,
React.ComponentPropsWithoutRef<typeof LabelPrimitive.Root> &
VariantProps<typeof labelVariants> // <= This line isn't sufficiently indented.
>(({ className, ...props }, ref) => (
<LabelPrimitive.Root
className={cn(labelVariants(), className)}
ref={ref}
{...props}
/>
));
Please note that the 4th line isn't indented deeper.
What would be visually clearer would be:
const Label = React.forwardRef<
React.ElementRef<typeof LabelPrimitive.Root>,
React.ComponentPropsWithoutRef<typeof LabelPrimitive.Root> &
VariantProps<typeof labelVariants> // <= This line indented deeper.
>(({ className, ...props }, ref) => (
<LabelPrimitive.Root
className={cn(labelVariants(), className)}
ref={ref}
{...props}
/>
));
Is there a way to wrap them in a way that the result looks like the second snippet?
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
Reproduce the formatter output using the TypeScript/JavaScript example in the issue, then trace how multiline type intersections are formatted. Compare the current and requested indentation and add coverage for the shown case; done means the second operand is indented one level deeper without changing unrelated formatting.
Written by the indexing model from the issue text.
Assessment
- Tech stack
- javascript, typescript
- Domain
- tooling
- Issue type
- Feature
- Difficulty
- 4/5
- Estimated time
- 3-5 days
- Activity status
- Stale
- Clarity
- Mostly clear
- Newbie friendliness
- 35/100