prettier 默认不识别小程序 wxml 文件，需在 .prettierrc 中显式配置 "parser": "html" 和 "extensions": [".wxml"]，vs code 需设语言模式为 wxml，推荐锁定 prettier 2.8.8 版本并禁用不稳定选项。
小程序的 HTML 文件其实不是纯 HTML
微信、支付宝、百度等小程序的页面文件（如 .wxml）本质是类 HTML 的模板语法，但不被 Prettier 默认识别。直接用 VS Code 保存时没反应，不是你配置错了，而是 Prettier 根本没“看到”它作为 HTML 处理——它默认只认 .html 后缀。
常见错误现象：Ctrl+S 后缩进没变、属性没换行、自闭合标签仍写成 <image src="..."></image>；或者格式化后 <view wx:if="{{show}}"></view> 被错误拆开甚至报错。
- 必须在
.prettierrc或.prettierrc.cjs中显式启用 WXML 支持：添加"parser": "html"（Prettier ≥ 2.8），并确保"extensions": [".wxml"]在配置里 - VS Code 需手动设置语言模式：右下角点击“Plain Text” → 选“WXML”（需安装官方或社区 WXML 插件，如 “WXML Tools”）
- 旧版 Prettier（≥3.0）对 WXML 的
wx:指令支持不稳定，实测2.8.8兼容性最好，建议锁定版本：npm install --save-dev prettier@2.8.8
WXML 格式化必须绕过 parser 冲突
WXML 混合了结构标签、逻辑指令（wx:if、wx:for）、插值表达式（{{item.name}}）和内联事件（bindtap="handleClick"）。Prettier 默认的 html parser 会把 {{}} 当作文本处理，导致换行错乱或属性截断。
典型问题：格式化后变成
<view wx:if="{{show}}" bindtap="onClick"><text>{{title}}</text></view>
——看起来整齐，但实际运行时 {{show}} 可能被解析失败，因为部分小程序框架要求指令与插值必须紧贴标签边界。
- 禁用 Prettier 对表达式区域的干预：在
.prettierrc加"htmlWhitespaceSensitivity": "ignore" - 避免使用
prettier-plugin-wxml类第三方插件（维护停滞、兼容差），优先用原生parser: "html"+ 手动约束 - 关键妥协点：接受
{{}}不自动换行，宁可保持单行；用缩进体现嵌套层级，而非靠 Prettier 强制折行
如何让格式化结果真正可用
能“格式化”不等于“能跑”，WXML 的可执行性比美观更重要。很多团队卡在“格式化后编译报错”，根源是工具链没对齐。
- 确认小程序基础库版本：低于
2.25.0的微信基础库不支持某些空格敏感语法，格式化后多一个空格就可能触发WXML attribute value must be quoted错误 - 禁用
prettier.vueIndentScriptAndStyle类选项（它针对 Vue，对 WXML 无效且引发冲突） - 在
package.json中加脚本："format:wxml": "prettier --write \"src/**/*.wxml\" --parser html"，执行前先npm run format:wxml手动验证，别依赖保存即格式化 - 真实项目中，建议只对静态结构层（如
<view><text></text></view>嵌套）格式化，跳过含复杂wx:for-item或多层slot的组件模板——人工 review 更可靠
容易被忽略的兼容细节
最麻烦的不是格式化本身，而是不同平台间的细微差异。比如支付宝小程序允许 <image src="" mode="aspectFill"></image> 属性顺序随意，但微信严格要求 src 必须在第一位；又比如百度小程序把 bind:tap 和 catchtap 视为不同事件类型，格式化时若把它们混排，会掩盖语义错误。
这些细节不会出现在 Prettier 文档里，但会在线上环境突然暴露。
- 不要全局启用
"htmlWhitespaceSensitivity": "strict"，WXML 中标签间换行常被渲染为空格，影响布局 - 自闭合标签统一写成
<image></image>，但小程序编译器实际不校验斜杠，所以更关键的是保持团队书写一致，而非追求“标准” - 如果用了 Taro 或 Uni-app，格式化目标应是生成后的
.wxml，而不是源码的.tsx或.vue—— 后者应由对应语言的 Prettier parser 处理
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
