类名排序篇
一、Prettier插件 + npm插件
除了tailwindcss官方出品的prettier-plugin-tailwindcss(https://github.com/tailwindlabs/prettier-plugin-tailwindcss),Prettier流派没有别的著名的解决方案,而且如果你不用tailwindcss,那么你的类名也不会冗长,也没必要排序。
二、Headwind插件或Tailwind Sorter插件
纯插件的代表,Headwind插件是老资格,但是三年不维护了,Tailwind Sorter插件是后起之秀里面最好的。
如果你不想安装npm插件,那么试用这2个然后敲定一个即可。
属性排序篇
一、Prettier插件 + npm插件
一般选择是https://www.npmjs.com/package/prettier-plugin-two-style-order或https://www.npmjs.com/package/prettier-plugin-css-order
二、Stylelint插件 + npm包(stylelint + stylelint-order + stylelint-config-recess-order + stylelint-config-standard + postcss-html + postcss-scss)
这些npm包全部不可省略,除非你不用scss,则可省略postcss-scss。某种角度说,有点繁琐。
三、CSScomb插件
纯插件的代表,老牌,无依赖,但是五年没更新了,但是因为CSS就那么点东西,所以不更新也问题不大,可以用。
使用起来很简单,在插件的配置里,勾上保存时格式化,以及指定规则为“zen”即可。