前言
本文详细介绍stylelint
每一个配置项,偏重概念方面的讲解,可以粗略的看一遍留下一个大致的映像,需要动手的地方并不多。
废话不多说,一起来看看吧~
配置项加载规则
前面我们已经介绍过配置项的加载规则,这里再重申一下:
- 调用
stylelint.lint
的时候我们可以通过参数指定:config
,configFile
等。 - 在
package.json
中的stylelint
属性中指定。 - 在
.stylelintrc
文件中指定,文件格式可以是JSON
或者YAML
。也可以给该文件加后缀,像这样:.stylelintrc.json
,.stylelintrc.yaml
,.stylelintrc.yml
,
.stylelintrc.js
。 - 在
stylelint.config.js
文件中指定,该文件exports
一个配置对象。
按顺序查找,任何一项有值,就会结束查找。
配置项
rules
rules
是一个对象,属性名为规则名称,属性值为规则取值,它告诉stylelint
该检查什么,该怎么报错。所有规则默认都是关闭的。
所有stylelint
的规则详情戳这里。
规则名称
- 由连字符组成的小写单词
- 由两个部分组成:
- 第一部分描述该规则应用于什么东西
- 第二部分表示该规则检查了什么
"number-leading-zero"
// ↑ ↑
// the thing what the rule is checking
规则应用于整个样式表时只包含,第二个部分:
"no-eol-whitespace"
"indentation"
// ↑
// what the rules are checking
规则取值
规则类型不同,支持的值也不同,所有取值戳这里,以下是几个示例:
{
"rules": {
"at-rule-blacklist": string|[],
"at-rule-empty-line-before": "always"|"never",
"at-rule-name-case": "lower"|"upper",
"block-no-empty": true
...
}
}
值为null
时表示禁用该规则:
{
"rules": {
"block-no-empty": null
}
}
除了规则本身的取值之外,stylelint
还支持一些自定义配置,给规则传递一个数组即可,数组第一项是规则值,第二项是自定义配置。
"selector-pseudo-class-no-unknown": [true, {
"ignorePseudoClasses": ["global"]
}]
通过配置项,你可以指定:
-
severity
,错误级别,取值"warning"
或者"error"
。默认情况下,所有规则的错误级别都是"error"
,通过defaultSeverity
可以修改此默认值。不过,需要针对某规则修改错误级别就需要用到该属性。
"indentation": [2, {
"severity": "warning"
}]
-
message
,自定义错误信息。
"color-hex-case": ["lower", {
"message": "Lowercase letters are easier to distinguish from numbers"
}]
extends
stylelint
的配置可以在已有配置的基础上进行扩展,之后你自己书写的配置项将覆盖已有的配置。
你也可以将extends
设置为一个数组,每一项都是一个独立的stylelint
配置项,后一项将会覆盖前一项,而接下来你自己书写的内容可以覆盖他们所有。
以下示例中,rules
中的indentation
和number-leading-zero
将会覆盖stylelint-config-standard
中对应的规则。
{
"extends": "stylelint-config-standard",
"rules": {
"indentation": "tab",
"number-leading-zero": null
}
}
以下,./myExtendableConfig
中的配置将会覆盖stylelint-config-standard
中的对应配置,而rules
中的indentation
将会覆盖./myExtendableConfig
中对应的规则。
{
"extends": [
"stylelint-config-standard",
"./myExtendableConfig"
],
"rules": {
"indentation": "tab"
}
}
说清楚优先级之后,我们来详细了解一下extends
的取值情况。
extends
的值实际上一个定位器
(或者一个包含若干定位器
的数组),所有可以通过require
来使用的资源都可以作为extends
的值。
-
node_modules
中某个模块的名字,该模块的主文件需要返回一个配置对象。 - 指向一个
.js
文件或者.json
文件的绝对路径。 - 指向一个
.js
文件或者.json
文件的相对路径,相对于当前的配置文件。
plugins
插件一般是由社区提供的,对stylelint
已有规则进行扩展,一般可以支持一些非标准的css
语法检查或者其他特殊用途。一个插件会提供一个或者多个检查规则。
plugins
是一个数组,包含一组插件的定位器
,这些定位器
的取值跟extends
一致。
plugins
声明后还需要在rules
中使用它,具体规则名称以及可能的取值需要去查看每个插件的文档。
{
"plugins": [
"../some-rule-set.js"
],
"rules": {
"some-rule-set/first-rule": "everything",
"some-rule-set/second-rule": "nothing",
"some-rule-set/third-rule": "everything"
}
}
获取更多插件。
processors
你还可以在stylelint
的处理流中加入自己的处理函数,就是这里的processors
。
processors
只能作为命令和Node API使用,PostCss
的插件会忽略它们。
通过processors
,我们可以让styleline
去处理html
中style
标签里面的css
代码,MarkDown
里面的css
代码块或者js
里面一段包含css
的字符串。
使用方法如下:
{
"processors": [
"stylelint-html-processor",
[ "some-other-processor", { "optionOne": true, "optionTwo": false } ]
],
"rules": {..}
}
processors
的每一项也是一个定位器
,需要额外的参数时,可以传递一个数组,第一项是定位器
,第二项是需要的参数。
获取更多处理器。
ignoreFiles
一个文件匹配规则,或者一组文件匹配规则,来指定需要忽略的文件。
更高效的忽略文件的方法是通过.stylelintignore
文件或者调整一下你的文件匹配规则。
defaultSeverity
默认错误级别,可能的取值有:
"warning"
"error"
参考文章
Configuration
About rules
Example config