StyleLint使用指南

StyleLint使⽤指南
是『⼀个强⼤的、现代化的 CSS 检测⼯具』, 与 ESLint 类似, 是通过定义⼀系列的编码风格规则帮助我们避免在样式表中出现错误.
安装stylelint
npm install -d -save-dev stylelint
安装stylint-config-standard和stylelint-order
npm install stylelint-config-standard stylelint-order --save-dev
其中，stylelint是运⾏⼯具，stylelint-config-standard是stylelint的推荐配置，stylelint-order是CSS属性排序插件(先写定位，再写盒模型，再写内容区样式，最后写 CSS3 相关属性)。

配置⽅式：
按顺序查找，任何⼀项有值，就会结束查找
在 package.json 中的stylelint属性指定规则
在 .stylelintrc ⽂件中指定，⽂件格式可以是JSON或者YAML。

也可以给该⽂件加后缀，像这样： .stylelintrc.json , .stylelintrc.yaml , .stylelintrc.yml , .stylelintrc.js
stylelint.config.js ⽂件，该⽂件 exports ⼀个配置对象
语法格式：
rules优先级⼤于extends，建议采⽤extends⽅式统⼀管理
module.exports = {
processors: [],
plugins: [],
extends: "stylelint-config-standard", // 这是官⽅推荐的⽅式
rules: {
"at-rule-empty-line-before": "always"|"never",
"at-rule-name-case": "lower"|"upper",
"block-no-empty": true,
}
};
配置项解析
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的配置可以extend⼀个已存在的配置⽂件(⽆论是你⾃⼰的还是第三⽅的配置)。

当⼀个配置继承了⾥⼀个配置，它将会添加⾃⼰的属性并覆盖原有的属性。

你也可以将extends设置为⼀个数组，每⼀项都是⼀个独⽴的stylelint配置项，后⼀项将会覆盖前⼀项，⽽接下来你⾃⼰书写的 rules 规则可以覆盖他们所有。

以下⽰例中，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 的 require.resolve() 算法适应任何格式。

这意味着⼀个“定位器”可以是：
node_modules中的某个模块名称，该模块的主⽂件需要返回⼀个配置对象 (⽐如，stylelint-config-standard；模块的 main ⽂件必须是⼀个有效的 JSON 配置)
⼀个带有 .js 或 .json 扩展名的⽂件 (which makes sense 如果你在 Node 上下⽂中创建了⼀个 JS 对象，并将它传⼊也是有效的)的绝对路径。

⼀个带有 .js 或 .json 扩展名的⽂件的相对路径，相对于引⽤的配置 (例如，如果 configA 是 extends: "../configB"，我们将查找 configB 相对于 configA)。

正因为extends，你可以创建和使⽤可分享的 stylelint 配置。

如果你要发布你的配置到 npm，在你的 package.json ⽂件中使⽤ stylelint-config 关键字。

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的每⼀项也是⼀个定位器，需要额外的参数时，可以传递⼀个数组，第⼀项是定位器，第⼆项是需要的参数。

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

severity 可⽤的值为：
"warning"
"error"
ignoreFiles
⼀个⽂件匹配规则，或者⼀组⽂件匹配规则，来指定需要忽略的⽂件。

更⾼效的忽略⽂件的⽅法是通过 .stylelintignore ⽂件或者调整⼀下你的⽂件匹配规则。

ignoreFiles⽅式
// .stylelintignore
*.js
*.png
*.eot
*.ttf
*.woff
⽚段禁⽤规则
/* stylelint-disable */
/* （请说明禁⽌检测的理由）前端组件限制类名 */
.cropper_topContainer .img-preview {
border: 0 none;
}
/* stylelint-enable */
fix⽅式
stylelint --fix 就能搞定
⼀键fix
在 package.json 中的 scripts 添加指令，然后 npm run lintcss 即可
{
"scripts": {
"lintcss": "stylelint 'src/**/*.css' --fix",
}
}
⼿动fix
不放⼼的话，就针对指定⽂件⾃⼰执⾏，⽂件⼀定要⽤""括起来
stylelint "src/less/bulma-cloud.less" --fix
问题排除：
错误提⽰：
Unexpected unknown at-rule "@function" (at-rule-no-unknown)
Unexpected unknown at-rule "@each" (at-rule-no-unknown)
Unexpected unknown at-rule "@if" (at-rule-no-unknown)
Unexpected unknown at-rule "@return" (at-rule-no-unknown)
最开始只安装了官⽅推荐的定义规则"stylelint-config-standard",我想是不是我缺少插件的问题，所以我就多安装了⼀个"stylelint-scss"插件，错误已然存在，最后通过"stylelint-scss"的github找到了答案，就是需要添加排除规则。

添加排除规则之后就好了。

{
"extends": [
"stylelint-config-standard",
"stylelint-config-css-modules"
],
"plugins": [
"stylelint-scss"
],
"rules": {
"at-rule-no-unknown": [ true, {
ignoreAtRules: ['extend', 'at-root', 'debug', 'warn', 'error', 'if', 'else', 'for', 'each', 'while', 'mixin', 'include', 'content', 'return', 'function']
}]
}
}
参考：。