新功能描述
如果一个标签的 class 属性里包含空格,在编译成为小程序的时候,自动合并到单行,将连续的多个空格或换行符替换成单个空格。
源代码
<view
class="
appearance-none
border
border-gray-300
w-8
h-8
leading-none
bg-white
"
>
</view>
编译后为
<view
class="appearance-none border border-gray-300 w-8 h-8 leading-none bg-white"
>
</view>
现状及问题
HTML 规范中是允许 class 属性包含换行符的,在实际写代码的过程中,如果一个标签有很多 class 时,折成多行可读性更好。尤其是现在流行的工具类 css 框架,比如 tailwindcss,class 经常会很长。
但是因为微信小程序开发者工具没有遵守规范,当 class 中包含换行符时,微信开发者工具会提示 unexpected character,无法编译成功。
尝试方案
- 降级 prettier 从 2.3.2 到 2.2.1,it works,但是治标不治本
- 成为微信员工,修改垃圾开发者工具的 bug
补充信息
[其它你认为有参考价值的信息]
6条答案
按热度按时间noj0wjuj1#
+1 用 tailwind + eslint + prettier 很自然的就变成了这样
y0u0uwnf2#
你这个结束标签 没有闭合写的不对,我一运行就报错,吓我一跳 😭
ha5z0ras3#
@Otto-J 不好意思,例子手写的,漏了结束标签。但是问题是存在的,能不能先别关掉,可以 reopen 吗?
8yparm6h4#
我使用你提供的 html 编译到小程序,默认是压缩为一行的,这个问题可以进一步做补充吗?
db2dz4w85#
明白了,vue2 有这个问题,vue3 没有这个问题,我看下,应该加一个 html 压缩选项可以解决
xj3cbfub6#
是 vue2,感谢 🙏