Stylelint如何在嵌套类前排序CSS属性？

要实现将CSS属性排在嵌套类之前的自动修复效果，可借助stylelint-order插件的order/order规则来完成，具体操作如下：

• 安装stylelint-order插件：

  npm install stylelint-order --save-dev
  

• 在Stylelint配置文件（如.stylelintrc或.stylelintrc.json）中配置插件与规则：

  {
    "plugins": ["stylelint-order"],
    "rules": {
      "order/order": [
        "declarations",
        "rules"
      ]
    }
  }
  

  其中"declarations"指代CSS属性声明（如padding: 2px 0;），"rules"指代嵌套的选择器规则块（如.b { ... }），该配置会强制声明块内先书写属性，再放置嵌套选择器。

• 执行自动修复命令：

  npx stylelint 你的CSS文件路径 --fix
  

执行修复后，你的代码会自动调整为期望的顺序：

修复前代码：

.a {
  .b {
    width: 16px;
  }

  padding: 2px 0;
}

修复后代码：

.a {
  padding: 2px 0;

  .b {
    width: 16px;
  }
}

若需要更精细的内容排序控制，还可在order/order数组中添加其他类型（如变量、@规则等），但针对当前需求，上述配置已足够满足要求。

内容的提问来源于stack exchange，提问作者Kiritushka