vue3校验CSS、SCSS、LESS···

平时开发中，ESlint已被我们熟练使用，但对css的校验却是缺失的，下面就介绍VScode编辑器及vue3代码如何配置才能校验css
(1)VScode安装插件Stylelint

（2）npm安装Stylelint及其标准配置（我用了scss）

npm install --save-dev stylelint stylelint-config-standard stylelint-scss

安装后，我的package.json多出这几个

"stylelint": "^13.13.1",
"stylelint-config-standard": "^22.0.0",
"stylelint-scss": "^3.21.0"

注意：直接安装可能会遇到报错：Unknown word (CssSyntaxError)，可能是这三个组合插件版本太新，对vue3支持不是太好，解决方法就是降版本，降成我上面的版本就行。

(3)根目录新建.stylelintrc.cjs文件，加入如下代码

module.exports = {
    extends: 'stylelint-config-standard',
    rules: {
        'indentation': 2,
        'selector-pseudo-element-no-unknown': [
            true,
            {
                ignorePseudoElements: ['v-deep','v-bind']
            }
        ],
        'number-leading-zero': 'never',
        'no-descending-specificity': null,
        'font-family-no-missing-generic-family-keyword': null,
        'selector-type-no-unknown': null,
        'at-rule-no-unknown': null,
        'no-duplicate-selectors': null,
        'no-empty-source':null,
        'function-name-case':null,
        'at-rule-name-case':null,
        'value-keyword-case':null,
        'rule-empty-line-before':'never',
        'function-calc-no-unspaced-operator':null,
        'selector-pseudo-class-no-unknown': [true, { ignorePseudoClasses: ['global','deep'] }]
    }
}

(4)根目录下最顶部找到.vscode文件夹，找到settings.json文件(没有则新建)，将如下代码加入进去

{
  "editor.formatOnSave": true,
	"stylelint.enable": true,
	"editor.codeActionsOnSave": {
		"source.fixAll.stylelint": true
	},
	"stylelint.validate": ["css", "less", "postcss", "scss", "vue", "sass", "html"],
	"files.eol": "\n",
}

(5)试验效果
随便打开一个vue文件，就可以验证效果了

stylelint中文文档：https://stylelint.bootcss.com/user-guide/get-started.html