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

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

<强>更新

试试这个Format CSS Online。它似乎输出更像你想要的线

Answer 2

实际上，它要简单得多，您无需安装任何插件。

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

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

Answer 3

使用CodeMaid。无论类型如何，Ctrl + M + F9都会对您选择的任何文本进行排序。

Answer 4

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

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

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

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

Answer 5

它不是一个插件，它不了解CSS，但它通常很有帮助：Excel或Google Spreadsheets等电子表格。

我经常剪切代码，将其粘贴到Excel中，稍微捣乱，然后将其粘贴回我的编辑器中。我发现这种技术对于快速按字母顺序排列特别有用。

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

更新

5 个答案: