Prettier Standalone格式化HTML时内嵌JS代码未正确格式化怎么办

问题原因 #

你仅引入了HTML解析器，Prettier Standalone版本不会自动加载未引入的依赖解析器，处理HTML中script标签内的JS代码需要依赖JS解析器，因此无法格式化内嵌JS内容。IDE中内置了全量常用解析器，所以可以正常处理。

解决方法 #

1. 额外引入JS对应的解析器，使用prettier/parser-babel即可覆盖普通JS代码的格式化需求
2. 将引入的babel解析器添加到plugins配置数组中
3. 可补充对应格式化配置对齐IDE默认输出效果

修正后实现代码：

import parserHtml from "prettier/parser-html";
import parserBabel from "prettier/parser-babel";
import prettier from "prettier/standalone"

const rawHtml = `<script SameSite="None; Secure" src="https://unpkg.com/typebot-js"></script>
<div id="typebot-container" style="width: 100%; height: 600px;"></div>
<script>
  Typebot.initContainer("typebot-container", {publishId: "remember-on-second-visit-iblkqj1-pw",hiddenVariables: {test: "null",}});
</script>`

const snippet = prettier.format(
    rawHtml,
    { 
      parser: "html", 
      plugins: [parserHtml, parserBabel],
      // 可选配置，对齐IDE默认输出效果
      semi: true,
      singleQuote: false,
      trailingComma: "es5",
      htmlWhitespaceSensitivity: "css"
    }
  );

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