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"  // 配置路径别名
      }
    }
  }
}
相关推荐
硅谷工具人1 天前
vue3边学边做系列(3)-路由缓存接口封装
前端·缓存·前端框架·vue
whltaoin2 天前
Vue 与 React 深度对比:技术差异、选型建议与未来趋势
前端·前端框架·vue·react·技术选型
Baklib梅梅2 天前
2025文档管理软件推荐:效率、安全与协作全解析
前端·ruby on rails·前端框架·ruby
一只猪皮怪53 天前
React 18 前端最佳实践技术栈清单(2025版)
前端·react.js·前端框架
Stanford_11063 天前
React前端框架有哪些?
前端·微信小程序·前端框架·微信公众平台·twitter·微信开放平台
千叶寻-4 天前
package.json详解
前端·vue.js·react.js·webpack·前端框架·node.js·json
家里有只小肥猫4 天前
react 初体验2
前端·react.js·前端框架
前端达人4 天前
「React实战面试题」:React.memo为什么失效了?
前端·javascript·react.js·前端框架·ecmascript
snowbitx4 天前
一篇文章彻底搞懂前端架构层面分层设计
前端·设计模式·前端框架