一、什么是 Stylelint？前端圈的 CSS”质检员”
Stylelint 是目前最流行的 CSS 代码检查工具，能自动检测样式代码中的语法错误、不规范写法和潜在问题，支持 CSS、SCSS、Less 等多种样式语言，甚至能检查 Vue、HTML 中的嵌入式样式。
核心优势：
- 可定制性强：支持 200 + 内置规则，还能扩展社区插件
- 生态完善：兼容 Prettier、webpack 等主流工具
- 持续更新：2025 年 10 月刚发布 15.0.0 版本，优化规则体系
二、快速上手：3 步搞定 Stylelint 配置
1. 基础安装（CSS 项目）
|
# 自动初始化配置（推荐） npm init stylelint # 手动安装核心依赖 npm install –save-dev stylelint stylelint-config-standard |
2. 场景化配置
|
项目类型 |
核心依赖 |
配置文件示例 |
|
普通 CSS |
stylelint-config-standard |
{“extends”: “stylelint-config-standard”} |
|
SCSS 项目 |
stylelint-config-standard-scss |
{“extends”: “stylelint-config-standard-scss”} |
|
Vue3 项目 |
stylelint-config-recommended-vue |
{“extends”: [“stylelint-config-standard”, “stylelint-config-recommended-vue/scss”]} |
3. 运行与修复
|
# 检查所有样式文件 npx stylelint “**/*.{css,scss,vue}” # 自动修复可修复问题 npx stylelint “**/*.{css,scss,vue}” –fix |
三、高手必备：Stylelint 最佳实践
1. 与 Prettier 协同工作
避免格式冲突，需安装冲突屏蔽配置：
|
npm install –save-dev stylelint-config-prettier |
配置文件：
|
{ “extends”: [ “stylelint-config-standard-scss”, “ ] } |
2. 自定义团队规则
按项目需求定制规则，示例：
|
{ “rules”: { // 限制单位使用 “unit-allowed-list”: [“%”, “deg”, “px”, “rem”], // 强制边框用px，内边距用rem “declaration-property-unit-allowed-list”: { “/^border/”: [“px”], “/^padding/”: [“rem”] }, // 禁用ID选择器 “selector-max-id”: 0 } } |
3. 集成到开发流程
- 编辑器实时校验：VS Code 安装 Stylelint 插件，配置自动修复：
|
// .vscode/settings.json { “editor.codeActionsOnSave”: { “source.fixAll.stylelint”: true }, “stylelint.validate”: [“css”, “scss”, “vue”] } |
- 提交校验：配合 husky 在代码提交前自动检查
四、避坑指南：3 大常见问题及解决方案
1. 缩进错误：@stylistic/indentation
问题：报错Expected indentation of 2 spaces
缘由：15.0.0 版本弃用原缩进规则，需用新插件
解决：
|
npm install @stylistic/stylelint-plugin –save-dev |
|
{ “plugins”: [“@stylistic/stylelint-plugin”], “rules”: { “@stylistic/indentation”: 2 } } |
2. 多语言解析冲突
问题：同时检查 CSS 和 Vue 时解析失败
方案：用overrides配置不同文件的解析器：
|
{ “extends”: “stylelint-config-standard”, “overrides”: [ { “files”: [“**/*.vue”], “customSyntax”: “postcss-html” }, { “files”: [“**/*.scss”], “customSyntax”: “postcss-scss” } ] } |
3. 规则失效排查
- 检查配置文件路径：必须在项目根目录（如.stylelintrc.json）
- 确认 extends 顺序：自定义规则需放在社区配置之后
- 检查忽略文件：.stylelintignore 是否误排除目标文件
© 版权声明
文章版权归作者所有，未经允许请勿转载。
相关文章
暂无评论...
