Stylelint该如何配置？Stylelint使用以及相关配置说明

官方网站：https://stylelint.io/

StyleLint

1. 安装

stylelin 本体：https://www.npmjs.com/package/stylelint

stylelint-config-standard 拓展配置：https://www.npmjs.com/package/stylelint-config-standard

npm install --save-dev stylelint stylelint-config-standard

2. 配置

stylelint 按如下顺序寻找配置文件：

• package.json
• .stylelintrc|.json|.yaml|js
• stylelint.config.js
• stylelint.config.cjs（”type”:”module” 时需使用.cjs）

3. 行内配置

• /* stylelint-disable */，关闭当前文件内所有规则
• /* stylelint-disable selector-max-id, declaration-no-important */，关闭指定规则
• /* stylelint-disable-line */，关闭当前行的选择器的所有规则
• /* stylelint-disable-line declaration-no-important */，关闭当前行的 css 属性的指定规则
• /* stylelint-disable-next-line declaration-no-important */，关闭下一行的所有或指定规则

4. 使用

参考官网集成章节：https://stylelint.io/user-guide/integrations/editor

作为 Postcss 插件：https://stylelint.io/user-guide/usage/postcss-plugin

命令行使用：https://stylelint.io/user-guide/usage/cli（stylelint –fix 同 eslint）

.stylelintignore 

可以通过在项目根目录创建一个 .stylelintignore 文件告诉 stylelint 去忽略特定的文件和目录。.stylelintignore 文件是一个纯文本文件，其中的每一行都是一个 glob 模式表明哪些路径应该忽略检测。（默认忽略 node_modules）

当 stylelint 运行时，在确定哪些文件要检测之前，它会在当前工作目录中查找一个 .stylelintignore 文件。如果发现了这个文件，当遍历目录时，将会应用这些默认设置。一次只有一个 .stylelintignore 文件会被使用，所以，不是当前工作目录下的 .stylelintignore 文件将不会被用到。

Globs 匹配使用 node-ignore，所以大量可用的特性有：

• 以 # 开头的行被当作注释，不影响忽略模式。
• 路径是相对于 .stylelintignore 的位置或当前工作目录。
• 忽略模式同 .gitignore 规范
• 以 ! 开头的行是否定模式，它将会重新包含一个之前被忽略的模式。
• 忽略模式依照 .gitignore 规范.

配置项

1.rules

Stylelint 内置了超过 170 条规则。

默认情况下没有打开任何规则，也没有默认值。必须明确配置每个规则以将其打开，示例：

{
  "rules": {
    "selector-pseudo-class-no-unknown":null // 关闭规则
    "block-no-empty": null,  // 单一值·
    "unit-allowed-list": ["em", "rem", "%", "s"],  // 多值
  }
}

规则列表：https://stylelint.io/user-guide/rules/list 

/* 禁用某项规则的自动修复 */
{
  "rules": {"color-function-notation": ["modern", { "disableFix": true}]
  }
}

规则一般都有主选项和其他选项，官网的规则点进去就能看到每条规则的完整配置。

2.extends

拓展配置，功能同 eslint 的配置；配置大全：https://github.com/stylelint/awesome-stylelint#configs

值可以是一个 npm 包、另一个 stylelint 配置文件（js、json）；

{
  "extends": "stylelint-config-standard",
  "rules": {
    "alpha-value-notation": "number",
    "selector-class-pattern": null
  }
}

3.plugins

plugins，字如其意，用于定义需要的插件；插件大全：https://github.com/stylelint/awesome-stylelint#plugins

值可以是一个 npm 包、也可以是代表插件的绝对路径；

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

4.customSyntax

进行某种自定义功能，参考：https://stylelint.io/user-guide/configure#customsyntax

5.defaultSeverity

修改未设定警告级别的规则的默认警告级别；

/* 设置为 warning */
{"defaultSeverity": "warning"}

5.override

针对不同类型的文件设定不同的规则；

{
  "rules": {"alpha-value-notation": "number"},
  "overrides": [
    {"files": ["*.scss", "**/*.scss"],
      "customSyntax": "postcss-scss"
    },
    {"files": ["components/**/*.css", "pages/**/*.css"],
      "rules": {"alpha-value-notation": "percentage"}
    }
  ]
}

6.ignoreFiles

设置忽略检查的文件列表，node_modules 为默认默认忽略目录，同样的还可以通过.stylelintignore 去配置。

/* 相对于项目目录或 node 运行的目录 */
{"ignoreFiles": ["**/*.js"]
}

7.ignoreDisables

设置是否允许注释配置。（类似 eslint 的行内配置）

{"ignoreDisables": true}

vite 集成 stylelint

找到一个基本能用的，但是警告报错的时候没有告诉我是哪个文件哪一行。原因暂时不得而知

安装插件 vite-plugin-stylelint（https://github.com/ModyQyW/vite-plugin-stylelint），配置如下（type:modules 会有 BUG，所以最好使用 stylelint.config.cjs 配置文件）：

import {defineConfig} from 'vite'
import eslint from 'vite-plugin-stylelint'

export default defineConfig({
  plugins: [
       StylelintPlugin({
          fix: true,
          cache:false
       }),]
})

常用插件 

1.stylelint-config-html

Stylelint v14 及更高版本默认不解析非 css 文件，使用这个插件可以支持其他类型文件（HTML, XML, Vue, Svelte, Astro, PHP）的解析，不添加这个插件，就不能正常解析其他非 css 文件（报错）。捆绑安装 postcss-html

Npm：https://www.npmjs.com/package/stylelint-config-html

添加了插件之后，还要安装对应的 lint 插件。V14 以下不需要这个

/* 支持所有 */
{"extends": "stylelint-config-html"}

/* 单个指定 */
{
  "extends": [
    "stylelint-config-html/html",
    "stylelint-config-html/xml",
    "stylelint-config-html/vue",
    "stylelint-config-html/svelte",
    "stylelint-config-html/astro",
    "stylelint-config-html/php"
  ]
}

2.stylelint-config-recommended

包含所有 stylelint 官网的规则，使用它开启所有官网列表的规则（可以在 rules 自定义去覆盖）

Npm：https://www.npmjs.com/package/stylelint-config-recommended

{
  "extends": "stylelint-config-recommended",
  "rules": {
    "at-rule-no-unknown": [
      true,
      {"ignoreAtRules": ["extends"]
      }
    ],
    "block-no-empty": null,
    "unit-allowed-list": ["em", "rem", "s"]
  }
}

3.stylelint-config-standard

对于上面那个的增强版，增强下面结果热门的标准：

https://github.com/necolas/idiomatic-css、https://google.github.io/styleguide/htmlcssguide.html#CSS_Formatting_Rules、https://github.com/airbnb/css#css、https://codeguide.co/#css

Npm：https://www.npmjs.com/package/stylelint-config-standard

{
  "extends": "stylelint-config-standard",
  "rules": {"selector-class-pattern": null}
}

4.stylelint-config-recommended-vue

扩展 stylelint-config-recommended，并提供 Vue 的相关规则，需要 V14+

Npm：https://www.npmjs.com/package/stylelint-config-recommended-vue

{"extends": "stylelint-config-recommended-vue"}

/* This config enables rules for only .vue files. */

使用 SCSS 需要额外安装：stylelint-config-recommended-scss

5.stylelint-config-standard-vue

扩展 stylelint-config-standard，并提供 Vue 的相关规则，需要 V14+

Npm：https://www.npmjs.com/package/stylelint-config-standard-vue

{"extends": "stylelint-config-standard-vue"} 

/* This config enables rules for only .vue files. */

使用 SCSS 需要额外安装：stylelint-config-standard-scss

6.stylelint-config-recommended-scss

同类型的还有：stylelint-config-standard-scss、stylelint-config-recommended-less、stylelint-config-standard-less（这个没有）

Npm：https://www.npmjs.com/package/stylelint-config-recommended-scss

捆绑 stylelint-scss、postcss-scss 两个包。

{"extends": "stylelint-config-recommended-scss"}

7.stylelint-prettier

将 prettier 作为 stylelint 的规则来使用，代码不符合 Prettier 的标准时，会报一个 stylelint 错误，同时也可以通过 stylelint –fix 来进行格式化，插件遵循 prettier 的配置。

Prettier：https://prettier.io/docs/en/options.html

使用之前需要先安装 prettier。Npm：https://www.npmjs.com/package/stylelint-prettier 

{"plugins": ["stylelint-prettier"],
  "rules": {"prettier/prettier": true}
}

8.stylelint-config-prettier

关闭所有与 prettier 有冲突的规则。

Npm：https://www.npmjs.com/package/stylelint-config-prettier

{"extends": ["stylelint-prettier/recommended"]
}
/* 安装这个插件后上面等价于 */
{
  "extends": [
    // other configs ...
    "stylelint-config-prettier"
  ],
  "plugins": ["stylelint-prettier"], 
  "rules": {"prettier/prettier": true}
}

9.stylelint-config-rational-order

按照如下，规范 css 属性的排序规则。需要自行安装 stylelint-order

Npm：https://www.npmjs.com/package/stylelint-config-rational-order

{extends: ['stylelint-config-rational-order']
}

// 等同于
{
  "plugins": [
    "stylelint-order",
    "stylelint-config-rational-order/plugin"
  ],
  "rules": {"order/properties-order": [],
    "plugin/rational-order": [true, {
      "border-in-box-model": false,
      "empty-line-between-groups": false,
    }]
  }
}