# @dist/stylelint-config

提供了一套开箱即用的校验 css、scss、vue、html 文件中 css 代码语法、样式风格的配置文件

# 安装

安装stylelint

注意：需要安装stylelint@^14.0.0版本

npm install stylelint@^14.0.0 --dev
npm install @dist/stylelint-config --dev

# 使用

在项目根目录下添加stylelint配置文件

stylelint.config.js

module.exports = {
  extends: ['@dist/stylelint-config']
};

1
2
3

# 覆盖规则

配置中的规则均可自行修改、关闭规则

例:

关闭 scss 变量名使用 kebab-case 命名的规则:

// stylelint.config.js
module.exports = {
  extends: ['@dist/stylelint-config'],
  rules: {
    'scss/dollar-variable-pattern': null
  }
};

1
2
3
4
5
6
7

修改规则

将 scss 变量名使用 kebab-case 命名的规则改为警告级别

// stylelint.config.js
module.exports = {
  extends: ['@dist/stylelint-config'],
  rules: {
    'scss/dollar-variable-pattern': [
      '^(-?[a-z][a-z0-9]*)(-[a-z0-9]+)*$',
      {
        severity: 'error', // 修改为error级别警告
        message: 'Expected variable to be kebab-case'
      }
    ]
  }
};

1
2
3
4
5
6
7
8
9
10
11
12
13

# 与 IDE 的集成

在 vscode 中可使用stylelint扩展, 对文件进行即时检测、错误修复

# 开启文件检测

需要在 vscode 中增加以下设置:

    "stylelint.validate": [
        "css",
        "less",
        "postcss",
        "scss",
        "vue",
        "html"
    ]

1
2
3
4
5
6
7
8

# 自动修复

styelint支持自动修复检测到的一些错误问题, 可以在文件保存时进行自动修复。

需要在 vscode 中增加以下设置:

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

1
2
3

# 与 prettier 的集成

本配置支持读取项目目录下的prettier配置文件, 并遵循其中的格式设定。

# 与 husky 的集成

husky用于制定 git hook,可在代码提交、代码推送时执行一些工作

例：

在代码提交时对 css 文件代码检测

package.json

  "lint-staged": {
    "src/**/*.{html,vue,css,scss}": [
      "stylelint --fix",
      "git add"
    ]
  },
  "husky": {
    "hooks": {
      "pre-commit": "lint-staged",
    }
  }

1
2
3
4
5
6
7
8
9
10
11

注：lint-staged 工具由于版本更新原因，可能不再需要添加git add命令，如出现相关警告，移除即可。

# 忽略部分文件

可在项目根目录下添加.stylelintignore文件，语法与.gitignore相同，以忽略对不必要的文件的检测

例如忽略对构建产物、node_modules 等的检测

# 注意事项

目前发现从阿里巴巴矢量图标库下载的图标字体 css 文件存在自动修复后格式错乱的问题，建议将iconfont相关的 css 文件添加到.stylelintignore中

.stylelintignore
```
/iconfont/
```
1