Stylelint -岩石教程

特点

高度可配置：支持自定义规则、插件和共享配置。
多种预处理器支持：除了标准的 CSS，还支持 SCSS、Less 等预处理器。
插件系统：允许用户添加自定义规则或使用社区提供的插件。
集成性强：与各种编辑器和构建工具如 VSCode、Sublime Text、Webpack 等集成。
自动修复：支持自动修复部分可修复的样式问题。

使用场景

代码审查：在代码提交前进行静态分析，确保样式代码质量。
代码一致性：团队协作时，统一编码风格，减少因风格不同导致的代码冲突。
错误检测：在开发过程中及早发现并修复潜在的样式错误。
提升代码可维护性：通过一致的编码规范，提高代码的可读性和可维护性。

安装方式

npm 安装

npm install stylelint --save-dev

yarn 安装

yarn add stylelint --dev

使用示例

初始化配置

npx stylelint --init

这会引导用户根据项目需求生成 .stylelintrc 配置文件。

配置文件示例

{
  "extends": "stylelint-config-standard",
  "rules": {
    "indentation": 2,
    "string-quotes": "double",
    "color-no-invalid-hex": true
  }
}

在项目中运行 Stylelint

npx stylelint "**/*.css"

Stylelint 是一个用于检测和修复 CSS 代码中的问题的工具。它可以帮助你保持样式表的一致性和规范性。以下是 Stylelint 的一些配置规则说明：

基本结构

Stylelint 的配置文件通常是 .stylelintrc，可以使用 JSON、YAML 或 JavaScript 格式。以下是一个示例配置文件：

{
  "extends": "stylelint-config-standard",
  "rules": {
    "indentation": 2,
    "color-hex-case": "lower",
    "color-hex-length": "short",
    "font-family-name-quotes": "always-where-required",
    "number-leading-zero": "always",
    "unit-allowed-list": ["em", "rem", "%", "s"]
  }
}

配置选项

1. `extends` (扩展)

extends 字段允许继承现有的配置，如 stylelint-config-standard、stylelint-config-recommended 或其他社区提供的配置。

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

2. `rules` (规则)

rules 字段用于定义具体的 Stylelint 规则及其设置。每条规则都包含一个键值对，键是规则名称，值是规则的设置。

{
  "rules": {
    "indentation": 2,
    "color-hex-case": "lower",
    "font-family-name-quotes": "always-where-required",
    "number-leading-zero": "always"
  }
}

常用规则

以下是一些常用的 Stylelint 规则示例：

indentation: 指定缩进的空格数。
```
"indentation": 2
```
color-hex-case: 控制十六进制颜色代码的大小写。
```
"color-hex-case": "lower"
```
color-hex-length: 控制十六进制颜色代码的长度。
```
"color-hex-length": "short"
```
font-family-name-quotes: 控制字体族名称的引号使用。
```
"font-family-name-quotes": "always-where-required"
```
number-leading-zero: 控制数字前是否需要零。
```
"number-leading-zero": "always"
```

unit-allowed-list: 指定允许使用的单位。

"unit-allowed-list": ["em", "rem", "%", "s"]

declaration-block-trailing-semicolon: 强制声明块末尾使用分号。
```
"declaration-block-trailing-semicolon": "always"
```
block-no-empty: 禁止空的 CSS 规则块。
```
"block-no-empty": true
```

at-rule-no-unknown: 禁止未知的 @ 规则。

"at-rule-no-unknown": [true, {
  "ignoreAtRules": ["extend", "include", "mixin"]
}]

selector-pseudo-element-no-unknown: 禁止未知的伪元素。

"selector-pseudo-element-no-unknown": [true, {
  "ignorePseudoElements": ["v-is"]
}]

配置层次结构

Stylelint 也支持多层次的配置，允许在项目的不同目录使用不同的配置文件。Stylelint 会从项目根目录开始，逐级向上查找配置文件，直到找到 .stylelintrc 文件或达到文件系统的根目录。

插件和自定义规则

Stylelint 支持插件，可以扩展其功能。你可以安装第三方插件来增加额外的规则，例如 stylelint-order 或 stylelint-scss。

npm install stylelint-order stylelint-scss --save-dev

在配置文件中启用插件和规则：

{
  "plugins": ["stylelint-order", "stylelint-scss"],
  "rules": {
    "order/properties-alphabetical-order": true,
    "scss/at-extend-no-missing-placeholder": true
  }
}

配置示例

以下是一个完整的 .stylelintrc.json 配置文件示例：

{
  "extends": "stylelint-config-standard",
  "plugins": ["stylelint-order", "stylelint-scss"],
  "rules": {
    "indentation": 2,
    "color-hex-case": "lower",
    "color-hex-length": "short",
    "font-family-name-quotes": "always-where-required",
    "number-leading-zero": "always",
    "unit-allowed-list": ["em", "rem", "%", "s"],
    "declaration-block-trailing-semicolon": "always",
    "block-no-empty": true,
    "at-rule-no-unknown": [true, {
      "ignoreAtRules": ["extend", "include", "mixin"]
    }],
    "selector-pseudo-element-no-unknown": [true, {
      "ignorePseudoElements": ["v-is"]
    }],
    "order/properties-alphabetical-order": true,
    "scss/at-extend-no-missing-placeholder": true
  }
}

Stylelint

特点