stylelint-config-clean-order

使用stylelint-order对你的样式进行排序。

之前	之后

使用方法

在你的项目中安装stylelint和本包：

npm install stylelint stylelint-config-clean-order --save-dev

配置你的stylelint配置文件（.stylelintrc.json）以扩展此包：

[!提示] 你不需要安装stylelint-order或将stylelint-order添加到"plugins"中，因为本包已经为你做了这些。

{
  "extends": ["stylelint-config-clean-order"]
}

严重程度选项

默认的严重程度级别是warning，但你可以使用错误变体将严重程度级别更改为error。

{
  "extends": ["stylelint-config-clean-order/error"]
}

自定义

你可以导入原始属性组以添加或覆盖规则选项。请参阅stylelint-order插件文档。

例如，你可以覆盖'properties-order'规则，使组之间没有空行：

const { propertyGroups } = require('stylelint-config-clean-order')

const propertiesOrder = propertyGroups.map((properties) => ({
  noEmptyLineBetween: true,
  emptyLineBefore: 'never', // 不在排序组之间添加空行。
  properties
}))

module.exports = {
  extends: ['stylelint-config-clean-order'],
  rules: {
    'order/properties-order': [
      propertiesOrder,
      {
        severity: 'warning',
        unspecified: 'bottomAlphabetical',
      }
    ]
  }
}

格式化的额外空行

除了stylelint-order插件，本包还覆盖了两条规则（declaration-empty-line-before和at-rule-empty-line-before）以通过在声明之间添加额外的空行来改善最终格式化结果。stylelint-config-clean-order除了这两条规则外不会覆盖其他规则。

如果你希望这些规则生效，请确保在stylelint-config-clean-order之后的配置包不会覆盖它们。

关于排序

我尝试以最合理的方式手动挑选样式顺序，以改善CSS重构的过程；例如，font-size在line-height之前，display在align-items之前。如果你认为某个规则的顺序不合理，请开一个issue，我们可以讨论。谢谢！

许可证

MIT