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"  // 配置路径别名
      }
    }
  }
}
相关推荐
wenzhangli74 分钟前
从源码到思想:OneCode框架模块化设计如何解决前端大型应用痛点
架构·前端框架
断竿散人7 小时前
JavaScript 异常捕获完全指南(下):前端框架与生产监控实战
前端·javascript·前端框架
贵沫末1 天前
React——基础
前端·react.js·前端框架
摸鱼仙人~1 天前
深入理解 classnames:React 动态类名管理的最佳实践
前端·react.js·前端框架
三水气象台2 天前
用户中心Vue3网页开发(1.0版)
javascript·css·vue.js·typescript·前端框架·html·anti-design-vue
杨进军2 天前
React 协调器 render 阶段
前端·react.js·前端框架
Codebee2 天前
50行代码搞定OneCode摄像头插件:快速定制实战指南
前端框架·开源·ecmascript 6
杨进军2 天前
React 中 root.render 与 unmount 函数的流程
前端·react.js·前端框架
上单带刀不带妹2 天前
手写 Vue 中虚拟 DOM 到真实 DOM 的完整过程
开发语言·前端·javascript·vue.js·前端框架
杨进军2 天前
React 创建根节点 createRoot
前端·react.js·前端框架