2022年stylelint14最新配置

有小伙伴反馈说stylelint不能用了，我一看，原来是stylelint更新到14了，并且vscode插件也从0.87.0更新到了1.2.1，然后新版本与现在的vue3不兼容所导致的。所以成本最小的方案就是退回13，把vscode插件也降回0.87.0。

但是为了更好的面向未来编程，我去github那里搜了半天，终于找到了解决方案。

第一、配置vscode插件

为了防止有些小伙伴没配置，我这里还是完整的贴出来

    "stylelint.enable": true,    
    "editor.codeActionsOnSave": {        
        "source.fixAll.stylelint": true    
    },
    "stylelint.validate": ["css", "less", "postcss", "scss", "vue", "sass"]

实际上，关键就在于让stylelint去校验vue文件。

第二、下载新的插件

为了让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文件

module.exports = {
    extends: [
        'stylelint-config-standard',
        'stylelint-config-html/vue',
        'stylelint-config-standard-scss',
        'stylelint-config-recommended-vue/scss',
    ],
    plugins: ['stylelint-order'],
    rules: {
        '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',
        ],
    },
}

这样就好了，因为我用的是sass，所以我下的是stylelint-config-standard-scss，如果你用less，那么你就去看一下有没有对应的插件把。

最后再贴一下我的版本号

{
    "devDependencies": {
        "@vitejs/plugin-vue": "^2.0.0",
        "postcss": "^8.4.5",
        "postcss-html": "^1.3.0",
        "sass": "^1.49.0",
        "stylelint": "^14.3.0",
        "stylelint-config-html": "^1.0.0",
        "stylelint-config-recommended-scss": "^5.0.2",
        "stylelint-config-recommended-vue": "^1.1.0",
        "stylelint-config-standard": "^24.0.0",
        "stylelint-config-standard-scss": "^3.0.0",
        "stylelint-order": "^5.0.0",
        "vite": "^2.7.2"
    }
}