格式化stylelint

Stylelint 是一个强大的 CSS（及预处理器、CSS-in-JS）代码检查工具，用于自动检测样式代码中的错误、规范代码风格并强制执行团队约定，从而提升代码质量和可维护性。以下是其核心作用与配置详解：

🔍 一、Stylelint 的核心作用

1. 错误预防与语法检查
   • 检测无效语法（如错误的 CSS 属性、选择器、单位）和浏览器兼容性问题。

   • 识别未定义的变量、重复选择器或冲突样式，避免运行时错误。

2. 代码风格统一
   • 强制执行缩进、引号、空格等格式规范（如缩进 2 空格、单引号）。

   • 规范属性书写顺序（如按布局→盒模型→文字→视觉的顺序排列），提升可读性。

3. 支持多种语法
   • 原生 CSS、SCSS/Sass、Less、CSS-in-JS（如 Vue 单文件组件、Styled Components）。

   • 支持从 HTML、Markdown 中提取内联样式进行检查。

4. 自动化修复
   通过 --fix 参数或编辑器集成，自动修复可修正的问题（如缩进、引号格式）。

⚙️ 二、基础配置步骤

1. 安装依赖

npm install stylelint stylelint-config-standard --save-dev

• 核心包：stylelint

• 推荐配置：stylelint-config-standard（官方标准规则集）。

2. 配置文件（.stylelintrc.json）

{
“extends”: “stylelint-config-standard”,
“rules”: {
“indentation”: 2, // 缩进2空格
“color-hex-case”: “lower”, // 十六进制颜色小写
“selector-class-pattern”: null // 关闭类名格式检查
}
}

• extends：继承预设配置（如 stylelint-config-standard）。

• rules：覆盖或扩展规则，优先级高于继承配置。

3. 运行检查

npx stylelint “**/*.css” --fix # 检查并自动修复

🛠️ 三、进阶配置技巧

1. 支持预处理器（如 SCSS）

npm install stylelint-config-standard-scss --save-dev

配置文件：
{
“extends”: “stylelint-config-standard-scss”,
“rules”: {
“scss/at-import-partial-extension”: null // 允许省略 .scss 扩展名
}
}

2. 属性顺序规范

npm install stylelint-order stylelint-config-recess-order --save-dev

配置文件：
{
“extends”: [
“stylelint-config-standard”,
“stylelint-config-recess-order” // 按类型分组排序属性
]
}

示例顺序：定位属性 → 盒模型 → 文字 → 视觉 → 动画。

3. 忽略文件（.stylelintignore）

node_modules/
dist/*.css

4. 编辑器集成（VS Code）

5. 安装插件 https://marketplace.visualstudio.com/items?itemName=stylelint.vscode-stylelint

6. 配置 settings.json：
   {
   “stylelint.enable”: true,
   “css.validate”: false, // 禁用内置检查
   “editor.codeActionsOnSave”: {
   “source.fixAll.stylelint”: true // 保存时自动修复
   }
   }

🧩 四、团队协作最佳实践

1. 共享配置包
   发布自定义配置（如 @team/stylelint-config），团队项目统一继承：
   {
   “extends”: “@team/stylelint-config”
   }

   。

2. 提交前自动检查
   用 husky + lint-staged 在 Git 提交时触发检查：
   // package.json
   {
   “lint-staged”: {
   “*.{css,scss}”: [“stylelint --fix”]
   }
   }

   。

3. CI/CD 集成
   在 GitHub Actions 中自动运行检查：

   • name: Run Stylelint
     run: npx stylelint “**/*.css”

   。

💎 五、配置示例（支持 Vue + SCSS）

{
“extends”: [
“stylelint-config-standard-scss”,
“stylelint-config-recess-order”,
“stylelint-config-html/vue” // 支持 Vue 模板
],
“overrides”: [
{
“files”: [“**/*.vue”],
“customSyntax”: “postcss-html” // 解析 Vue 内联样式
}
],
“rules”: {
“selector-pseudo-class-no-unknown”: [
true,
{ “ignorePseudoClasses”: [“deep”, “global”] } // 忽略 Vue 穿透选择器
]
}
}
。

Stylelint 通过规则检查 + 自动修复，成为保障 CSS 代码质量的基石。核心配置包括：

1. 继承预设（如 stylelint-config-standard）
2. 按需扩展规则（缩进、命名规范等）
3. 集成预处理器与框架支持（SCSS/Vue）
4. 通过编辑器/CI 实现自动化。
   合理配置后，可显著提升团队协作效率与代码可维护性。