Thanks to visit codestin.com
Credit goes to github.com

Skip to content

Add option to opt out of HTML inline event attribute formatting (breaks Salesforce Aura / non-standard HTML dialects) #18890

@bob-laz

Description

@bob-laz

Prettier v3.8.1 (was introduced in 3.7.0, 3.6.2 works as expected)
Playground link

--parser html

Input:

<button onclick="{!c.submit}">

Output:

<button
  onclick="
    {
      !c.submit;
    }
  "
></button>

Expected output:

<button onclick="{!c.submit}">

Why?

Salesforce Aura components — code-breaking

Aura uses a proprietary expression binding syntax {! expr } inside event handler attributes:

<!-- Source (.cmp file) -->
<lightning:button onclick="{!c.submitDetails}" label="OK" />

Prettier 3.7.0+ feeds the attribute value to Babel, which parses { as a JavaScript block statement and !c.submitDetails as a logical-NOT expression. A semicolon is injected and the Aura binding is destroyed:

<!-- After prettier 3.7.0 — RUNTIME BROKEN -->
<lightning:button
    onclick="
        {
            !c.submitDetails;
        }
    "
    label="OK"
/>

Salesforce cannot interpret this value as an expression reference at runtime. Every formatted component throws an error.

Why the existing {{ escape hatch doesn't help

The guard introduced in #17909 skips formatting when the attribute value contains {{:

s(e.fullName) && !t.parentParser && !e.value.includes("{{")

This was designed for Vue / Angular template syntax. Aura uses {! (not {{), so it is not protected.

embeddedLanguageFormatting: "off" has no effect

This option was tested and confirmed not to suppress the behavior. The event attribute formatting is wired directly into the HTML attribute printer, not routed through the embedded-language-formatting subsystem.

Change introduced in: #17909


Proposed solution

Add a configuration option that allows users to opt out:

{
  "htmlEventAttributeFormatting": "off"
}

Or adopt a parser-agnostic approach — skip formatting when Babel cannot cleanly round-trip the attribute value (i.e. when print(parse(value)) !== normalise(value)).


Workaround

None available without pinning to <=3.6.2 or dropping prettier coverage for the affected file types entirely (via .prettierignore).


Additional context

  • Affected file types: .cmp, .app, .page, .component (and any other HTML-variant format that uses non-{{ expression syntax)
  • The {{ escape hatch in the current implementation shows that opt-out logic is already conceptually present — it just needs to be surfaced as a user-facing option
  • Related: the Vue event binding path has isVueEventBindingFunctionExpression guards to handle edge cases; Aura has no equivalent mechanism available to users

Metadata

Metadata

Assignees

No one assigned

    Labels

    lang:htmlIssues affecting HTML (and SVG but not JSX)

    Type

    No type

    Projects

    No projects

    Milestone

    No milestone

    Relationships

    None yet

    Development

    No branches or pull requests

    Issue actions