1、依赖

{
    "postcss": "^8.4.49",
    "postcss-html": "^1.7.0",
    "postcss-sass": "^0.5.0",
    "postcss-scss": "^4.0.9",
    "stylelint": "^16.10.0",
    "stylelint-config-html": "^1.1.0",
    "stylelint-config-recess-order": "^5.1.1",
    "stylelint-config-standard-scss": "^13.1.0",
}

命令：npm install --save-dev postcss postcss-html postcss-sass postcss-scss stylelint stylelint-config-html stylelint-config-recess-order stylelint-config-standard-scss

stylelint是开发过程中需要的工具，通过--save-dev下载在devDependencies 中

stylelint-config-html: 这是一个 Stylelint 配置，专门用于处理 HTML 文件中的 CSS。它提供了一些规则和配置，以便在 HTML 文件中更好地检查和管理样式。 stylelint-config-standard-scss: 这是一个 Stylelint 配置，专门用于 SCSS 文件。它基于 Stylelint 的标准配置，但扩展了一些规则以支持 SCSS 特性。

2、vscode配置

在项目.vscode的settings.json添加：

//自动修复的文件类型
"stylelint.validate": [
  "css",
  "scss",
  "sass",
  "vue",
  "html"
],
"editor.codeActionsOnSave": {
  "source.fixAll.stylelint": "explicit"
}

source.fixAll.eslint：保存自动修复eslint问题

source.fixAll.stylelint：保存自动修复stylelint问题

3、.stylelintrc.js配置

module.exports = {
  extends: [
    "stylelint-config-recess-order",
    "stylelint-config-html"
  ],
  overrides: [
    {
      "files": ["**/*.{vue,html}"],
      "customSyntax": "postcss-html"
    },
    {
      "files": ["**/*.scss"],
      "customSyntax": "postcss-scss"
    },
    {
      "files": ["**/*.sass"],
      "customSyntax": "postcss-sass"
    },
  ],
  plugins: [
    "stylelint-scss"
  ],
  rules: {
    'at-rule-no-unknown': [
      true,
      {
        ignoreAtRules: [
          "mixin",
          "include",
          "tailwind",
          "extend",
          "apply",
          "variants",
          "responsive",
          "screen",
        ],
      },
    ],
    'scss/at-rule-no-unknown': true,
    "selector-class-pattern": null, // 选择器类格式，默认是短横线
    "value-no-vendor-prefix": null, // 关闭 vendor-prefix (为了解决多行省略 -webkit-box)
    "value-keyword-case": null, // 解决在 scss 中使用 v-bind 大写单词报错
    'selector-pseudo-element-no-unknown': [
      true,
      // { ignorePseudoElements: ['v-deep'] },
    ],
  },
};

其中：

selector-class-pattern：不为null时，类似demo_class下划线命名会报错，elementpuls组件库都是下划线命名

4、使用

在package.json中配置：

  "scripts": {
    "stylelint": "stylelint **/*.{html,vue,css,sass,scss,less} --fix",
  },

检测并修复样式问题