用 prettyhtml 格式化 wxml

[transtone]

有和 vetur 一样，用 prettyhtml 来格式化的打算吗？

[qiu8310]

这个可以考虑！

[infinnie]

现在 WXML 属性多了的话就会一行非常长，写起来不舒服…

[qiu8310]

@transtone @infinnie 你要求的功能 NewFuture 实现了，可以参考上面 NewFuture 提交的代码（或者在vscode配置中看最新添加的minapp-vscode开头的配置），我暂时还没写文档

[robgu]

prettyHtml 会去掉 image 等标签后面的 /> 中的/,然后微信开发工具会报错认为 <image ... > 没有闭合怎么解决？

[robgu]

@NewFuture 测试下来发现 prettier 效果还不错,但是配置需要加一个配置 "parser": "html"否则会报错. 配置如下

{
  "minapp-vscode.wxmlFormatter": "prettier",
  "minapp-vscode.prettier": {
    "parser": "html"
  }
}

[NewFuture]

@NewFuture 测试下来发现 prettier 效果还不错,但是配置需要加一个配置 "parser": "html"否则会报错. 配置如下

@robgu 是的这个地方没设置默认parser, 现在没有一个prettier的parser完全cover所有wxml的场景。

我其实用的是 angular 的来处理模板的
https://github.com/NewFuture/miniprogram-template/blob/master/.prettierrc#L16

但是这个不支持自闭标签得写成这样

<image></image>

[FredZeng]

在使用prettyhtml的时候有一个trick：将<image>标签先替换成别的标签，如<wx-image>，然后进行prettyhtml，结束后再把标签换回来，这样的话一方面可以不用自己写parser，另一方面还可以提供一个white list表示不处理哪些标签。

[xmsz]

什么时候支持一下image和input的闭合问题，现在暂时用template解决，但是这个很不合理。

[qiu8310]

最新版本(1.14.0)解决了 prettyhtml 格式化的问题，和 https://prettyhtml.netlify.com/ 中的格式化效果是一样的