使⽤stylelint进⾏Vue项⽬样式检查
  是⼀个强⼤的现代 CSS 检测器，可以让开发者在样式表中遵循⼀致的约定和避免错误。拥有超过170条的规则，包括捕捉错误、最佳实践、控制可以使⽤的语⾔特性和强制代码风格规范。它⽀持最新的CSS语法，并且灵活可配置。
1. 安装
  yarn add stylelint stylelint-config-standard stylelint-config-rational-order stylelint-order stylelint-scss stylelint-webpack-plugin --save-dev
  其中，是运⾏⼯具，或者是stylelint的推荐配置，是CSS属性排序插件，并且每个规则都⽀持⾃动修复（stylelint --fix）。
  stylelint本⾝就很好地⽀持SCSS语法（以及其他预处理器的语法），但是stylelint通常专注于标准CSS。⽽引⼊了特定于SCSS语法的规则。
  是Stylelint配置，通过按照以下顺序将相关属性声明进⾏分组来对它们进⾏排序：
1. Positioning
2. Box Model
3. Typography
4. Visual
5. Animation
6. Misc
  是webpack插件，使⽤stylelint检查CSS/SCSS代码。
2. 配置
  在根⽬录添加.stylelintrc.json配置校验规则，也可以进⾏⾃定义规则
1 {
2  "extends": ["stylelint-config-standard", "stylelint-config-rational-order"],
3  "plugins": ["stylelint-scss", "stylelint-order"],
4  "rules": {
5    "order/order": [
6      "custom-properties",
7      "dollar-variables",
8      "declarations",
json检查9      "rules",
10      "at-rules"
11    ]
12  }
13 }
  也可以添加.stylelintignore忽略指定⽬录或⽂件
1 /dist/
2 /test/
3
4 *.min.css
5
6 *.js
7 *.ts
8 *.png
9 *.jpg
10 *.webp
11 *.ttf
12 *.woff
.stylelintignore
  在package.json中添加script执⾏校验：
    "lint:style": "stylelint src/**/*.{css,scss} --syntax scss --fix"
  使⽤webpack插件校验.vue⽂件中的style，在fig.js中添加：
1 configureWebpack: config => {
2  const StyleLintPlugin = require('stylelint-webpack-plugin')
3  config.plugins.push(
4new StyleLintPlugin({
5      files: ['src/**/*.{vue,html,css,scss,sass,less}'],
6      failOnError: false,
7      cache: true,
8      fix: true,
9    })
10  )
11 }

版权声明：本站内容均来自互联网，仅供演示用，请勿用于商业和其他非法用途。如果侵犯了您的权益请与我们联系QQ:729038198，我们将在24小时内删除。