Vue3-ts：Stylelint / CSS/SCSS/Less 代码检查工具

一、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

stylelint16版本升级 | 李祥的网络日志

九、欢迎交流指正

参考链接

Rules | Stylelint

indentation | Stylelint中文文档 | Stylelint中文网