顾名思义,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
  6. # 测试和打包目录
  7. /test/*
  8. /dist/*
  9. /public/*
  10. public/*
  11. /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,