prettier 默认不排序 css 属性，因其设计哲学是「不介入样式语义」，明确排除 sortproperties 等语义规则；css 属性排序需交由 stylelint + postcss-sorting 等专用工具实现。
为什么 Prettier 默认不排序 CSS 属性
Prettier 的设计哲学是「不介入样式语义」，sortProperties 这类规则它压根不支持——不是忘了加，是刻意排除。你配了也白配，prettier.config.js 里写 sortProperties: true 不会报错，但完全没效果。
真正能排序的只有专门处理 CSS 的工具，比如 stylelint 或 postcss-sorting。Prettier 只负责缩进、分号、引号这些基础格式，属性顺序得交给别人。
用 stylelint + postcss-sorting 实现自动排序
VSCode 本身不执行排序逻辑，靠的是插件调用外部 linter。你需要三样东西协同工作：stylelint（校验）、postcss-sorting（排序规则）、stylelint-config-standard（或自定义配置）。
- 安装依赖：
npm install --save-dev stylelint postcss-sorting stylelint-config-standard - 在项目根目录建
.stylelintrc.json，关键字段：{ "extends": ["stylelint-config-standard"], "plugins": ["postcss-sorting"], "rules": { "plugin/postcss-sorting": { "order": "alphabetical" } } } - 确保 VSCode 安装了
Stylelint插件（作者：Stylelint），并在设置里打开"stylelint.autoFixOnSave": true
VSCode 设置里别漏掉这三项
光有配置文件不够，VSCode 必须知道「什么时候调用、调用谁、怎么改」。容易被跳过的三个开关：
-
"editor.formatOnSave": true—— 否则保存不触发任何格式化 -
"editor.defaultFormatter": "esbenp.prettier-vscode"—— 让 JS/TS/HTML 走 Prettier，但注意：CSS 文件默认也会被它抢过去格式化 -
"[css]": { "editor.defaultFormatter": "stylelint.vscode-stylelint" }—— 强制 CSS 类型文件交由 stylelint 处理，否则 Prettier 会先跑一遍再丢给 stylelint，结果就是属性又被打乱一次
排序后和 Prettier 冲突怎么办
冲突常见于缩进风格、分号、大括号位置。比如 Prettier 坚持单行声明加换行，而 stylelint 排序后可能把多条属性塞进一行——这时要让 stylelint「只管排序，其他不管」。
在 .stylelintrc.json 的 rules 里显式关掉和 Prettier 重叠的规则：
"declaration-block-semicolon-newline-after": null"block-opening-brace-newline-after": null"indentation": null
否则两个工具来回覆盖，保存三次可能得到三种结果。
最麻烦的地方其实是「CSS-in-JS」场景，比如 styled-components 里的模板字符串。Prettier 能识别并格式化，但 stylelint 默认不处理这类内容——得额外加 stylelint-processor-styled-components，而且排序规则在字符串里大概率失效。这种地方就别硬刚了，手动排吧。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
