Vue3.5 + Vite6.x 项目的完整 Stylelint 配置方案，支持 .vue/.html 内联样 ...

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

一、完整依赖安装

1. npm install --save-dev
2.   stylelint
3.   stylelint-config-standard
4.   postcss-html           # 解析 Vue/HTML 文件中的样式
5.   postcss-scss           # 解析 SCSS 语法
6.   postcss-less           # 解析 LESS 语法
7.   stylelint-config-recommended-vue   # Vue 文件支持
8.   stylelint-less          # LESS 专属规则
9.   stylelint-scss          # SCSS 专属规则
10.   stylelint-no-unresolved-module  # 路径解析

复制代码

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

1. {
2.   "extends": [
3.     "stylelint-config-standard",
4.     "stylelint-config-recommended-vue",
5.     "stylelint-less",
6.     "stylelint-scss"
7.   ],
8.   "plugins": ["stylelint-no-unresolved-module"],
9.   "overrides": [
10.     {
11.       "files": ["**/*.vue", "**/*.html"],
12.       "customSyntax": "postcss-html"
13.     },
14.     {
15.       "files": ["**/*.scss"],
16.       "customSyntax": "postcss-scss"
17.     },
18.     {
19.       "files": ["**/*.less"],
20.       "customSyntax": "postcss-less"
21.     }
22.   ],
23.   "rules": {
24.     // 通用规则
25.     "selector-pseudo-class-no-unknown": [
26.       true,
27.       { "ignorePseudoClasses": ["deep", "global", "slotted"] }
28.     ],
29.     "selector-pseudo-element-no-unknown": [
30.       true,
31.       { "ignorePseudoElements": ["v-deep", "v-global", "v-slotted"] }
32.     ],
33.     "at-rule-no-unknown": [
34.       true,
35.       { "ignoreAtRules": ["tailwind", "apply", "layer", "config", "mixin", "include"] }
36.     ],
38.     // LESS 专属规则
39.     "less/no-undef-variables": true,
40.     "less/color-no-invalid-hex": true,
42.     // SCSS 专属规则
43.     "scss/at-rule-no-unknown": [
44.       true,
45.       { "ignoreAtRules": ["tailwind", "apply", "layer", "config", "mixin", "include"] }
46.     ],
48.     // 路径解析规则
49.     "plugin/no-unresolved-module": {
50.       "alias": {
51.         "@": "./src"
52.       }
53.     }
54.   }
55. }

复制代码

三、配套文件配置

• package.json 脚本
  

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

复制代码

• 忽略文件 .stylelintignore
  

1. # .stylelintignore
2. # 旧的不需打包的样式库
3. *.min.css
5. # 其他类型文件
6. *.js
7. *.jpg
8. *.png
9. *.eot
10. *.ttf
11. *.woff
12. *.json
14. # 测试和打包目录
15. /test/
16. /dist/
17. /node_modules/
18. /lib/

复制代码

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

1. import { defineConfig } from 'vite'
2. import vue from '@vitejs/plugin-vue'
3. import stylelintPlugin from 'vite-plugin-stylelint'
5. export default defineConfig({
6.   plugins: [
7.     vue(),
8.     stylelintPlugin({
9.       fix: true,
10.       include: ['src/**/*.{vue,css,scss,less,html}'],
11.       exclude: ['node_modules']
12.     })
13.   ]
14. })

复制代码

四、

1、SCSS @use 语法报错

1. {
2.   "rules": {
3.     "scss/at-rule-no-unknown": [
4.       true,
5.       { "ignoreAtRules": ["use", "forward"] }
6.     ]
7.   }
8. }

复制代码

2、Vue3 :deep() 伪类告诫

1. {
2.   "rules": {
3.     "selector-pseudo-class-no-unknown": [
4.       true,
5.       { "ignorePseudoClasses": ["deep", "slotted", "global"] }
6.     ]
7.   }
8. }

复制代码

3、解析 .vue 文件中的

1. {
2.   "overrides": [
3.     {
4.       "files": ["**/*.vue"],
5.       "customSyntax": "postcss-html"  // 关键配置
6.     }
7.   ]
8. }

复制代码

4、变量未辨认（以 LESS 为例）

1. {
2.   "rules": {
3.     "less/no-undef-variables": true  // 检查未定义变量
4.   }
5. }

复制代码

5、@import 路径报错

1. {
2.   "plugins": ["stylelint-no-unresolved-module"],
3.   "rules": {
4.     "plugin/no-unresolved-module": {
5.       "alias": {
6.         "@": "./src"  // 配置路径别名
7.       }
8.     }
9.   }
10. }

复制代码

免责声明：如果侵犯了您的权益，请联系站长，我们会及时删除侵权内容，谢谢合作！更多信息从访问主页：qidao123.com:ToB企服之家，中国第一个企服评测及商务社交产业平台。