notes | Kisstar

# stylelint

和 ESLint 类似，StyleLint 是一个基于 Javascript 的样式代码审查工具，它的目标是保证代码的一致性和避免错误。

# 基础使用

安装：

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

在配置文件中配置：

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

使用：

npx stylelint "**/*.css"

# 进阶校验（Less）

安装：

stylelint stylelint-config-css-modules stylelint-config-prettier stylelint-config-rational-order stylelint-config-standard stylelint-declaration-block-no-ignored-properties stylelint-order

配置：

{
  "extends": [
    "stylelint-config-standard",
    "stylelint-config-css-modules",
    "stylelint-config-rational-order",
    "stylelint-config-prettier"
  ],
  "plugins": ["stylelint-order", "stylelint-declaration-block-no-ignored-properties"],
  "rules": {
    "no-descending-specificity": null,
    "function-calc-no-invalid": null,
    "plugin/declaration-block-no-ignored-properties": true
  }
}

# 支持校验 Scss

安装：

npm install --save-dev stylelint stylelint-config-standard stylelint-config-sass-guidelines stylelint-config-rational-order stylelint-order stylelint-config-prettier stylelint-prettier

配置：

{
  "extends": [
    "stylelint-config-standard",
    "stylelint-config-sass-guidelines",
    "stylelint-config-rational-order",
    "stylelint-prettier/recommended"
  ],
  "plugins": ["stylelint-order", "stylelint-config-rational-order/plugin"],
  "rules": {
    "max-nesting-depth": null,
    "order/properties-alphabetical-order": null,
    "order/properties-order": [],
    "plugin/rational-order": [
      true,
      {
        "border-in-box-model": false,
        "empty-line-between-groups": false
      }
    ]
  }
}

# 参考

← WEB →