使⽤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小时内删除。
发表评论