平时开发中,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