在线文档教程

配置 | Configuration

组态

检测器需要使用一个 配置对象。你可以自定义一个或扩展一个已存在的配置。

加载配置对象

stylelint 使用 cosmiconfig 来完成查找和加载你的配置对象。从当前工作目录开始,它将按以下顺序查找尽可能的来源:

  • package.json 中的 stylelint 属性

.stylelintrc文件(不带扩展名)可以是 JSON 或 YAML 格式的。或者,你可以添加一个文件扩展名,来区分 JSON,YAML 或 JS 格式:.stylelintrc.json.stylelintrc.yaml.stylelintrc.js。你可能想使用一个扩展名,这样你的文本编辑器可以更好的解释文件,以更好进行语法检查和高亮显示。

一旦发现它们中的任何一个,将不再继续进行查找,进行解析,将使用解析后的对象。

当使用 configconfigFile 选项时,配置文件的搜索可能会停止。

配置对象

配置对象可以有以下属性。

rules

规则决定检测器要查找什么和要解决什么。stylelint 有超过 150条规则。所有规则默认都是关闭的,所以,通过该选项你就可以开启相应规则,进行相应的检测。所有规则必须显式的进行配置,因为 没有默认值

rules属性是个对象,其键为规则名称,值为规则配置。每个规则配置符合以下形式之一:

  • 一个值 (主要选项)

{ "rules": { "block-no-empty": null, "color-no-invalid-hex": true, "comment-empty-line-before": [ "always", { "ignore": ["stylelint-commands", "between-comments"] } ], "declaration-colon-space-after": "always", "indentation": ["tab", { "except": ["value"] }], "max-empty-lines": 2, "rule-nested-empty-line-before": [ "always", { "except": ["first-nested"], "ignore": ["after-comment"] } ], "unit-whitelist": ["em", "rem", "%", "s"] } }

指定一个主要选项将开启规则。

从CSS中关闭规则

规则可以通过在你的 CSS 中使用特定的注释临时关闭。例如,你可以关闭所有的规则:

/* stylelint-disable */ a {} /* stylelint-enable */

或者你可以关闭个别的规则:

/* stylelint-disable selector-no-id, declaration-no-important */ #id { color: pink !important; } /* stylelint-enable */

你可以使用 /* stylelint-disable-line */ 注释在个别的行上关闭规则,在其之后你不需要显式的重新开启它们:

#id { /* stylelint-disable-line */ color: pink !important; /* stylelint-disable-line declaration-no-important */ }

你也可以使用 /* stylelint-disable-next-line */ 注释在下一行上关闭规则,在其之后你不需要显式的重新开启它们:

#id { /* stylelint-disable-next-line declaration-no-important */ color: pink !important; }

复杂、重叠的禁用和启用模式也是支持的:

/* stylelint-disable */ /* stylelint-enable foo */ /* stylelint-disable foo */ /* stylelint-enable */ /* stylelint-disable foo, bar */ /* stylelint-disable baz */ /* stylelint-enable baz, bar */ /* stylelint-enable foo */

警告: 选择器和值列表 中的注释目前是被忽略的。

严重程度:错误和警告

默认情况下,所有的规则有一个 "error"级别的严重程度。你可以在配置文件中通过添加一个 defaultSeverity 属性来改变这种默认情况(见下文)。

使用第二个选项 severity 来调整任何特定规则的严重程度。severity 可用的值为:

  • "warning"

// 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" } ] }

如果你需要严格的定制,写一个自定义格式化器会给你最大控制权。

extends

你的配置可以 extend 一个已存在的配置文件(无论是你自己的还是第三方的配置)。当一个配置继承了里一个配置,它将会添加自己的属性并覆盖原有的属性。

你可以继承一个已存在的配置数组,数组中的每一项都优先于下一项(所以,第一项覆盖所有,第二项覆盖除了第一项之外的所有项,最后一项被其他所有项覆盖,等等)。

例如,继承 stylelint-config-standard,然后将缩进改为 tab 缩进,关闭 number-leading-zero 规则:

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

或者继承 stylelint-config-standardmyExtendableConfig,并且覆盖缩进规则:

{ "extends": [ "stylelint-config-standard", "./myExtendableConfig" ], "rules": { "indentation": "tab" } }

"extends" 的值是个“定位器” (或 “定位器” 数组),也是最终被 require() 的,因此,可以使用 Node 的 require.resolve() 算法适应任何格式。这意味着一个“定位器”可以是:

  • node_modules中的某个模块名称 (比如,stylelint-config-standard;模块的 main 文件必须是一个有效的 JSON 配置)

正因为extends,你可以创建和使用可分享的 stylelint 配置。 如果你要发布你的配置到 npm,在你的 package.json 文件中使用 stylelint-config 关键字。

plugins

插件是由社区创建的规则或规则集,支持方法论、工具集,非标准 的 CSS 特性,或非常特定的用例。

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

一旦声明了插件,在你的 "rules" 对象中,你将需要为插件的规则添加选项,就像其他标准的规则一样。你需要查看插件的文档去了解规则的名称。

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

一个插件可以提供一个规则或一组规则。如果你使用的插件提供了一组规则,就调用 "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

Processors 是 stylelint 的钩子函数,可以以它的方式修改代码,也可以在它们退出时修改结果。

Processors 只能用在 命令行 和 Node API,不适用于 PostCSS 插件 (PostCSS 插件将忽略它们。)

Processors 可以使 stylelint 检测非样式表文件中的 CSS。例如,你可以检测 HTML 内中 <style> 标签中的 CSS,Markdown文件中代码块或 JavaScript 中的字符串。

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

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

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

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

ignoreFiles

提供一个 glob 或 globs 数组,忽略特定的文件。

(另一种方法是使用 .stylelintignore 文件,会在下面描述。)

如果 globs 是绝对路径,就直接使用它们。如果是相对路径,它们将相对:

  • configBasedir,如果有的话;

如果 ignoreFiles 属性被继承的配置移除:只有根配置可以忽略文件。

defaultSeverity

所有在第二个选项中没有指定严重级别的规则的默认严重级别。

  • "warning"

.stylelintignore

你可以使用一个 .stylelintignore 文件(或指定其他的忽略模式文件)忽略指定的文件。

(另一种方式是使用 config.ignoreFiles,如上描述。)

你的 .stylelintignore 文件中的模式必须匹配 .gitignore 语法。(在幕后使用node-ignore 来解析你的模式。) 这就意味着 .stylelintignore 中模式总是相对于 process.cwd()。

styleline 将在 process.cwd() 中查找 .stylelintignore 文件。你可以在命令行中使用 --ignore-path 和在 JS 中使用 ignorePath 选项来指定你一个你要忽略模式的文件路径(绝对或相对于process.cwd())。