当前位置：首页 > news >正文

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

news 来源：原创 2025/6/22 18:11:32

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"
      }
    }
  }
}

三、配套文件配置

package.json 脚本

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

忽略文件 .stylelintignore

# .stylelintignore
# 旧的不需打包的样式库
*.min.css
 
# 其他类型文件
*.js
*.jpg
*.png
*.eot
*.ttf
*.woff
*.json
 
# 测试和打包目录
/test/
/dist/
/node_modules/
/lib/

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"  // 配置路径别名
      }
    }
  }
}