microsoft / microsoft/TypeScript

Formatter: indent second operand of intersection operator on next line one indent more

Offen
#56,609 0 Kommentare 0 Reaktionen 0 zugewiesene Personen Auf GitHub ansehen

Dieses Issue hat noch niemand übernommen.

Awaiting More Feedback Domain: Formatter Suggestion
Vorherrschende Sprache
Go
Sterne
111k
Forks
14.4k
Ø Merge
1 T. 19 Std.
Gemergte PRs (30 T.)
117

Beschreibung

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?

Beitragsleitfaden

Beitragsleitfaden öffnen

Erste Schritte

  1. Lies das ganze Issue und danach den Beitragsleitfaden des Projekts.
  2. Schreib ins Issue, dass du es übernimmst — das erspart doppelte Arbeit.
  3. Forke das Repository und arbeite in einem Branch.
  4. Öffne einen Pull Request, der die Issue-Nummer nennt.

Rechercherichtung

Reproduziere die Formatter-Ausgabe mit dem TypeScript/JavaScript-Beispiel im Issue und verfolge anschließend, wie mehrzeilige Typ-Intersections formatiert werden. Vergleiche die aktuelle und die gewünschte Einrückung und füge eine Abdeckung für den gezeigten Fall hinzu; abgeschlossen ist die Aufgabe, wenn der zweite Operand eine Ebene tiefer eingerückt wird, ohne die übrige Formatierung zu ändern.

Vom Indexierungsmodell aus dem Issue-Text verfasst.

Bewertung

Tech-Stack
javascript, typescript
Bereich
tooling
Issue-Typ
Feature
Schwierigkeit
4/5
Geschätzter Aufwand
3-5 Tage
Aktivitätsstatus
Veraltet
Klarheit
Größtenteils klar
Anfängerfreundlichkeit
35/100

Neue Issues direkt in Ihr Postfach

Eine kurze Übersicht über anfängerfreundliche GitHub-Issues.