vs code 有没有自动给css排版顺序的插件?

Question

.do-fn-btn {
  button {
    border: 0 none;
    border-radius: 5px;
    background-color: #ffffff;
    color: #fff;
    box-shadow: 0 0 10px 0 rgba(0, 0, 0, 0.1);
    cursor: pointer;
    width: 80px;
    height: 30px;
    box-sizing: border-box;
    color: #989898;
    font-weight: bold;
    font-size: 14px;
    margin-right: 5px;
  }
}

比如写了一堆代码,但是结构顺序不够规范,样式规则的出现顺序一般是这样的:

• 1 display float position z-index 表示定位/布局的属性
• 2 width height margin padding border 表示盒子模型的属性
• 3 line-height font-size vertical-align text-align ....排版相关的属性
• 4 color background opacity ...表示装饰相关的属性
• 5 content list-style ... 内容生成相关的属性

Answer 1

Beautify css/sass/scss/less
Beautify
vetur(Vue用的)
等等，很多插件都有这个功能