如何在JS的.innerHTML中开启VSCode HTML格式化（自定义元素场景）

以下几种方案可以让你像写普通HTML文档一样，在自定义元素中编写格式化的HTML代码，提升开发体验：

1. 使用ES6模板字符串（最直接） #

ES6的模板字符串（用反引号`包裹）支持多行文本和缩进，完全可以按照HTML的格式化习惯编写内容，直接赋值给innerHTML：

class CustomHeader extends HTMLElement {
  constructor() {
    super();
    // 直接按HTML格式写，缩进、换行都保留
    this.innerHTML = `
      <header class="site-header">
        <div class="header-logo">
          <h1>站点标题</h1>
        </div>
        <nav class="header-nav">
          <a href="/">首页</a>
          <a href="/about">关于我们</a>
          <a href="/contact">联系</a>
        </nav>
      </header>
    `;
  }
}
customElements.define('custom-header', CustomHeader);

这种方式还支持变量插值，方便动态插入内容：

const siteTitle = "我的个人站点";
this.innerHTML = `
  <header class="site-header">
    <h1>${siteTitle}</h1>
  </header>
`;

2. 使用HTML <template> 元素 #

把组件的HTML结构单独写在页面的<template>标签里，JS中直接引用模板内容，实现HTML和JS的分离，结构更清晰：

HTML部分： #

<template id="custom-footer-template">
  <footer class="site-footer">
    <div class="footer-info">
      <p>© 2024 我的站点 版权所有</p>
      <div class="social-links">
        <a href="#">GitHub</a>
        <a href="#">Twitter</a>
      </div>
    </div>
  </footer>
</template>

JS部分： #

class CustomFooter extends HTMLElement {
  constructor() {
    super();
    // 获取模板并克隆内容到自定义元素中
    const template = document.getElementById('custom-footer-template');
    const content = template.content.cloneNode(true);
    this.appendChild(content);
  }
}
customElements.define('custom-footer', CustomFooter);

模板里的HTML可以完全按照正常格式编写，编辑器的HTML语法高亮和格式化功能都能正常使用。

3. 工程化项目中导入独立HTML文件 #

如果使用Vite、Webpack等构建工具，可以直接把组件的HTML写成单独的.html文件，通过导入的方式获取格式化后的字符串：

footer.html（单独文件，正常格式化）： #

<footer class="site-footer">
  <p>© 2024 版权声明</p>
  <nav>
    <a href="/privacy">隐私政策</a>
    <a href="/terms">服务条款</a>
  </nav>
</footer>

JS部分： #

// Vite中直接加?raw后缀导入HTML文本
import footerHtml from './footer.html?raw';

class CustomFooter extends HTMLElement {
  constructor() {
    super();
    this.innerHTML = footerHtml;
  }
}
customElements.define('custom-footer', CustomFooter);

这种方式让HTML代码完全独立，编辑体验和普通HTML文件一致，适合复杂组件的开发。

内容的提问来源于stack exchange，提问作者MaciejOstrowski