stylelint 规范 css 的书写风格

安装

  1. yarn add stylelint --dev

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

  1. yarn add stylelint-config-prettier stylelint-config-recommended stylelint-config-standard stylelint-config-html --dev

image.png

  1. "extends": ["stylelint-config-standard", 'stylelint-config-prettier'],

为了让 stylelint 能够读 vue (.html, .xml, .svelte, .vue 等)文件，我们还需要安装postcss-html

  1. yarn add postcss-html --dev
  1. "customSyntax": "postcss-html"

stylelint-order 是CSS属性排序插件，并且每个规则都支持自动修复（stylelint —fix）

  1. yarn add stylelint-order --dev

package.json 配置命令

  1. "stylelint": "npx stylelint --aei .vue src",
  2. "stylint:fix": "npx stylelint ./src/**/*.vue --fix"

项目下新建 stylelint.config.js

项目下新建 .stylelintignore

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

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