升级至Stylelint v15.11.0后如何维护样式排序规则

问题原因 #

stylelint从v14版本开始，将order/order和order/properties-alphabetical-order这类排序规则从核心库中移除，转移到了独立的stylelint-order插件中。你升级到v15后未安装该插件，所以会提示“未知规则”错误。

解决步骤 #

1. 安装stylelint-order插件
   执行以下命令安装依赖：

npm install stylelint-order --save-dev
# 或使用yarn
yarn add stylelint-order --dev

2. 更新.stylelintrc.json配置

• 在配置中添加stylelint-order插件
• 替换废弃的stylelint-config-recommended：如果项目用SCSS，推荐使用stylelint-config-standard-scss；纯CSS则用stylelint-config-standard
• 若需要继续禁用排序规则，现在可以正常配置；若要维护自定义排序，可添加对应的规则配置

示例配置：

{
  "extends": [
    "stylelint-config-standard-scss",
    "stylelint-config-sass-guidelines",
    "stylelint-config-prettier"
  ],
  "plugins": [
    "stylelint-order"
  ],
  "rules": {
    // 若需禁用排序规则，配置为null即可消除错误
    "order/order": null,
    "order/properties-alphabetical-order": null,
    // 若要自定义样式排序（示例：按属性分组），可取消以下注释并调整
    // "order/order": [
    //   "declarations",
    //   "rules",
    //   "at-rules"
    // ],
    // "order/properties-order": [
    //   "position",
    //   "top",
    //   "right",
    //   "bottom",
    //   "left",
    //   "z-index",
    //   "display",
    //   "flex-direction",
    //   // 按需添加其他属性分组
    // ]
  }
}

补充说明 #

• stylelint-config-prettier并未废弃，安装最新版可兼容v15，用于自动关闭与Prettier冲突的stylelint规则
• stylelint-config-sass-guidelines本身依赖排序规则，安装stylelint-order后才能确保其相关排序逻辑正常运行（若你未禁用的话）

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