Skip to content

formatter: Diff with Prettier on trailing comma in generic type parameters in .tsx files #21150

@jsmecham

Description

@jsmecham

Input

const AppWrapper = <Options = any,>({
  appName,
}: {
  appName: string;
}) => null;

const getProps = <T = Record<string, unknown>,>(
  option: T | undefined,
): Partial<T> => ({});

Config

{
  "trailingComma": "es5"
}

Oxfmt output

Oxfmt version: 0.44.0

const AppWrapper = <Options = any>({ appName }: { appName: string }) => null;

const getProps = <T = Record<string, unknown>>(
  option: T | undefined
): Partial<T> => ({});

Oxfmt playground link

https://playground.oxc.rs/?t=formatter&formatterPanels=output,prettier&code=const%20AppWrapper%20%3D%20%3COptions%20%3D%20any%2C%3E%28%7B%0A%20%20appName%2C%0A%7D%3A%20%7B%0A%20%20appName%3A%20string%3B%0A%7D%29%20%3D%3E%20null%3B%0A%0Aconst%20getProps%20%3D%20%3CT%20%3D%20Record%3Cstring%2C%20unknown%3E%2C%3E%28%0A%20%20option%3A%20T%20%7C%20undefined%2C%0A%29%3A%20Partial%3CT%3E%20%3D%3E%20%28%7B%7D%29%3B

Prettier output

Prettier version: 3.8.1

const AppWrapper = <Options = any,>({ appName }: { appName: string }) => null;

const getProps = <T = Record<string, unknown>,>(
  option: T | undefined,
): Partial<T> => ({});

Additional notes

oxfmt removes the trailing comma from single-parameter generic type arguments in .tsx files (e.g. <Options = any,> becomes <Options = any>).

Prettier preserves the trailing comma in this position. The trailing comma convention exists in .tsx files to disambiguate <T> from a JSX opening tag — while the = default already provides disambiguation here, Prettier consistently preserves the comma regardless.

With trailingComma: "es5", both formatters should produce the same output. This difference was found while migrating a codebase from Prettier to oxfmt.

Metadata

Metadata

Assignees

No one assigned

    Labels

    Type

    Priority

    None yet

    Effort

    None yet

    Projects

    No projects

    Milestone

    No milestone

    Relationships

    None yet

    Development

    No branches or pull requests

    Issue actions