安装依赖

pnpm install stylelint stylelint-config-recommended-vue stylelint-config-recommended postcss-scss postcss postcss-html stylelint-config-standard-scss --save-dev

初始化 stylelint 配置 文件

在根目录创建.stylelintrc.js文件

module.exports = {
  extends: [
    //  渐进式 先通过recommended这两个规则
    "stylelint-config-recommended",
    "stylelint-config-recommended-vue",
    // 之后再用standard这个规则
    "stylelint-config-standard",
    "stylelint-config-standard-vue",
    "stylelint-config-standard-scss",
  ],
  customSyntax: "postcss-scss",
  overrides: [
    {
      files: ["**/*.vue"],
      customSyntax: "postcss-html",
      rules: {
        // Vue 文件特殊规则
        "selector-pseudo-element-no-unknown": [
          true,
          {
            ignorePseudoElements: ["v-deep", "v-global", "v-slotted", ":deep"],
          },
        ],
      },
    },
    {
      files: ["**/*.scss"],
      customSyntax: "postcss-scss",
      rules: {
        // SCSS 特殊规则
        "scss/at-rule-no-unknown": [
          true,
          { ignoreAtRules: ["include", "mixin", "use", "forward"] },
        ],
        "scss/dollar-variable-pattern": null, //变量名允许驼峰
        "scss/at-mixin-pattern": null, //允许驼峰
      },
    },
  ],
  rules: {
    "at-rule-no-unknown": null, // 禁用基础规则
    "no-descending-specificity": null,
    "keyframes-name-pattern": null, // 动画名允许 camelCase
    "selector-class-pattern": null, // 类名允许驼峰
    "selector-id-pattern": null, // id名允许驼峰
    "selector-pseudo-class-no-unknown": [
      true,
      {
        ignorePseudoClasses: ["deep", "global", "slotted"], // Vue 3 作用域选择器
      },
    ],
    "no-invalid-position-declaration": null, // 禁用行内样式（先不禁用）
  },
};

脚本配置

在package.json中添加脚本

{
  "scripts": {
+   "lint:style": "stylelint \"src/**/*.{vue,css,scss}\"",
+   "lint:style:fix": "stylelint \"src/**/*.{vue,css,scss}\" --fix"
  },
  "lint-staged": [
    "*.{js,ts,vue}": [
      "eslint --no-ignore --fix",
      "prettier --write"
    ],
+    "*.{css,scss,vue}": [
+      "stylelint --fix"
+    ]
  ],
}