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

友人a丶
JS笔记
2022-07-31
1743热度
0评论

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）

提示

Stylelint v14 及更高版本默认不解析非css文件，需要安装插件支持（下方插件列表有说明）

.stylelintignore

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

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

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

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

node-ignore

https://github.com/kaelzhang/node-ignore

配置项

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,
    }]
  }
}