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

【问题标题】：Is there a tool to alphabetize CSS definitions in Visual Studio?在 Visual Studio 中是否有按字母顺序排列 CSS 定义的工具？
【发布时间】：2010-09-17 13:09:37
【问题描述】：

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;
}

这更难阅读，而且有点破坏交易。这是最低压缩设置，我看不出有什么方法可以覆盖它。

【问题讨论】：

标签： css visual-studio

【解决方案1】：

在 VSCode 中。只需将键绑定附加到 “按字母顺序排列行”命令。

文件 > 首选项 > 键盘快捷键在搜索框中键入“排序行”，然后将键绑定添加到按字母顺序排序行。例如 Ctrl+Cmd+O。

但是，您需要注意格式设置，因为此功能不够智能，无法将包装到多行的 css 属性移动。

【讨论】：

【解决方案2】：

在 2021 年，我发现这个扩展可以完美地完成工作；它还可以对其他语言的任何块代码进行排序：https://marketplace.visualstudio.com/items?itemName=1nVitr0.blocksort

重要提示：您必须先将选择器组合在一行中，否则插件将无法理解它们是放在一起的。例如：

// Don't do this
.rule1,
.rule2 {
    color: red;
}

// Do that
.rule1, .rule2 {
    color: red;
}

【讨论】：

【解决方案3】：

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

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

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

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

【讨论】：

【解决方案4】：

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

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

然后键入升序排序行，然后映射一个键绑定到那个。

【讨论】：

这不会达到您的预期。无论嵌套结构如何，它都会对所有行进行排序。你需要 PostCSS 插件。
这根本不起作用。它按字母顺序对所有内容进行排序，并震撼了我的整个样式表。

【解决方案5】：

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

【讨论】：

【解决方案6】：

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

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

【讨论】：

真的吗？我刚刚尝试使用上面的示例代码：选择、复制、粘贴到 excel 中，单击“A-Z”按钮，复制。我花了不到 2 秒。
2 秒 + 2 秒 + 2 秒...甚至一年也只是由许多 2 秒组成...
当然，上面那个例子，但是当你在几十个类和 id 中有数百行 CSS 时呢？嗯？

【解决方案7】：

我对视觉工作室一无所知，但是有在线工具可以清理和格式化 css。我已经成功使用了CleanCSS

更新：

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

【讨论】：