Search code examples
pluginsprettier

How do I disable a prettier plugin?


We are working on a Salsforce project that includes flows. Because of this, we get permission set files that include the <flow> tag. prettier apparently has a plugin for (I think) the Flow static type checker, which we don't use. But because of this plugin, prettier interprets the <flow> tag as containing an embedded language. So this:

<flow>Mock_Case_Screen_Flow</flow>

turns into this:

<flow>
Mock_Case_Screen_Flow;
</flow>

The comment in the above linked GitHub issue did fix the problem (adding "embeddedLanguageFormatting": "off" to our .prettierrc), but then another problem surfaced because of it. We're working with Lightning Web Components, which access JavaScript properties from HTML like this:

<lightning-card
    hide-header={hideHeader}
    title={titleText}
    icon-name={cardIcon}
>

Apparently prettier interprets this as embedded, and properly ignores it without the above addition to .prettierrc, but when we add that line to the config file, prettier now mangles this to:

<lightning-card
    hide-header="{hideHeader}"
    title="{titleText}"
    icon-name="{cardIcon}"
>

Since we don't use the Flow language and will never need to have prettier format Flow code, how can we just disable this one plugin for the entire project?


Solution

  • While I'd like to just disable the flow plugin, a solution that worked was to have an XML-specific override in .prettierrc:

    {
        "files": "*.xml",
        "options": { "embeddedLanguageFormatting": "off" }
    }
    

    This prevents the mangling of the XML files while retaining the format of the HTML files.