Skip to main content

前端工程化配置（三）—— stylelint

· 5 min read
hec9527

stylelint 是一个用于检测 CSS 代码风格和错误的工具，它有点类似于 ESlint，但是它专注于 CSS。 stylelint 不仅可以帮助你在团队中保持一致的 CSS 代码风格，发现潜在的错误，并且确保代码符合最佳实践。

stylelint 的主要特点和功能

  1. 丰富的插件：stylelint 内置了很多插件，可以帮助你检测 CSS 代码中的错误和不规则的写法，并且能根据你的需求扩充其功能
  2. 自动修复：stylelint 可以自动修复一些错误，比如在你使用了未知的属性时，它会自动添加该属性。
  3. 自定义配置：stylelint 允许你自定义配置，你可以根据自己的喜好来配置 stylelint
  4. 丰富的规则：stylelint 内置了许多规则，涵盖了常见的错误、最佳实践、语法错误、命名约定等
  5. 使用方便：stylelint 非常容易使用，不仅提供了命令行工具，还可以与编辑器插件集成

安装​

npm install stylelint --save-dev

生成配置文件

npm init stylelint

使用上述命令会生成一个名为 .stylelintrc.json 的默认配置文件，现在你可以使用命令行工具检测你的 css 代码了

npx stylelint "**/*.css"

在 vscode 插件市场搜索 stylelint 并安装，然后在 vscode 配置中添加以下配置信息，这样在每次保存后就会自动格式化并且修复你的 css 代码

{
  "editor.codeActionsOnSave": {
    "source.fixAll": true,
    "source.fixAll.stylelint": true
  }
}

保存后自动修复错误信息

配置​

stylelint 的配置文件支持多种文件格式和命名，加载时会按照以下顺序加载配置文件

  • package.json中的 stylelint 属性
  • .stylelintrc
  • .stylelintrc.{cjs,js,json,yaml,yml}
  • stylelint.config.{cjs,mjs,js}

extends​

extends 字段类似于 eslint，用于继承其他社区共享的配置文件，比如 stylelint-config-standard，stylelint-config-prettier，stylelint-config-rational-order

  • stylelint-config-standard：stylelint 官方标准配置，继承至 stylelint-config-recommended，并在此基础上开启了额外的规则来约束 CSS 规范中的现代约定
  • stylelint-config-prettier：这个配置主要用于解决 stylelint 和 prettier 的配置冲突，这会关闭所有与 prettier 冲突的规则
  • stylelint-config-rational-order：按照顺序分组对相关属性声明进行排序，这属于社区最佳实践配置，可以帮助你排序和整理你的 CSS 属性
{
  "extends": ["stylelint-config-standard", "stylelint-config-rational-order", "stylelint-config-prettier"]
}

plugins​

插件是自定义规则或自定义规则集，用于支持方法、工具集、非标准 CSS 特性或非常具体的用例。

比如上面的属性排序功能就依赖于 stylelint-order 插件

{
  "plugins": ["stylelint-order", "stylelint-config-rational-order/plugin"]
}

customSyntax​

stylelint 默认使用标准 CSS 语法，可以使用 customSyntax 来指定自定义语法，比如 scss、less 等

{
  "customSyntax": "postcss-scss"
}

如果需要支持多种非标准语法，可以使用 overrides 为每一种语法指定语法解析工具

{
  "overrides": [
    {
      "files": "*.scss",
      "customSyntax": "postcss-scss"
    },
    {
      "files": "*.less",
      "customSyntax": "postcss-less"
    }
  ]
}

ignorePath​

stylelint 默认忽略 .stylelintignore 文件，你可以使用 ignorePath 指定一个或多个文件、文件夹

{
  // 忽略指定文件夹，支持glob语法
  "ignorePath": "test/**/*.css"
  // 传递数组忽略多个文件、文件夹
  "ignorePath": ["test/**/*.css", "dist/"]
}

rules​

stylelint 的规则是通过 rules 字段来配置的，它是一个对象，键是规则的名称，值是规则的配置

{
  "rules": {
    "color-hex-case": "lower",
    "color-hex-length": "long",
    "color-no-invalid-hex": true
  }
}

stylelint 规定，值为 null 表示关闭此项规则，否则根据给定的值开启并配置此项规则，比如上面的 "color-hex-length": "long" 表示颜色使用 16 进制 6 位长格式表示法

禁用​

当需要禁用某个文件或者目录时可以通过 .stylelintignore，如果是需要禁用单行可以使用注释来禁用单行检测

* {
  user-select: none;
  /* stylelint-disable-next-line */
  -webkit-animation: fade-in 1s;
}

目录