uni-app [建议新功能] 自动将多行 class 合并到单行

eoxn13cs  于 5个月前  发布在  uni-app
关注(0)|答案(6)|浏览(42)

新功能描述
如果一个标签的 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,无法编译成功。

尝试方案

  1. 降级 prettier 从 2.3.2 到 2.2.1,it works,但是治标不治本
  2. 成为微信员工,修改垃圾开发者工具的 bug

补充信息
[其它你认为有参考价值的信息]

noj0wjuj

noj0wjuj1#

+1 用 tailwind + eslint + prettier 很自然的就变成了这样

y0u0uwnf

y0u0uwnf2#

你这个结束标签 没有闭合写的不对,我一运行就报错,吓我一跳 😭

ha5z0ras

ha5z0ras3#

@Otto-J 不好意思,例子手写的,漏了结束标签。但是问题是存在的,能不能先别关掉,可以 reopen 吗?

8yparm6h

8yparm6h4#

我使用你提供的 html 编译到小程序,默认是压缩为一行的,这个问题可以进一步做补充吗?

db2dz4w8

db2dz4w85#

明白了,vue2 有这个问题,vue3 没有这个问题,我看下,应该加一个 html 压缩选项可以解决

xj3cbfub

xj3cbfub6#

是 vue2,感谢 🙏

相关问题