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已经解决了这个问题

相关推荐
三体世界1 小时前
Qt从入门到放弃学习之路(1)
开发语言·c++·git·qt·学习·前端框架·编辑器
北极糊的狐1 小时前
IntelliJ IDEA插件:CodeGeeX 智能助手插件
java·ide·intellij-idea
边疆.1 小时前
【Linux】编辑器vim的使用和理解gcc编译器
linux·运维·服务器·编辑器·vim
coding消烦员10 小时前
新版 vscode 去除快捷键 Ctrl+I 显示 Copilot 的 AI 对话框
人工智能·vscode·copilot
落落鱼201310 小时前
Dompdf库html生成pdf时editor编辑器中文本长度被截断不会自动换行问题处理
pdf·编辑器·php·html生成pdf
农场主John13 小时前
vscode断点使用
ide·vscode·编辑器
Caesar Zou13 小时前
解决 Codex 在 WSL/SSH/VSCODE 登录时报 “Token exchange failed: 403 Forbidden” 问题
ide·vscode·编辑器
张人玉16 小时前
Visual Studio 2022打包生成exe安装程序
ide·visual studio·打包·installer
Dobby_0518 小时前
【Go】C++ 转 Go 第(四)天:结构体、接口、反射、标签 | 面向对象编程
vscode·golang·1024程序员节