一、Stylelint 简介
Stylelint 是一个强大的、现代化的 CSS/SCSS/Less 代码检查工具，旨在帮助开发者避免错误并坚持一致的代码风格。它类似于 ESLint（针对 JavaScript 的代码检查工具），但专注于样式表语言。Stylelint 允许你定义一套代码风格规则，然后自动检查你的 CSS/SCSS/Less 代码是否符合这些规则。
二、Stylelint 的主要特点和用途包括
| 序号 | 特点 / 用途 | 解释 |
| 1 | 代码质量 | 通过检查代码中的潜在错误（如属性值的拼写错误、不支持的 CSS 属性等），帮助提高代码质量。 |
| 2 | 代码风格一致性 | 确保整个项目或团队中的样式表遵循一致的代码风格，这有助于代码的可读性和可维护性。 |
| 3 | 可配置性 | Stylelint 提供了大量的内置规则，并且允许你自定义规则或覆盖现有规则，以满足特定的编码标准或团队偏好。 |
| 4 | 插件系统 | 支持通过插件扩展其功能，这些插件可以添加新的规则、修复功能或集成其他工具。 |
| 5 | 自动化 | 可以轻松地集成到构建流程（如 Webpack、Gulp、Grunt 等）或编辑器（如 VS Code、Sublime Text、Atom 等）中，实现自动化的代码检查和修复。 |
| 6 | 社区支持 | Stylelint 拥有一个活跃的社区，不断贡献新的规则、插件和修复，以及提供支持和帮助。 |
| 7 | 用途 | 强制实施一致的命名约定（如类名、ID 选择器的命名规则） |
| 8 | 用途 | 禁止或限制某些 CSS 特性（如 !important 声明、内联样式等）的使用。 |
| 9 | 用途 | 检查属性值的有效性（如颜色值、字体族名称等）。 |
| 10 | 用途 | 确保代码遵循特定的顺序或结构（如属性排序、媒体查询的嵌套等）。 |
| Stylelint 是一个强大的工具，可以帮助你编写更高质量、更一致的 CSS/SCSS/Less 代码。 | ||
三、安装 Stylelint
pnpm install stylelint stylelint-config-standard stylelint-config-recommended-scss stylelint-scss
四、配置 Stylelint
在项目根目录下创建一个 .stylelintrc.json 或 .stylelintrc.js 文件来配置 Stylelint
{
"extends": [
"stylelint-config-standard",
"stylelint-config-recommended-scss"
],
"rules": {
"selector-max-id": 1,
"value-keyword-case": null,
"alpha-value-notation": null,
"color-function-notation": null,
"comment-empty-line-before": null
},
"ignoreFiles": ["**/node_modules/**", "dist/**/*.css"]
}五、husky + lint-staged
hvue3-ts：husky + prettier / 代码格式化工具-CSDN博客
package.json文件lint-staged
"husky": {
"hooks": {
"pre-commit": "lint-staged"
}
},
"lint-staged": {
"*.{vue,scss,css,less}": [
"stylelint --fix",
"git add"
]
}六、测试 Stylelint
测试成功
七、手动测试
通过命令行手动运行 Stylelint 来检查整个项目的样式文件：
npx stylelint "**/*.{vue,css,scss,less}"
测试成功
八、过程记录
记录一、Unknown rule indentation
原因：
发现16版本移除了之前的76条规则，包括indentation缩进等 issues