Visual Studio Code:如何自动格式化模板文字中包含的HTML ?

Question

在我的Javascript代码中，我有许多包含HTML代码的模板文字。这些块通过es6-string-html正确高亮显示。但是，它们不会自动格式化，这意味着以下代码块将保持原样:

let html = `
<div class="wrapper">
<div>Hello, world!
</div>
</div>
`;

如何为这些字符串启用自动格式化?

Answer 1

当Prettier检测到JavaScript中带有html标记的模板时，它将对其进行格式化。你可以在这里阅读更多关于突出显示的内容你可以使用es6-string-html

/**
* html wrapper is needed for prettier formatting
*/
const html = String.raw;
const template = html`
<div>
<p>hello world</p>
<p>hello world</p>
</div>
`;

Answer 2

你可以在模板字符串前面加一个注释告诉Prettier它是HTML:

function component() {
return /* HTML */ `<div>hello</div>`
}

或者像Chris说的那样使用函数:

function component() {
return html`<div>hello</div>`
}