是否有工具在Visual Studio中按字母顺序排列CSS定义？

Question

Eric Meyer建议将单个规则按字母顺序排列在CSS样式定义中是有道理的 - 订购规则没有"自然"的方式,这使得在复杂的定义中很容易确保你没有定义相同的东西两次.

div.Foo
{
    background:Green;
    border:1px solid Khaki;
    display:none;
    left:225px;
    max-height:300px;
    overflow-x:hidden;
    overflow-y:auto;
    position:absolute;
    top:0;
    width:230px;
    z-index:99;
}

所以我的问题是:是否有一个插件或其他简单的方法来选择Visual Studio中的规则列表并按字母顺序排列它们？(更好的是,一举将样本应用到整个样式表中.)

更新

@Geoff建议使用CleanCSS,这非常酷,除了很多其他很好的清理(例如,使用相同的选择器合并定义)之外,它将同时执行上述要求的字母化.不幸的是,它将定义中的多个选择器折叠成一行.例如

div.Foo,
div.Foo p,
div.Foo li
{
   color:Green;
}

变

div.Foo,div.Foo p,div.Foo li
{
   color:Green;
}

这是一个更难阅读和一种交易破坏者.这是压缩设置最低的,我没有办法覆盖它.

Answer 1

Ben 的回答是正确的，但容易出错，但让我找到了这个插件：https : //github.com/mrmlnc/vscode-postcss-sortingsettings.json安装后 只需将其添加到您的，

"postcssSorting.config": {
  "properties-order": "alphabetical"
}

然后在 vscode 命令面板（cmd+shift+p）中选择 PostCSS Sorting: Run

还有很多其他很棒的配置选项，包括如何处理评论。

Answer 2

事实上，它要简单得多，您不必安装任何插件。

只需转到文件 > 首选项 > 键盘快捷键

然后键入 Sort 行升序，然后将键绑定映射到该行。

Answer 3

我不知道visual studio中的任何东西,但有在线工具来清理和格式化CSS.我已成功使用CleanCSS

更新:

试试这个格式化CSS在线.它似乎输出更多你想要的线条