WebReflection / vscode-literally-html

Adds syntax highlighting for html inside of JavaScript and TypeScript tagged template strings
https://marketplace.visualstudio.com/items?itemName=webreflection.literally-html
MIT License
34 stars 6 forks source link

Support Prettier‑compatible `/* HTML */` comment prefix #13

Closed ExE-Boss closed 4 months ago

ExE-Boss commented 4 years ago

Prettier uses the /* HTML */ comment prefix as a hint that a template string contains HTML markup when it can’t otherwise determine what the template string contains.


/cc @prettier/core @evilebottnawi @jf-1 @lydell

WebReflection commented 4 years ago

I can't even publish latest changes to vsce, but I also know nothing about vs code in general, so anything that is not in yet, or easy to change, won't likely land, 'cause I wouldn't know how.

WebReflection commented 4 years ago

OK, I've eventually managed to push the node part, that's something ... now, about prettier, I still wouldn't know what to do here, so I'll flag as help wanted, sure enough pretty much nobody will show up 😅 (but at least I've tried)

ExE-Boss commented 4 years ago

All you need to do is highlight template strings that follow a /* HTML */ comment as being HTML.

Example:

const example = /* HTML */ `
    <div>${getHTML()}</div>
`;
WebReflection commented 4 years ago

does prettier put that also in between html or svg and the template literal content?

ExE-Boss commented 4 years ago

does prettier put that also in between html or svg and the template literal content?

No, it only needs it for the likes of unknownHtmlTag (currently html.node, html.for(…), etc.).

Without /* HTML */ Prettier ends up formatting the unknownHtmlTag template tag as a normal template string.

WebReflection commented 4 years ago

this looks like a Prettier bug then, as it should allow custom definition of what's is known to produce from html template literals (which should be literally any tag function or anything used as tag).

I don't think I ever want /* HTML */ comments on my way, so I am not sure I should do anything in here.

ghost commented 4 years ago

@WebReflection How can someone get syntax highlighting in an untagged template literal with your extension then ? If /* HTML */ before the literal is not ok , is having the literal inside of it to start with <--!html--> ok ?

WebReflection commented 4 years ago

I don't known, PR welcome

WebReflection commented 4 months ago

Added a WARNING in the README with suggested alternatives: https://github.com/WebReflection/vscode-literally-html/tree/master?tab=readme-ov-file#warning