vscode+vue3+vite项目配置stylelint 2024版本

项目场景：

在搭建前端项目时经常要用到一些工程化的东西，还有一个规范化的东西，现在eslint已经在各大脚手架工具集成的很好，但是stylelint还是有点欠缺，而且每次的版本更新迭代是个最让人头疼的问题，写这篇文章记录下在当前最新版本下怎么去配置stylelint

解决方案：

提示：这里填写该问题的具体解决方案：

第一步、安装vscode 插件

1.在插件商店搜索并安装stylelint插件（当前最新版本1.4）

2.配置

首先确保stylelint是启用的状态（默认是启用的，但是有些人电脑就奇奇怪怪的是关闭的）

其次是进到setting.json界面里面去配置，让它可以校验vue文件

javascript 复制代码

"stylelint.validate": ["css", "less", "postcss", "scss", "sass", "vue"],

这里需要注意的一点是，当你从设置界面点进来时有可能它默认就会给你开了一个空的配置文件

这个切记一定要给它删掉，不然它的优先级会很高，会直接导致你配置的校验规则失效

第二步、安装配置依赖

一般来说我们需要的依赖有

bash 复制代码

npm i stylelint  stylelint-config-standard

然后在根目录配置下.stylelintrc.js

javascript 复制代码

export default {
    extends: [
        'stylelint-config-standard', // 配置stylelint拓展插件
    ],
    rules: {

    },
}

这时候已经能够满足大多数人的要求的，但是为了兼容vue3，并且支持scss,还需要再安装几个插件

javascript 复制代码

npm i stylelint  stylelint-config-standard stylelint-config-standard-scss stylelint-config-standard-vue stylelint-scss postcss-html postcss-scss

然后在配置文件中加上这个

javascript 复制代码

// @see: https://stylelint.io

export default {

    plugins: ["stylelint-scss"],
    /* 继承某些已有的规则 */
    extends: [
        'stylelint-config-standard', // 配置stylelint拓展插件
        'stylelint-config-standard-scss', 
        'stylelint-config-standard-vue/scss',// 配置stylelint scss插件
    ],
    overrides: [
        // 扫描 .vue/html 文件中的<style>标签内的样式
        {
            files: ['**/*.{vue,html}'],
            customSyntax: 'postcss-html',
        },
    ],
    rules: {

    },
}

extends中都是些配置好的rules,看名字搜一下自己需要的加进来就行，比如我需要加一个排序的规则

javascript 复制代码

npm i stylelint  stylelint-config-standard stylelint-config-standard-scss stylelint-config-standard-vue stylelint-scss postcss-html postcss-scss stylelint-config-recess-order

javascript 复制代码

export default {

    plugins: ["stylelint-scss","stylelint-order"],
    /* 继承某些已有的规则 */
    extends: [
        'stylelint-config-standard', // 配置stylelint拓展插件
        'stylelint-config-standard-scss', 
        'stylelint-config-standard-vue/scss',// 配置stylelint scss插件
        'stylelint-config-recess-order', // 配置stylelint css属性书写顺序插件,
        //'stylelint-config-prettier', // 配置stylelint和prettier兼容 ,注意stylelint大于等于v15是已经不需要此插件
    ],
    overrides: [
        // 扫描 .vue/html 文件中的<style>标签内的样式
        {
            files: ['**/*.{vue,html}'],
            customSyntax: 'postcss-html',
        },
    ],
    rules: {
    },
}

需要注意的一点是 'stylelint-config-prettier', 当你的stylelint大于等于v15是已经不需要此插件，它主要是为了避免stylelint和pretter的冲突，高版本的stylelint已经解决了这个问题