顾名思义，Stylelint 就是样式代码的 linter。它的功能和使用，都和 ESLint 类似，不过作用目标不同而已。

和 Prettier 的区别在于，它和 ESLint 一样，是一个 linter，会进行语义分析，能发现一些模式问题。在 Stylelint 15 之前，如果同时使用 Stylelint 和 Prettier，也需要使用 stylelint-config-prettier 避免在样式文件上的规则冲突。Stylelint 15 废弃了所有风格规则，不会和 Prettier 冲突。

安装 stylelint

stylelint

运行工具，对我们编写的样式进行检查.

stylelint-config-recommended & stylelint-config-standard

官方提供了 stylelint-config-recommended 和 stylelint-config-standard 两种 css 标准：

  • stylelint-config-recommended 包含可能报错的 rule，code format 的css标准
  • stylelint-config-standard继承于recommend，扩展一些常见的css书写标准

image.png

stylelint-order

stylelint 的一个插件，提供给 css 属性排序的功能。

stylelint-config-rational-order

排序规则包。上面的 stylelint-order 允许我们自定义样式属性名称顺序。而stylelint-config-rational-order为我们提供了一套合理的开箱即用的顺序 (先写定位，再写盒模型，再写内容区样式，最后写 CSS3 相关属性)，不用自己再一个个定义排序规则。

stylelint-config-prettier

关闭所有不必要的或可能与 Prettier 冲突的规则。

  1. pnpm add stylelint stylelint-config-prettier stylelint-config-standard stylelint-order stylelint-config-rational-order -D

兼容 vue 文件

Stylelint v14 版本默认不支持 vue 文件中的 style 代码自动检测，详情查看官方迁移指南，为了让 stylelint 能够解析 vue (.html, .xml, .svelte, .vue 等)文件，我们还需要安装 stylelint-config-html、 postcss-html、postcss-less 等依赖

解析包：
postcss ：postcss-html 的依赖包，可以用于转换 css 代码
postcss-html：用于解析 HTML（和类似 HTML）的 PostCSS 语法，可以用于识别 html 或者 vue 中的样式
若项目中存在 scss 文件，则安装 postcss-scss
若项目中存在 less 文件，则安装 postcss-less

规则包：
stylelint-config-html：针对html文件的规则包。stylelint-config-html是一个基于HTML文件中的样式规则的stylelint 预设配置。它包含了一些常见的规则，如禁止未定义的变量、禁止使用未知的伪类等。

前面讲到官方提供了 stylelint-config-recommended 和 stylelint-config-standard 两种 css 标准，这两种标准针对 vue 文件或者 less、scss 等文件还有对应的 stylelint-config-recommended-vue、stylelint-config-recommended-less、stylelint-config-recommended-scss 等增强规则包，可以根据需求进行安装配置。

  1. pnpm add stylelint-config-html postcss-html postcss-less postcss -D

Visual Studio Code 编辑器使用 Stylelint 配置需要下载插件 Stylelint
image.png

StyleLint 配置文件

在项目根目录创建 .stylelintrc.js文件。

plugins 增强功能

stylelint-order 是 CSS属性排序插件，只有下载了排序检查插件，才能自定义顺序；stylelint-config-rational-order 预设的顺序才可以使用。

  1. plugins: ['stylelint-order'],

extends 使用预设配置

Stylelint 14+ 不再包含 Scss，Sass,Less 或者 SugarSS 等预编译器的解析了，所以我们可以通过 extends 引入公共规则

  1. "extends": [
  2.   'stylelint-config-standard',
  3.   'stylelint-config-html/html',
  4.   'stylelint-config-html/vue',
  5.   'stylelint-config-rational-order',
  6.   'stylelint-config-prettier'
  7. ],

overrides 覆写指定文件

  1. module.exports = {
  2.   // ...
  3.   overrides: [
  4.     {
  5.       files: ['*.vue', '**/*.vue', '*.html', '**/*.html'],
  6.       customSyntax: 'postcss-html',
  7.       rules: {
  8.         'selector-pseudo-class-no-unknown': [
  9.           true,
  10.           {
  11.             ignorePseudoClasses: ['deep']
  12.           }
  13.         ],
  14.         'selector-pseudo-element-no-unknown': [
  15.           true,
  16.           {
  17.             ignorePseudoElements: ['v-deep', 'v-bind']
  18.           }
  19.         ]
  20.       }
  21.     },
  22.     {
  23.       files: ['*.less', '**/*.less'],
  24.       customSyntax: 'postcss-less'
  25.     }
  26.   ]
  27. }

ignoreFiles 忽略文件

  1. ignoreFiles: ['**/*.js', '**/*.jsx', '**/*.tsx', '**/*.ts'],

.stylelintrc.js 完整配置

  1. module.exports = {
  2.   plugins: ['stylelint-order'],
  3.   extends: [
  4.     'stylelint-config-standard',
  5.     'stylelint-config-html/html',
  6.     'stylelint-config-html/vue',
  7.     'stylelint-config-prettier',
  8.     'stylelint-config-rational-order'
  9.   ],
  10.   customSyntax: 'postcss-less',
  11.   ignoreFiles: ['**/*.js', '**/*.jsx', '**/*.tsx', '**/*.ts'],
  12.   rules: {
  13.     'function-no-unknown': null,
  14.     'selector-class-pattern': null,
  15.     'color-function-notation': 'legacy',
  16.     'alpha-value-notation': 'number',
  17.     'value-keyword-case': [
  18.       'lower',
  19.       {
  20.         ignoreFunctions: ['v-bind', 'var']
  21.       }
  22.     ]
  23.   },
  24.   overrides: [
  25.     {
  26.       files: ['*.vue', '**/*.vue', '*.html', '**/*.html'],
  27.       customSyntax: 'postcss-html',
  28.       rules: {
  29.         'selector-pseudo-class-no-unknown': [
  30.           true,
  31.           {
  32.             ignorePseudoClasses: ['deep']
  33.           }
  34.         ],
  35.         'selector-pseudo-element-no-unknown': [
  36.           true,
  37.           {
  38.             ignorePseudoElements: ['v-deep', 'v-bind']
  39.           }
  40.         ]
  41.       }
  42.     },
  43.     {
  44.       files: ['*.less', '**/*.less'],
  45.       customSyntax: 'postcss-less'
  46.     }
  47.   ]
  48. }

配置完成后打开默认的style.css可以看到报错，保存即可自动修复问题。

image.png

.stylelintignore 忽略文件

.stylelintignore 用来配置不需要通过 stylelint 约束的文件

  1. # 其他类型文件
  2. *.js
  3. *.ts
  4. *.jpg
  5. *.woff
  7. # 测试和打包目录
  8. /test/*
  9. /dist/*
  10. /public/*
  11. public/*
  12. /node_modules/

package.json 配置命令

  1. "lint:stylelint": "stylelint --cache --fix \"**/*.{vue,less,postcss,css,scss}\" --cache --cache-location node_modules/.cache/stylelint/",

vscode 设置保存时自动格式化

至此，ESLint & Prettier & Stylelint 已经配置完成，我们可以再配置 vscode 保存时自动格式化

  1. "editor.codeActionsOnSave": {
  2.   "source.fixAll": true
  3. },
  4. "eslint.options": {
  5.   "extensions": [
  6.     ".js",
  7.     ".vue",
  8.     ".ts"
  9.   ]
  10. },
  11. "eslint.validate": [
  12.   "javascript",
  13.   "vue",
  14.   "typescript",
  15.   "html",
  16.   "vue-html"
  17. ],
  18. "eslint.workingDirectories": [
  19.   ".eslintrc.js",
  20.   {
  21.     "mode": "auto"
  22.   }
  23. ],
  24. "eslint.nodePath": "",
  25. "eslint.alwaysShowStatus": true,
  26. "editor.quickSuggestions": {
  27.   "strings": true
  28. },
  29. "stylelint.validate": [
  30.   "vue",
  31.   "less",
  32.   "css",
  33.   "html",
  34.   "scss",
  35.   "sass"
  36. ],
  37. "editor.tabSize": 2,