stylelint在项目中使用

1. stylelint-order
   https://www.npmjs.com/package/stylelint-order
   https://gitee.com/mirrors_jamesarosen/stylelint-order
   官网：https://github.com/hudochenkov/stylelint-order
   a. 用法
   
   b. order/order

c. order/properties-order
属性排序

d.order/properties-alphabetical-order
值：true，安装字母排序

'order/properties-alphabetical-order': [true,],

建议配置

'order/order': [['dollar-variables','custom-properties','at-rules','declarations',{type: 'at-rule',name: 'supports'},{type: 'at-rule',name: 'media'},'rules'],{severity: 'warning'}],// Specify the alphabetical order of the attributes in the declaration block'order/properties-order': ['position','top','right','bottom','left','z-index','display','float','width','height','max-width','max-height','min-width','min-height','padding','padding-top','padding-right','padding-bottom','padding-left','margin','margin-top','margin-right','margin-bottom','margin-left','margin-collapse','margin-top-collapse','margin-right-collapse','margin-bottom-collapse','margin-left-collapse','overflow','overflow-x','overflow-y','clip','clear','font','font-family','font-size','font-smoothing','osx-font-smoothing','font-style','font-weight','hyphens','src','line-height','letter-spacing','word-spacing','color','text-align','text-decoration','text-indent','text-overflow','text-rendering','text-size-adjust','text-shadow','text-transform','word-break','word-wrap','white-space','vertical-align','list-style','list-style-type','list-style-position','list-style-image','pointer-events','cursor','background','background-attachment','background-color','background-image','background-position','background-repeat','background-size','border','border-collapse','border-top','border-right','border-bottom','border-left','border-color','border-image','border-top-color','border-right-color','border-bottom-color','border-left-color','border-spacing','border-style','border-top-style','border-right-style','border-bottom-style','border-left-style','border-width','border-top-width','border-right-width','border-bottom-width','border-left-width','border-radius','border-top-right-radius','border-bottom-right-radius','border-bottom-left-radius','border-top-left-radius','border-radius-topright','border-radius-bottomright','border-radius-bottomleft','border-radius-topleft','content','quotes','outline','outline-offset','opacity','filter','visibility','size','zoom','transform','box-align','box-flex','box-orient','box-pack','box-shadow','box-sizing','table-layout','animation','animation-delay','animation-duration','animation-iteration-count','animation-name','animation-play-state','animation-timing-function','animation-fill-mode','transition','transition-delay','transition-duration','transition-property','transition-timing-function','background-clip','backface-visibility','resize','appearance','user-select','interpolation-mode','direction','marks','page','set-link-source','unicode-bidi','speak']

3. 标准用法（以less为例子）
   a. 安装依赖包

npm install -D less less-loader stylelint stylelint-config-standard stylelint-config-standard-less postcss-less stylelint-config-recommended-vue stylelint-order @stylistic/stylelint-plugin

b. 在stylelint.config.js配置
@stylistic/stylelint-plugin 可选

export default {root: true,extends: ['stylelint-config-standard', '@stylistic/stylelint-plugin'],plugins: ['stylelint-order',],overrides: [{files: ['*.(html|vue)', '**/*.(html|vue)'],customSyntax: 'postcss-html',extends: ['stylelint-config-recommended-vue'],rules: {'selector-pseudo-class-no-unknown': [true,{ignorePseudoClasses: ['global', 'deep'],},],'selector-pseudo-element-no-unknown': [true,{ignorePseudoElements: ['v-deep', 'v-global', 'v-slotted'],},],},},{files: ['*.less', '**/*.less'],customSyntax: 'postcss-less',extends: ['stylelint-config-standard-less'],rules: {'selector-pseudo-class-no-unknown': [true,{ignorePseudoClasses: ['global', 'deep'],},],},},{files: ['*.scss', '**/*.scss'],customSyntax: 'postcss-scss',extends: ['stylelint-config-recommended-scss', 'stylelint-config-recommended-vue/scss'],},],rules: {'selector-pseudo-class-no-unknown': [true,{ignorePseudoClasses: ['global'],},],'selector-pseudo-element-no-unknown': [true,{ignorePseudoElements: ['v-deep'],},],'at-rule-no-unknown': [true,{ignoreAtRules: ['tailwind','apply','variants','responsive','screen','function','if','each','include','mixin',],},],'no-empty-source': null,'named-grid-areas-no-invalid': null,'no-descending-specificity': null,'font-family-no-missing-generic-family-keyword': null,'at-rule-empty-line-before': null,// 'declaration-block-trailing-semicolon': 'always','rule-empty-line-before': ['always',{ignore: ['after-comment', 'first-nested'],},],'unit-no-unknown': [true, { ignoreUnits: ['rpx'] }],'order/order': [['dollar-variables','custom-properties','at-rules','declarations',{type: 'at-rule',name: 'supports',},{type: 'at-rule',name: 'media',},'rules',],{severity: 'warning',},],// Specify the alphabetical order of the attributes in the declaration block'order/properties-order': ['position','top','right','bottom','left','z-index','display','float','width','height','max-width','max-height','min-width','min-height','padding','padding-top','padding-right','padding-bottom','padding-left','margin','margin-top','margin-right','margin-bottom','margin-left','margin-collapse','margin-top-collapse','margin-right-collapse','margin-bottom-collapse','margin-left-collapse','overflow','overflow-x','overflow-y','clip','clear','font','font-family','font-size','font-smoothing','osx-font-smoothing','font-style','font-weight','hyphens','src','line-height','letter-spacing','word-spacing','color','text-align','text-decoration','text-indent','text-overflow','text-rendering','text-size-adjust','text-shadow','text-transform','word-break','word-wrap','white-space','vertical-align','list-style','list-style-type','list-style-position','list-style-image','pointer-events','cursor','background','background-attachment','background-color','background-image','background-position','background-repeat','background-size','border','border-collapse','border-top','border-right','border-bottom','border-left','border-color','border-image','border-top-color','border-right-color','border-bottom-color','border-left-color','border-spacing','border-style','border-top-style','border-right-style','border-bottom-style','border-left-style','border-width','border-top-width','border-right-width','border-bottom-width','border-left-width','border-radius','border-top-right-radius','border-bottom-right-radius','border-bottom-left-radius','border-top-left-radius','border-radius-topright','border-radius-bottomright','border-radius-bottomleft','border-radius-topleft','content','quotes','outline','outline-offset','opacity','filter','visibility','size','zoom','transform','box-align','box-flex','box-orient','box-pack','box-shadow','box-sizing','table-layout','animation','animation-delay','animation-duration','animation-iteration-count','animation-name','animation-play-state','animation-timing-function','animation-fill-mode','transition','transition-delay','transition-duration','transition-property','transition-timing-function','background-clip','backface-visibility','resize','appearance','user-select','interpolation-mode','direction','marks','page','set-link-source','unicode-bidi','speak',],},ignoreFiles: ['**/*.js', '**/*.jsx', '**/*.tsx', '**/*.ts'],
};

4. .settings.json配置

"source.fixAll.stylelint": "explicit""stylelint.enable": true,"stylelint.validate": ["css","less","scss","pcss","postcss","vue"],

"source.fixAll.stylelint": "explicit""stylelint.enable": true,"stylelint.validate": ["css","less","scss","pcss","postcss","vue"],