prettier是html/css格式化最省事方案，开箱即用、支持嵌套、不依赖浏览器环境且统一团队风格；避免用dom api因会丢失格式、注释及触发兼容性问题。
直接用 Prettier 做 HTML/CSS 格式化工具最省事，它开箱即用、支持嵌套、不依赖浏览器环境，且能统一团队风格。别自己写解析器，也别硬套 DevUtils.app 的 macOS 本地逻辑——除非你明确只做 Mac 桌面端工具。
为什么不用浏览器原生 DOM API 做 HTML/CSS 格式化
很多人第一反应是用 document.createElement + innerHTML 解析再序列化，但这条路踩坑极多：
-
innerHTML会自动修正非法结构（比如把<div></div>塞进<p></p>里），原始格式信息丢失 - CSS 字符串无法通过
styleSheets安全读取跨域或<style></style>内联块里的规则（CSP 或 CORS 会拦截） - 没有注释保留能力——
outerHTML会直接丢掉所有 HTML 注释和 CSS 中的/* */ - IE 和旧版 Safari 对
CSSStyleSheet.cssRules的兼容性差，报SecurityError是常态
用 Prettier CLI 快速封装一个轻量在线格式化服务
核心思路：前端传入原始代码，后端调用 prettier.format()，返回结果。不暴露 Node.js 环境给用户，规避 XSS 风险。
- 安装时指定语言支持：
npm install prettier @prettier/plugin-html @prettier/plugin-postcss - 关键配置项必须显式声明，不能靠默认值：
parser: "html"（处理.html）、parser: "css"（处理.css）、parser: "babel"（处理内联script或style中的 JS/CSS） - 缩进统一用
tabWidth: 2，避免混用空格和 tab 导致 diff 失效 - 对 HTML，加
htmlWhitespaceSensitivity: "css"，否则<span> a <b>b</b> c </span>中的空白可能被错误折叠
如何安全处理用户提交的 HTML + 内联 CSS/JS
真实场景中，用户粘贴的往往是混合代码（<style></style> + <script></script> + 模板语法）。Prettier 默认不递归格式化内联内容，需手动拆解：
- 先用正则粗略提取
<style>]*>([\s\S]*?)</style>和<script>]*>([\s\S]*?)</script>，但注意：不要用.*?匹配跨行，要用[\s\S] - 对提取出的 CSS 片段单独调用
prettier.format(cssCode, { parser: "css" }) - 对 JS 片段，判断是否含
type="module"或type="text/typescript"，选对应 parser - 拼回去时，确保换行位置一致，否则
后多一个空行会导致渲染差异
线上部署时容易忽略的 CSS 兼容性点
格式化本身不改语义，但输出结果可能触发旧浏览器 bug：
-
@media (width > 768px)这类现代语法经@prettier/plugin-postcss格式化后仍保留，但 IE11 不识别，需确认用户目标环境 - CSS 变量（
--main-color）会被正常保留，但若格式化后缩进变深，某些构建工具（如旧版cssnano）可能误判为无效声明而删除 - 如果输入含
/* stylelint-disable */注释，Prettier 默认会删掉——必须加配置preserveComments: true
真正难的不是“怎么格式化”，而是“怎么在保留开发者意图的前提下，让格式化结果不改变运行时行为”。尤其当 HTML 里夹着模板语法（{{if}}、v-if）时，parser 选错一行就白忙活。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
