vue3stylelint-检查错误和自动修复-开发工具webstorm
目录
vue3+stylelint 检查错误和自动修复 开发工具webstorm
vue3+stylelint 检查错误和自动修复 开发工具webstorm
安装stylelint
为了让stylelint能够去兼容vue3,这里需要下载比较多的东西
代码片
npm i stylelint stylelint-config-html stylelint-config-recommended-scss stylelint-config-recommended-vue stylelint-config-standard stylelint-config-standard-scss stylelint-order postcss postcss-html -D
设置开发工具
在根目录添加stylelint.config.js
代码片
module.exports = {
extends: [
'stylelint-config-standard',
'stylelint-config-html/vue',
'stylelint-config-standard-scss',
'stylelint-config-recommended-vue/scss',
],
plugins: ['stylelint-order'],
rules: {
'unit-no-unknown': [true,{ ignoreUnits: ["/rpx/", "/upx/"] } ],
'no-descending-specificity': null,
'function-url-quotes': 'always',
'string-quotes': 'double',
indentation: 4,
'unit-case': null,
'color-hex-case': 'lower',
'color-hex-length': 'long',
'rule-empty-line-before': 'never',
'font-family-no-missing-generic-family-keyword': null,
'block-opening-brace-space-before': 'always',
'property-no-unknown': null,
'no-empty-source': null,
'selector-pseudo-class-no-unknown': [
true,
{
ignorePseudoClasses: ['deep'],
},
],
'order/properties-order': [
'position',
'top',
'right',
'bottom',
'left',
'z-index',
'display',
'justify-content',
'align-items',
'float',
'clear',
'overflow',
'overflow-x',
'overflow-y',
'margin',
'margin-top',
'margin-right',
'margin-bottom',
'margin-left',
'padding',
'padding-top',
'padding-right',
'padding-bottom',
'padding-left',
'width',
'min-width',
'max-width',
'height',
'min-height',
'max-height',
'font-size',
'font-family',
'font-weight',
'border',
'border-style',
'border-width',
'border-color',
'border-top',
'border-top-style',
'border-top-width',
'border-top-color',
'border-right',
'border-right-style',
'border-right-width',
'border-right-color',
'border-bottom',
'border-bottom-style',
'border-bottom-width',
'border-bottom-color',
'border-left',
'border-left-style',
'border-left-width',
'border-left-color',
'border-radius',
'text-align',
'text-justify',
'text-indent',
'text-overflow',
'text-decoration',
'white-space',
'color',
'background',
'background-position',
'background-repeat',
'background-size',
'background-color',
'background-clip',
'opacity',
'filter',
'list-style',
'outline',
'visibility',
'box-shadow',
'text-shadow',
'resize',
'transition',
],
},
}
排除文件 .stylelintignore
node_modules/*
.hbuilderx/*
unpackage/*
uni_modules/*
/dist/
/static/css/common.css
# 其他类型文件
*.js
*.jpg
*.woff
stlylelintl 检查效果
设置快快捷键自动修复
//可以 全局安装一下 安装完成后
// C:\Program Files\nodejs\stylelint.cmd
// $FileName$ --fix
// $FileDir$
npm i stylelint -g
修改效果
按自己设定的快捷键后会自动修复,有写问题自动修复失败的 还是要手动修复的