有没有过这种情况？
你辛辛苦苦写的 CSS，保存后打开一看——position挤在width后面，color跑去了display底下，像菜市场摊位乱摆；或者同事改了个按钮样式，属性顺序全乱，你盯着代码半天反应不过来：“这行到底是管位置的还是管颜色的？”

上周我刚被这事儿烦到摔鼠标——帮新人改他的登录页，20 个 class 里有 15 个属性顺序颠倒，手机端显示全错。我花半小时调完，顺嘴说了句“你怎么不设自动排序？”他瞪圆眼睛：“CSS 还能自动排？”

今天把我踩了 3 次坑才摸透的**“CSS 自动排序魔法”**分享给你，从安装到用熟，一步一步来，包你看完就能上手。

先给 VSCode 装两个“小助手”

要实现自动排序，得靠两个工具：Stylelint（管规则的警察）和VSCode 的 Stylelint 插件（执行命令的小工）。

第一步：装 VSCode 插件

打开 VSCode 扩展商店（左上角第五个图标），搜这两个名字直接装：

  • Stylelint（官方插件，必装）：负责读取规则，帮你改属性顺序；
  • Prettier（可选，但建议装）：帮你顺带格式化缩进、换行，比如把color:red变成color: red。

装完后重启 VSCode——这步别忘，不然插件不生效！

第二步：给项目装“工具包”

接下来要让项目知道“我要用这些规则管 CSS”。打开终端（项目根目录，也就是有package.json的文件夹），输入下面命令：

# 用npm的话（大部分项目都是这个）
npm install --save-dev stylelint stylelint-config-standard stylelint-order

# 用yarn的话（如果你爱用这个）
yarn add --dev stylelint stylelint-config-standard stylelint-order

这里解释下：--save-dev是告诉项目“这是开发时用的工具，上线不用带”；三个包分别是：

  • stylelint：核心规则引擎；
  • stylelint-config-standard：标准规则库（比如“不能用未知的 CSS 属性”）；
  • stylelint-order：专门管属性顺序的插件。

给 Stylelint 写个“排队规则”

现在要让 Stylelint 知道“属性该怎么排”。在项目根目录新建.stylelintrc.json文件（名字别改，固定这么叫），复制下面的内容：

{
  "extends": ["stylelint-config-standard"],
  "plugins": ["stylelint-order"],
  "rules": {
    "comment-empty-line-before": null,
    "order/properties-order": [
      "position",
      "top",
      "right",
      "bottom",
      "left",
      "z-index",
      "display",
      "flex-direction",
      "justify-content",
      "align-items",
      "flex-wrap",
      "float",
      "clear",
      "width",
      "height",
      "min-width",
      "max-width",
      "min-height",
      "max-height",
      "margin",
      "margin-top",
      "margin-right",
      "margin-bottom",
      "margin-left",
      "padding",
      "padding-top",
      "padding-right",
      "padding-bottom",
      "padding-left",
      "border",
      "border-width",
      "border-style",
      "border-color",
      "border-radius",
      "box-sizing",
      "background",
      "background-color",
      "background-image",
      "background-position",
      "background-repeat",
      "color",
      "font-family",
      "font-size",
      "font-weight",
      "line-height",
      "text-align",
      "text-decoration",
      "opacity",
      "box-shadow",
      "filter",
      "transform",
      "transition",
      "animation",
      "cursor",
      "user-select",
      "pointer-events"
    ],
    "selector-pseudo-class-no-unknown": [
      true,
      {
        "ignorePseudoClasses": ["global"]
      }
    ]
  }
}

别怕看不懂规则——其实就是给属性分了 5 队，每队按顺序排：

  1. 先定“位置”（比如position: absolute）；
  2. 再摆“布局”（比如display: flex）；
  3. 然后算“盒子大小”（比如width: 100px）；
  4. 接着调“视觉效果”（比如color: red）；
  5. 最后加“动画”（比如transition: all 0.3s）。

划重点：如果想改顺序，直接调整数组里的属性名就行——比如你想把display放到“定位”后面，直接挪位置，跟调整排队顺序一样简单！

告诉 VSCode：“保存时自动干活”

现在要让 VSCode 知道“保存文件时，用 Stylelint 自动排属性”。在项目根目录新建.vscode/settings.json（名字固定），复制下面的内容：

{
  "stylelint.enable": true, // 开启Stylelint
  "editor.formatOnSave": true, // 保存时自动格式化
  "editor.codeActionsOnSave": {
    "source.fixAll.stylelint": "explicit" // 保存时自动修复Stylelint能改的问题
  },
  "stylelint.validate": ["css", "scss", "less", "vue"], // 管这些文件类型
  // 给不同文件指定格式化器（避免冲突）
  "[css]": { "editor.defaultFormatter": "vscode.css-language-features" },
  "[scss]": { "editor.defaultFormatter": "vscode.css-language-features" },
  "[less]": { "editor.defaultFormatter": "vscode.css-language-features" },
  "[vue]": { "editor.defaultFormatter": "vscode.css-language-features" },
  // 关掉VSCode自带的CSS验证（避免和Stylelint冲突）
  "css.validate": false,
  "less.validate": false,
  "scss.validate": false
}

这里不用记每行意思，直接复制就行——核心是告诉 VSCode：“保存的时候，喊 Stylelint 来改属性顺序！”

测试一下：是不是真的能自动排？

建个test.css文件，写段乱序的 CSS：

/* 保存前的“乱队” */
.test {
  color: red;
  position: absolute;
  width: 100px;
  top: 0;
  padding: 10px;
}

保存文件——看！是不是自动变成这样了？

/* 保存后的“整齐队” */
.test {
  position: absolute;
  top: 0;
  width: 100px;
  padding: 10px;
  color: red;
}

我第一次看到这效果，直接喊了句“我去”——终于不用手动拖属性了！

踩过的坑：帮你提前避避雷

我刚开始配的时候，也踩了 3 个坑，现在告诉你怎么解决：

1. 保存后没反应？

先看 VSCode 右下角——是不是选对了语言？比如你写的是.vue文件，得选成“Vue”，不然 VSCode 不知道要管 CSS。

2. 有些错误改不了？

比如selector-pseudo-class-no-unknown（未知伪类），如果是 Vue 的::v-deep，要去.stylelintrc.json里加ignorePseudoClasses: ["deep"]（参考上面的配置），或者手动改——毕竟有些规则是“原则问题”，得自己把关。

3. 团队项目怎么统一？

把.stylelintrc.json和.vscode/settings.json放进 git 仓库！这样队友拉代码后，不用自己配，打开就能用——不然你排你的序，他排他的，代码跟方言似的没法沟通。

最后：这玩意儿到底能帮你省多少事？

举个真实例子：
我之前改一个老项目的 CSS，200 行代码里有 50 个 class 属性顺序乱，手动调了 2 小时；现在新项目用了这配置，写 CSS 只需要关心“这个属性管什么”，保存就自动排好——省下来的时间，我能多喝两杯奶茶！

其实 CSS 自动排序的核心不是“省时间”，是让代码更“可读”——不管是你自己改，还是同事接手，都能快速找到想要的属性，不用翻半天找position在哪。

最后想说：
别怕刚开始配置麻烦——我第一次配的时候，把z-index漏了，结果定位元素跑错位置；还有 VSCode 设置没保存，改了半天没反应。但现在我写 CSS，保存就完事儿，属性整整齐齐的，自己看着舒服，同事看了也不吐槽。

你也试试，说不定比我还快上手！
有问题评论区问我，我帮你踩过的坑，你别再踩一遍～

🎉 现在，打开 VSCode，开始你的“自动排序之旅”吧！