Web Console (Beta): Saving LWC HTML results in Prettier quoting template syntax

[aheber]

Summary

Using the new Web Console (Beta) to complete a Trailhead challenge is awesome! Much better than building a temporary connection to my computer via the CLI.

When working through this, https://trailhead.salesforce.com/content/learn/modules/javascript-developer-certification-maintenance-summer-25/put-html-class-binding-into-practice?trail_id=maintain-your-salesforce-certifications, I saved the HTML file and where I had set the attribute as class={computedClassNames}, Prettier reformatted to class="{computedClassNames}".

I'm unable to install additional modules to get this setup correctly on my own, I would also really expect this to be setup correctly from the start in this context.

Steps To Reproduce:

1. Enable and open Web Console.
2. Complete the linked Trailhead.
3. When saving the changes to the HTML for the final challenge, the content is corrupted.

Expected result

I would expect the template syntax to be left unquoted. This is because Prettier is using the HTML parser when it should be using the LWC parser.

Additional information

Correct LWC Prettier setup is documented here: https://developer.salesforce.com/docs/platform/sfvscode-extensions/guide/prettier.html

Salesforce Extension Version in VS Code:
Web Console

[svc-idee-bot]

Thank you for filing this issue. We appreciate your feedback and will review the issue as soon as possible. Remember, however, that GitHub isn't a mechanism for receiving support under any agreement or SLA. If you require immediate assistance, contact Salesforce Customer Support.

[mshanemc]

I think we can fix that.

what does this mean?

I'm unable to install additional modules to get this setup correctly on my own, I would also really expect this to be setup correctly from the start in this context.

[aheber]

@mshanemc The steps to correct this include modifying the .prettierrc file as well as using NPM to install the correct packages. As far as I know, I'm unable to run NPM in Web Console so the package would have to be included into the Web Console's supporting modules some other way. (I assume there are "compile" steps for this sort of thing but the details are unimportant)

The second part is just that as a user I would expect Web Console to come ready out of the box so it doesn't corrupt LWC components. (Not an accusation, just framing the user story)

[mshanemc]

as well as using NPM to install the correct packages

yeah, that's the part I'm not following. what are they?

Other issue this uncovered...prettier's plugin says it doesn't support reading config from virtual filesystems (its internals call node's fs stuff, not the vscode workspace fs api). So changing the config file might not help any anyway.

[aheber]

I was wrong. I saw the npm install --save-dev --save-exact prettier prettier-plugin-apex and was thinking it installed supporting package, not just the Apex stuff.

Looks like lwc parsing comes from core Prettier, https://prettier.io/docs/options.

[mshanemc]

yeah, we won't be able to run the apex prettier on the web w/o java because the prettier plugin uses the old java LanguageServer.