配置项

2023年02月22日

柏拉文

越努力，越幸运

一、plugins

plugins定义了一个数组，该配置项允许我们使用第三方插件，在该数组中，需要包含定位器标识出你要使用的插件，一个定位器可以是一个 npm 模块名，一个绝对路径，或一个相对于要调用的配置文件的路径。一旦声明了插件，在rules中需要为插件的规则添加选项，就像其他标准的规则一样。你需要查看插件的文档去了解规则的名称。

1.1 语法

{
  "plugins": [
    “stylelint-order",
    "../special-rule.js"
  ],
  "rules": {
    "order/properties-order": [],
    "plugin/special-rule": "everything"
  }
}

二、extends

extends定义了一个数组，该配置项允许我们extend一个已存在的配置文件(无论是你自己的还是第三方的配置)。当一个配置继承了里一个配置，它将会添加自己的属性并覆盖原有的属性。比如下面的代码，我们就extend了StyleLint的标准配置。

如果extends中包含多个配置项，那么数组中的每一项都优先于前一项，也就是说第二项会覆盖第一项，第三项会覆盖第一项和第二项，最后一项将覆盖其它所有项。

2.1 语法

{
  "extends": "stylelint-config-standard",
  "rules": {
    "indentation": "tab",
    "number-leading-zero": null
  }
}

三、rules

rules定义了一个对象，属性名为规则名称，属性值为规则取值，它告诉StyleLint该检查什么，该怎么报错，所有的规则都是默认关闭的。我们可以通过该选项开启相应规则，进行相应的检测。所有规则必须显式的进行配置，因为没有默认值。规则名称主要由两个部分组成，第一部分描述该规则应用于什么东西，第二部分表示该规则检查了什么。

3.1 语法

语法一

{
    "rules": {
        "at-rule-blacklist": string|[],
        "at-rule-empty-line-before": "always"|"never",
        "at-rule-name-case": "lower"|"upper",
        "block-no-empty": null,
        ...
    }
}

语法二

"selector-pseudo-class-no-unknown": [true, {
    "ignorePseudoClasses": ["global"]
}]

3.2 可选值

severity: 错误级别，取值为warning或error，默认情况下，所有规则的错误级别都为error，通过defatuleServerity，可以修改错误级别的默认值

// error-level severity examples
{ "indentation": 2 }
{ "indentation": [2] }

// warning-level severity examples
{ "indentation": [2, { "severity": "warning" } ] }
{ "indentation": [2, {
        "except": ["value"],
        "severity": "warning"
    }]
}

message: 当一个规则被触发时，如果你想实现一个自定义的消息，可以给规则的传递message作为第二选项，如果提供，将替代提供的任何标准的消息。例如，以下规则配置会使用一些自定义的消息

 "color-hex-case": [ "lower", {
        "message": "Lowercase letters are easier to distinguish from numbers"
    } ],
    "indentation": [ 2, {
        "ignore": ["block"],
        "message": "Please use 2 spaces for indentation. Tabs make The Architect grumpy.",
        "severity": "warning"
    } ]
}

四、processors

Processors是StyleLint的钩子函数，只能用在命令行和Node API，不适用于PostCSS插件。Processors可以使StyleLint检测非样式表文件中的CSS。例如，可以检测HTML内中<style>标签中的CSS，Markdown文件中代码块或JavaScript中的字符串。

使用Processors的话，需要在配置中添加一个processors数组，包含定位器标识出你要使用的 processors。同上面的extends，一个定位器可以是一个 npm 模块名，一个绝对路径，或一个相对于要调用的配置文件的路径。

4.1 语法

{
  "processors": ["stylelint-html-processor"],
  "rules": {..}
}

如果你的processor有选项，把它们放到一个数组里，第一项是定位器，第二项是选项对象。

{
    "processors": [
    "stylelint-html-processor",
    [ "some-other-processor", { "optionOne": true, "optionTwo": false } ]
    ],
    "rules": {..}
}

参考资料

前端规范之CSS规范（Stylelint）

一、plugins​

1.1 语法​

二、extends​

2.1 语法​

三、rules​

3.1 语法​

3.2 可选值​

四、processors​

4.1 语法​

参考资料​