使用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
在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 }