Vue3.5 + Vite6.x 项目的完整 Stylelint 配置方案，支持 .vue/.html 内联样式、Less/SCSS/CSS 等多种文件类

Vue3.5 + Vite6.x 项目的完整 Stylelint 配置方案，支持 .vue/.html 内联样式、Less/SCSS/CSS 等多种文件类型

一、完整依赖安装

npm install --save-dev 
  stylelint 
  stylelint-config-standard 
  postcss-html           # 解析 Vue/HTML 文件中的样式
  postcss-scss           # 解析 SCSS 语法
  postcss-less           # 解析 LESS 语法
  stylelint-config-recommended-vue   # Vue 文件支持
  stylelint-less          # LESS 专属规则
  stylelint-scss          # SCSS 专属规则
  stylelint-no-unresolved-module  # 路径解析

二、完整配置文件 .stylelintrc.json

{
  "extends": [
    "stylelint-config-standard",
    "stylelint-config-recommended-vue",
    "stylelint-less",
    "stylelint-scss"
  ],
  "plugins": ["stylelint-no-unresolved-module"],
  "overrides": [
    {
      "files": ["**/*.vue", "**/*.html"],
      "customSyntax": "postcss-html"
    },
    {
      "files": ["**/*.scss"],
      "customSyntax": "postcss-scss"
    },
    {
      "files": ["**/*.less"],
      "customSyntax": "postcss-less"
    }
  ],
  "rules": {
    // 通用规则
    "selector-pseudo-class-no-unknown": [
      true,
      { "ignorePseudoClasses": ["deep", "global", "slotted"] }
    ],
    "selector-pseudo-element-no-unknown": [
      true,
      { "ignorePseudoElements": ["v-deep", "v-global", "v-slotted"] }
    ],
    "at-rule-no-unknown": [
      true,
      { "ignoreAtRules": ["tailwind", "apply", "layer", "config", "mixin", "include"] }
    ],

    // LESS 专属规则
    "less/no-undef-variables": true,
    "less/color-no-invalid-hex": true,

    // SCSS 专属规则
    "scss/at-rule-no-unknown": [
      true,
      { "ignoreAtRules": ["tailwind", "apply", "layer", "config", "mixin", "include"] }
    ],

    // 路径解析规则
    "plugin/no-unresolved-module": {
      "alias": {
        "@": "./src"
      }
    }
  }
}

三、配套文件配置

1. package.json 脚本

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

2. 忽略文件 .stylelintignore

   .stylelintignore

   旧的不需打包的样式库

   *.min.css

   其他类型文件

   *.js
   *.jpg
   *.png
   *.eot
   *.ttf
   *.woff
   *.json

   测试和打包目录

   /test/
   /dist/
   /node_modules/
   /lib/

3. Vite 集成配置 (vite.config.js)

   import { defineConfig } from 'vite'
   import vue from '@vitejs/plugin-vue'
   import stylelintPlugin from 'vite-plugin-stylelint'

   export default defineConfig({
   plugins: [
   vue(),
   stylelintPlugin({
   fix: true,
   include: ['src/**/*.{vue,css,scss,less,html}'],
   exclude: ['node_modules']
   })
   ]
   })

四、

1、SCSS @use 语法报错

{
  "rules": {
    "scss/at-rule-no-unknown": [
      true,
      { "ignoreAtRules": ["use", "forward"] }
    ]
  }
}

2、Vue3 :deep() 伪类警告

{
  "rules": {
    "selector-pseudo-class-no-unknown": [
      true,
      { "ignorePseudoClasses": ["deep", "slotted", "global"] }
    ]
  }
}

3、解析 .vue 文件中的

{
  "overrides": [
    {
      "files": ["**/*.vue"],
      "customSyntax": "postcss-html"  // 关键配置
    }
  ]
}

4、变量未识别（以 LESS 为例）

{
  "rules": {
    "less/no-undef-variables": true  // 检查未定义变量
  }
}

5、@import 路径报错

{
  "plugins": ["stylelint-no-unresolved-module"],
  "rules": {
    "plugin/no-unresolved-module": {
      "alias": {
        "@": "./src"  // 配置路径别名
      }
    }
  }
}