先看一遍搜索出来配置的效果：

原有效果

更改之后的效果

1.先下载Prettier-Code formatter插件，打开插件设置

2.点击prettier设置，添加三项格式化文件类型

3.项目根目录“.prettierrc”文件内添加代码

上面的方法和配置会导致wxml的格式影响到wxss渲染效果

正常效果

使用上面代码效果

这个问题其实是 Prettier 插件把 .wxml 当成 HTML 来格式化 时，自动调整了标签缩进和换行，从而导致了微信开发者工具中渲染的差异（即使内容一样，渲染可能不同，因为 WXML 对空白符的解析和 HTML 不完全一致）

这不是 bug，而是 WXML 渲染引擎 + Prettier 格式化规则 + WXSS 的联动导致的结果。

在微信小程序中，WXML 和 WXSS 不是完全独立的：

• WXML 的换行、空格、缩进都会被编译成 真实节点间的空白文本节点（text node）；

• 这些空白节点可能影响样式，比如：

• display: inline-block 的元素之间多出空隙；

• 宽度、对齐、flex 分布出现异常；

• 在 flex 容器中，“换行符”会占一个像素点空间。

上面格式化的两种代码在 HTML 中渲染一样，但在小程序里，第二种 会多出一个空白文本节点，相当于在开头加了个 \n 换行符，布局就可能受到影响。

.prettierrc 文件配置了

{
  "files": "*.wxml",
  "options": { "parser": "html" }
}

Prettier 会：

1. 把 .wxml 当成 HTML；

2. 自动优化成：

<text>
  获取验证码
</text>

3. 而这在微信端其实是不等价的。

推荐.prettierrc配置：

{
  "tabWidth": 4,
  "semi": true,
  "singleQuote": true,
  "printWidth": 100,
  "bracketSameLine": true,
  "overrides": [
    {
      "files": "*.wxml",
      "options": {
        "parser": "html",
        "htmlWhitespaceSensitivity": "ignore",    // 👈 保留标签内文字的空格/换行逻辑
        "embeddedLanguageFormatting": "off",       // 👈 不自动格式化标签内文字或插值内容
        "bracketSameLine": true,                   // 👈 右括号和标签最后一个属性同行（避免多出空白行）
        "proseWrap": "never",                      // 👈 不折行文字
        "printWidth": 80                           // 👈 控制属性超过长度才换行
      }
    },
    {
      "files": "*.wxss",
      "options": {
        "parser": "css"
      }
    },
    {
      "files": "*.wxs",
      "options": {
        "parser": "babel"
      }
    }
  ]
}

配置完之后多属性标签正常换行，并且不会影响wxss效果展示