stylelint 本身不处理属性顺序，order/properties-order 规则必须由 stylelint-order 插件提供；未安装该插件或未正确配置 plugins 数组、规则位置错误、被预设配置覆盖等均会导致失效。
Stylelint 本身不处理属性顺序，order/properties-order 规则必须由 stylelint-order 插件提供 —— 没装这个插件，配了也无效。
为什么 order/properties-order 不生效？常见失效原因
多数人卡在这一步：配置写了、插件也装了，但 stylelint --fix 完全不动 CSS 属性顺序。根本原因通常是以下之一：
-
stylelint-order没正确加入plugins数组（注意不是extends） - 配置文件名或格式不被 Stylelint 识别（比如用了
.stylelintrc但内容是 JS 对象，应改用.stylelintrc.js） - 规则写在了错误层级 ——
order/properties-order必须放在rules下，不能嵌套在overrides或其他对象里，除非你明确想只对某类文件启用 - 项目里同时用了
stylelint-config-rational-order或stylelint-config-recess-order这类预设，它们内部已声明order/properties-order，会覆盖你手动写的规则
手写 order/properties-order 的三种写法及适用场景
该规则接受数组形式的配置，支持三种粒度：扁平列表、分组对象、混合模式。选哪种取决于你是否需要空行分隔或语义分组。
✅ 推荐从最简开始 —— 扁平数组（适合小项目或快速统一）：
"order/properties-order": [ "position", "top", "right", "bottom", "left", "z-index", "display", "flex", "justify-content" ]
⚠️ 注意：这个列表就是最终顺序，漏写某个属性（比如 margin），它会被视为“未定义顺序”，默认排在最后，不报错也不调整。
✅ 分组写法（推荐中大型项目）：
"order/properties-order": [
{ "groupName": "Positioning", "properties": ["position", "top", "z-index"] },
{ "groupName": "Flexbox", "properties": ["display", "flex", "justify-content"] },
{ "emptyLineBefore": "always", "properties": ["color", "font-size"] }
]
这样能自动在组之间插入空行（emptyLineBefore: "always"），且每组内属性顺序受控；但要注意 groupName 只是注释作用，不影响校验逻辑。
stylelint --fix 修复失败时的排查路径
运行修复命令后属性没动，别急着重写配置，先检查这几处：
- 确认命令中指定了文件类型：比如
stylelint "**/*.{css,scss}" --fix，否则可能因匹配不到文件而静默跳过 - 检查当前文件是否被
ignoreFiles或.stylelintignore排除（常见误配："**/*.js"会意外排除App.vue中的<style></style>块） - VS Code 保存时自动修复失效？看
settings.json是否有冲突项："editor.formatOnSave": true和"source.fixAll.stylelint": true不能共存，后者优先级更高，前者反而会干扰 - 如果用的是 Vue/Svelte 等框架组件，确保配置中启用了对应语法解析器，例如
customSyntax: "postcss-html"，否则<style></style>块根本不会被解析
真正容易被忽略的点是：分组配置中的 emptyLineBefore 只影响自动修复后的格式，不参与 lint 报错；也就是说，即使你写了 "emptyLineBefore": "always"，Stylelint 也不会因为“两组之间没空行”而报错 —— 它只管属性顺序，不管空行。空行是否强制，得靠 declaration-empty-line-before 这类独立规则来约束。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
