使用stylelint进行Vue项目样式检查

  stylelint是一个强大的现代 CSS 检测器,可以让开发者在样式表中遵循一致的约定和避免错误。拥有超过170条的规则,包括捕捉错误、最佳实践、控制可以使用的语言特性和强制代码风格规范。它支持最新的CSS语法,并且灵活可配置。

1. 安装

  yarn add stylelint stylelint-config-standard stylelint-config-rational-order stylelint-order stylelint-scss stylelint-webpack-plugin --save-dev

  其中,stylelint是运行工具,stylelint-config-standard或者stylelint-config-recommended是stylelint的推荐配置,stylelint-order是CSS属性排序插件,并且每个规则都支持自动修复(stylelint --fix)。

  stylelint本身就很好地支持SCSS语法(以及其他预处理器的语法),但是stylelint通常专注于标准CSS。而stylelint-scss引入了特定于SCSS语法的规则。

  stylelint-config-rational-order是Stylelint配置,通过按照以下顺序将相关属性声明进行分组来对它们进行排序:
    1. Positioning      2. Box Model      3. Typography      4. Visual      5. Animation      6. Misc

  stylelint-webpack-plugin是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",
 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,在vue.config.js中添加:

 1 configureWebpack: config => {
 2   const StyleLintPlugin = require('stylelint-webpack-plugin')
 3   config.plugins.push(
 4     new StyleLintPlugin({
 5       files: ['src/**/*.{vue,html,css,scss,sass,less}'],
 6       failOnError: false,
 7       cache: true,
 8       fix: true,
 9     })
10   )
11 }

 

posted @ 2019-11-26 11:09  huliang56  阅读(4215)  评论(0编辑  收藏  举报