如何在VS code中对JavaScript字符串内的HTML进行语法高亮？

Question

有没有适用于JavaScript字符串中语法高亮HTML的Vs Code扩展程序？

具体来说，我正在编写 Web 组件。

const html = content => `
  <div>
    <table>
      ${content}
    </table>
  </div>
`;

class BaseTable extends HTMLElement {
  constructor() {
    super();
  }

  set content(value) {
    const template = document.createElement('template');
    template.innerHTML = style + html(value);

    this.attachShadow({ mode: 'open' });
    this.shadowRoot.appendChild(template.content.cloneNode(true));
  }
}

我想要高亮显示HTML常量变量中的字符串

- Nurdaulet Shamilov

---

仅供参考，那不是一个字符串，而是一个模板字面量。（未标记的模板字面量会导致字符串，但标记的则可能不会。）但我期望任何更新的语法高亮HTML字符串的工具也能处理模板字面量。 - T.J. Crowder

未来的读者：你可以使用 es6-string-html 插件来突出显示由注释前缀的 HTML 模板字符串：/* html */\<h1>Hello world</h1>``。还有 es6-string-* 插件可用于其他语言，如 CSS 和 Markdown。 - ezekg

Answer 1

如果你正在使用lit-html，VS Code中有一个名为lit-plugin的插件可以进行语法高亮。语法如下：

const markup = content => html`
  <div>
    <table>
      ${content}
    </table>
  </div>
`;

- vishnu v

---

这实际上是我的问题的解决方案，但出现了错误，即html未定义。 - Nurdaulet Shamilov

你是否从 lit-html 导入了 HTML？ - vishnu v

安装了这个lit-html插件后，您在定义自己的“html”标记模板时就不需要加载“lit-html”了：https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Template_literals - Danny '365CSI' Engelman

该插件还将对使用内置String.raw的字面量进行语法高亮，例如： const markup = String.raw`<div><p>Hi</p></div>`; - lamplightdev

如果您没有使用Lit库，那么与"lit-html"扩展一起工作的解决方案就是@lamplightdev所说的，使用String.raw。 - Javi Villar

如果您没有使用Lit库，那么与"lit-html"扩展一起工作的解决方案就是@lamplightdev所说的，使用String.raw。 - undefined