Skip to content

Disable embedded language formatting by default and make it configurable #5588

@jacob-greenfield

Description

@jacob-greenfield

Prettier 1.15.2
Playground link

--parser babylon

Input:

const foo = html`<p>test
</p>`;

Output:

const foo = html`
  <p>test</p>
`;

Expected behavior:
I would like a way to disable HTML template string formatting for a js/ts file, but I still want to format the file using Prettier (I just want the template strings to be treated as regular template strings rather than being formatted as HTML). In other words, I would like a way to disable the function here:

/**
* - html`...`
* - HTML comment block
*/
function isHtml(path) {
const node = path.getValue();
return (
hasLanguageComment(node, "HTML") ||
isPathMatch(path, [
node => node.type === "TemplateLiteral",
(node, name) =>
node.type === "TaggedTemplateExpression" &&
node.tag.type === "Identifier" &&
node.tag.name === "html" &&
name === "quasi"
])
);
}

Other than using // prettier-ignore for every single template string, I do not think there is currently any way to do this.

My use case is creating test cases for an editor extension that provides autocomplete for HTML; so I want the tests themselves to be formatted as TypeScript, but I don't want to have Prettier format the HTML inside the template strings. Basically, something like htmlWhitespaceSensitivity: "ignore" but that only applies for template strings (I also have Vue files that I want to format).

Metadata

Metadata

Assignees

No one assigned

    Labels

    area:multiparserIssues with printing one language inside another, like CSS-in-JSlang:javascriptIssues affecting JSpriority:highCode is printed in a way that alters the AST, breaks syntax, or is a significant regression. Urgent!

    Type

    No type

    Projects

    No projects

    Milestone

    No milestone

    Relationships

    None yet

    Development

    No branches or pull requests

    Issue actions