前言

Stylelint官方文档

与之前学习的 ESLint 相类似,Stylelint作为一个css linter,可帮助我们避免编写错误的css样式代码,并强制执行预先协商好的“约定”配置,配置可从标准的配置继承而来,也可重写!

Stylelint的相关特性

  1. 提供的现成的业界css语法和功能的自定义规则;
  2. 支持插件的方式,可创建自定义规则;
  3. 提供自我修复的能力,自动修复配置告知的预警规则;
  4. 可根据自己的习惯进行自定义;
  5. 可从htmlmarkdowncss-in-js等文件中提取css进行校验;
  6. 可扩展至scsssasslesssugarSS

👉 Stylelint可有效帮助我们避免一些不必要的错误,比如有:

  • 拼写错误的css属性;
  • 重复的选择器;
  • 畸形的grid布局区域

👉 Stylelint还可按照配置约定来执行,比如有:

  • 设置适用单位;
  • 强制命名模式,比如自定义属性;
  • 设置限制,比如设置id选择器的数量;
  • 指定符号,比如现代颜色函数;

如何使用?

关于Stylelint的使用,一般 🈶 👇 3⃣ 个步骤:

安装相关的环境以及配置

通过命令来安装对应的检查程序以及对应约定配置方案

1
npm install --save-dev stylelint stylelint-config-standar

同时创建对应的配置文件方案

在根目录中创建对应的配置文件.stylelintrc.json(这里允许不同的文件格式后缀,包括有:.stylelintrc.{cjs,js,json,yaml,yml}文件、stylelint.config.{cjs,js}导出 JS 对象的文件、定义在package.json中的stylelint属性)

🌠 这里一般是推荐采用与对应文件格式后缀相对应的语法来编写,比如如果定义为.stylelintrc.js,则采用module.exports = {},如果定义为.stylelintrc.yaml文件,则采用yaml文件格式的方式来编写!!!

1
2
3
{
"extends": "stylelint-config-standard"
}

执行检测程序

1
npx stylelint "**/**.css"

相关成员

StyleLint

关于Stylelint一般 🈶 👇 几个常见的核心属性:

extends

通过对该属性的配置,可实现从官方/三方/自定义的配置中继承配置,免去自己重头重复造轮子,遵循业界规范,在继承的同时还支持重写扩展自定义语法等操作!
可支持设置字符串也可以是数组,采用数组的话则越往后定义的将覆盖前面已定义的其他配置!

1
2
3
4
5
6
7
8
{
"extends": "stylelint-config-standard",
// "extends": ["stylelint-config-standard", "./myExtendableConfig"],
"rules": {
"alpha-value-notation": "number",
"selector-class-pattern": null
}
}

这里的extends其实是require()函数执行的过程,通过对该字符串的定义,可以做到对字符串的精准匹配,而且遵循原本nodejs查找依赖的顺序!

plugins

插件是自定义规则或自定义规则集,用于支持方法论、工具集、非标准CSS 功能或非常具体的用例

1
2
3
4
5
6
{
"plugins": ["../special-rule.js"],
"rules": {
"special-rule/first-rule": "everything"
}
}

🌠 插件可以提供单个规则或一组规则。如果您使用的插件提供了一个集合,在”plugins”配置值中调用该模块,并使用它在”rules”中重载插件中的对应规则!

overrides

使用该overrides属性,我们可以指定要将配置应用到的文件子集!

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
{
"rules": {
"alpha-value-notation": "number"
},
"overrides": [
{
"files": ["*.scss", "**/*.scss"],
"customSyntax": "postcss-scss"
},
{
"files": ["components/**/*.css", "pages/**/*.css"],
"rules": {
"alpha-value-notation": "percentage"
}
}
]
}

做点什么

通过对Stylelint的学习,我们可以使用该库以及配置,来为所跟进项目进行统一的css规范化管理,通过配置方案,使得相关的css样式做到自我检测并自我修复,团队成员采用统一的一个配置,遵循统一的css编码规范,这里我觉得还可以再加上 之前的另外一片文章:css中的BEM命名规范,结合起来,整理形成公司内部公共的配置,并同时形成公司内部的npm配置,通过安装内部的依赖,结合项目规范文档,可实现多个项目自动遵循并自动集成统一的编码规范!!