如何在TypeScript中导入Prettier模板字面量使用的html标签？

问题原因 #

html标签模板只是 Prettier 识别模板内 HTML 语法的静态标识，Prettier 本身不会提供这个标签函数的运行时实现，因此编译后运行时 JS 引擎找不到对应的变量就会抛出未定义错误，该问题和 Prettier 的格式化配置无关。

解决方案 #

根据你的使用场景选择对应方案即可：

• 如果你仅需要格式化模板内的 HTML 内容，不需要额外运行时能力，有两种可选方案：
  1. 自行实现一个极简的标签函数，直接返回拼接后的字符串，多处使用可以单独封装导出

  // 全局定义或者单独导入使用
  const html = (strs: TemplateStringsArray, ...vals: unknown[]) => {
    return strs.reduce((res, str, idx) => res + str + (vals[idx] ?? ''), '')
  }
  

  2. 完全不使用标签函数，给模板字符串加注释触发 Prettier 格式化，直接规避未定义问题

  const myFunction = (arg) => {
    return /* html */`
      <p>
        hello ${arg}!
      </p>
    `;
  }
  

• 如果你使用了 Lit、htm 这类依赖html标签函数的前端框架，导入对应框架的内置实现即可：
  • Lit 场景：import { html } from 'lit'
  • htm 场景：import html from 'htm'，再根据配套的渲染库完成绑定即可

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