项目配置Stylelint校验CSS与SCSS文件

发表于 | 更新于 | 分类于 | 评论数： | 阅读次数：

Stylelint官方文档 Getting started

Stylelint中文文档

官方推荐配置

有多种配置方法，下面介绍其中一种方法。

安装

1
yarn add -D stylelint stylelint-config-standard-scss stylelint-config-prettier-scss

配置

添加配置文件：

  • 根目录创建.stylelintrc.json用于stylelint规则配置，文件名可以是其他

  • 根目录创建.stylelintignore，忽略特定的文件，配置规则与.gitignore一样。也可以在stylelintrc.json配置ignoreFiles，默认忽略node_modules目录，如果需要忽略大量文件，用.stylelintignore比较好

stylelint-config-standard-scss

https://github.com/stylelint-scss/stylelint-config-standard-scss

Stylelint SCSS 配置，扩展自stylelint-config-standard与stylelint-config-recommended-scss。

.stylelintrc.json添加配置：

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
{
  "extends": ["stylelint-config-standard-scss"],
  "rules": {
   "selector-pseudo-class-no-unknown": [
      true,
      {
        "ignorePseudoClasses": ["global"]
      }
    ],
    "color-function-notation": "legacy",
    "alpha-value-notation": "number",
    "function-url-quotes": null,
     "scss/dollar-variable-pattern": null,
     // ...
  }
}

部分规则配置说明：

stylelint-config-prettier-scss

项目有使用Prettier的才需要安装。

stylelint-config-prettier-scss扩展自stylelint-config-prettier，关闭与Prettier冲突的CSS和SCSS规则。

.stylelintrc.json添加配置：

1
2
3
4
5
6
{
  "extends": [
    // ...
    "stylelint-config-prettier-scss"
  ]
}

VS Code配置

1. 安装stylelint插件

2. 修改settings.json文件配置

vscode-stylelint配置

1
2
3
4
5
"editor.codeActionsOnSave": {
  // ...
  "source.fixAll.stylelint": true, // 保存时自动格式化
},
"stylelint.validate": ["css", "scss"], // 验证css与scss文件

添加自定义css属性顺序规则

可以使用stylelint-order自行定义CSS属性顺序，.stylelintrc.json添加配置：

1
2
3
4
5
6
7
8
9
10
11
{
  "plugins": [
    "stylelint-order"
  ],
  "rules": {
    "order/properties-order": [ // 自定义属性排序
      "position",
        // ...
      ]
  }
}

也可以用其他定义好的顺序规则：Example configs 。

这里选取stylelint-config-rational-order规则，.stylelintrc.json添加配置：

1
2
3
4
5
6
{
  "extends": [
    // ...
    "stylelint-config-rational-order"
  ]
}

检查与修复

检查：stylelint 'src/**/*.{css,scss}'

修复：stylelint 'src/**/*.{css,scss}' --fix"

--cache选项可以指定使用缓存。

其他

问题：TypeError: Class extends value undefined is not a constructor or null #5

解决方法：安装postcss，使用postcss@8版本。