Vue3 -- 项目配置之stylelint【企业级项目配置保姆级教程3】

stylelint为css的lint工具。可格式化css代码,检查css语法错误与不合理的写法,指定css书写顺序等。

配置stylelint:

我们项目使用scss作为预处理器

安装依赖:

pnpm add sass sass-loader stylelint postcss postcss-scss postcss-html stylelint-config-prettier stylelint-config-recess-order stylelint-config-recommended-scss stylelint-config-standard stylelint-config-standard-vue stylelint-scss stylelint-order stylelint-config-standard-scss -D

创建.stylelintrc.cjs文件:

在根目录下创建.stylelintrc.cjs文件并配置:

// @see: https://stylelint.iomodule.exports = {root: true,// 继承某些已有的规则extends: ["stylelint-config-standard", // 配置 stylelint 拓展插件"stylelint-config-html/vue", // 配置 vue 中 template 样式格式化"stylelint-config-standard-scss", // 配置 stylelint scss 插件"stylelint-config-recommended-vue/scss", // 配置 vue 中 scss 样式格式化"stylelint-config-recess-order" // 配置 stylelint css 属性书写顺序插件,],overrides: [// 扫描 .vue/html 文件中的 <style> 标签内的样式{files: ["**/*.{vue,html}"],customSyntax: "postcss-html"}],rules: {"function-url-quotes": "always", // URL 的引号 "always(必须加上引号)"|"never(没有引号)""color-hex-length": "long", // 指定 16 进制颜色的简写或扩写 "short(16进制简写)"|"long(16进制扩写)""rule-empty-line-before": "never", // 要求或禁止在规则之前的空行 "always(规则之前必须始终有一个空行)"|"never(规则前绝不能有空行)"|"always-multi-line(多行规则之前必须始终有一个空行)"|"never-multi-line(多行规则之前绝不能有空行)""font-family-no-missing-generic-family-keyword": null, // 禁止在字体族名称列表中缺少通用字体族关键字"scss/at-import-partial-extension": null, // 解决不能使用 @import 引入 scss 文件"property-no-unknown": null, // 禁止未知的属性"no-empty-source": null, // 禁止空源码"selector-class-pattern": null, // 强制选择器类名的格式"value-no-vendor-prefix": null, // 关闭 vendor-prefix (为了解决多行省略 -webkit-box)"no-descending-specificity": null, // 不允许较低特异性的选择器出现在覆盖较高特异性的选择器"value-keyword-case": null, // 解决在 scss 中使用 v-bind 大写单词报错"selector-pseudo-class-no-unknown": [true,{ignorePseudoClasses: ["global", "v-deep", "deep"]}]},ignoreFiles: ["**/*.js", "**/*.jsx", "**/*.tsx", "**/*.ts"]
};

创建.stylelintignore文件:

在根目录下创建.stylelintignore文件:

/node_modules/*
/dist/*
/html/*
/public/*

package.json文件添加运行脚本:

配置统一的prettier来格式化我买的html、css、js代码:
在这里插入图片描述

"format": "prettier --write \"./**/*.{html,vue,ts,js,json,md}\"",
"lint:eslint": "eslint src/**/*.{ts,vue} --cache --fix",
"lint:style": "stylelint src/**/*.{css,scss,vue} --cache --fix",

运行脚本命令:

pnpm run format

运行前:乱七八糟的样子
在这里插入图片描述
运行后:(你就是我的风景~~)
在这里插入图片描述

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处:http://www.mzph.cn/web/59427.shtml

如若内容造成侵权/违法违规/事实不符,请联系多彩编程网进行投诉反馈email:809451989@qq.com,一经查实,立即删除!

相关文章

SpringBoot中使用拦截器拦截跳转登录详解

文章目录 SpringBoot中使用拦截器拦截跳转登录详解一、引言二、方法一&#xff1a;基于Session的拦截器1、拦截器实现1.1、创建拦截器类1.2、拦截器配置 2、控制器和视图2.1、控制器实现2.2、视图实现 三、方法二&#xff1a;基于异常处理的拦截器1、拦截器实现1.1、创建拦截器…

androidstudio下载gradle慢

1&#xff0c;现象&#xff1a; 2&#xff0c;原因&#xff0c;国内到国外网址慢 3&#xff0c;解决方法&#xff1a;更改gradle-wrapper.properties #Wed Sep 26 20:01:52 CST 2018 distributionBaseGRADLE_USER_HOME distributionPathwrapper/dists zipStoreBaseGRADLE_USER…

golang分布式缓存项目 Day4 一致性哈希

注&#xff1a;该项目原作者&#xff1a;https://geektutu.com/post/geecache-day1.html。本文旨在记录本人做该项目时的一些疑惑解答以及部分的测试样例以便于本人复习 为什么使用一致性哈希 我该访问谁 对于分布式缓存来说&#xff0c;当一个节点接收到请求&#xff0c;如…

爬虫如何解决短效代理被封的问题?

在数据采集的征途上&#xff0c;短效代理如同一把双刃剑&#xff0c;它既能为我们带来速度和效率&#xff0c;也可能因为频繁更换IP地址而遭遇被封禁的风险。那么&#xff0c;作为数据采集er的我们&#xff0c;该如何巧妙应对&#xff0c;确保爬虫的稳定运行呢&#xff1f;今天…

计算机网络:运输层 —— 运输层端口号

文章目录 运输层端口号的分类端口号与应用程序的关联应用举例发送方的复用和接收方的分用 运输层端口号的分类 端口号只具有本地意义&#xff0c;即端口号只是为了标识本计算机网络协议栈应用层中的各应用进程。在因特网中不同计算机中的相同端口号是没有关系的&#xff0c;即…

STM32H503开发(1)----开发板测试

STM32H503开发----1.开发板测试 概述硬件准备视频教学样品申请源码下载产品特性参考程序生成STM32CUBEMX串口配置LED配置堆栈设置串口重定向主循环演示 概述 STM32H503 & SENSOR是一款基于STM32H5系列微控制器的评估套件。该微控制器采用了40nm工艺制造&#xff0c;具有更…

#Swift Automatic Initializer Inheritance

在Swift中&#xff0c;**自动初始化器继承&#xff08;Automatic Initializer Inheritance&#xff09;**是一种机制&#xff0c;用于简化类的初始化器继承规则。它决定了在什么条件下子类可以自动继承父类的初始化器&#xff0c;而无需手动实现或重写。自动继承初始化器的机制…

Nacos黑马笔记

1. Nacos安装&#xff08;黑马教程安装材料&#xff09; 1.1 Windows安装 开发阶段采用单机安装即可。 1.1.1 下载安装包 在Nacos的GitHub页面&#xff0c;提供有下载链接&#xff0c;可以下载编译好的Nacos服务端或者源代码&#xff1a; GitHub主页&#xff1a;https://gith…

通过投毒Bingbot索引挖掘必应中的存储型XSS

简介 在本文中&#xff0c;我将讨论如何通过从外部网站对Bingbot进行投毒&#xff0c;来在Bing.com上实现持久性XSS攻击。 什么是存储型或持久性XSS&#xff1f;存储型攻击指的是将恶意脚本永久存储在目标服务器上&#xff0c;例如数据库、论坛、访问日志、评论栏等。受害者在…

【Pikachu】File Inclusion文件包含实战

永远也不要忘记能够笑的坚强&#xff0c;就算受伤&#xff0c;我也从不彷徨。 1.File Inclusion(文件包含漏洞)概述 File Inclusion(文件包含漏洞)概述 文件包含&#xff0c;是一个功能。在各种开发语言中都提供了内置的文件包含函数&#xff0c;其可以使开发人员在一个代码…

Stored procedures in PostgreSQL

select 存储过程&#xff0c;在现了解的情况&#xff0c;还是没有mysql,sqlserver等好写好用。 --postgreSQL 11.0 以下版本 create or replace FUNCTION procInsertSchool (pSchoolId Char(5),pSchoolName VarChar(100),pSchoolTelNo VarChar(8) ) RETURNS void language plp…

Llama微调测试记录

使用llama模型(Atom-7B-Chat) 参考github:https://github.com/LlamaFamily/Llama-Chineseconda安装python3.11的环境运行pip install -r requirements.txt从huggingface的下载Atom-7B-Chat模型,此处推荐一个好用的镜像:https://hf-mirror.com/FlagAlpha/Atom-7B-Chat使用A…

测试实项中的偶必现难测bug--苹果支付丢单问题

问题描述: app支付后,由于某种原因(可能是网络、流量不稳定、或者用户快速频繁操作。。。)会造成一定概率性的回调苹果支付结果失败的情况出现,表现的直观现象就是客户反馈已经支付了,包括苹果支付也是有记录,但是我们的后台显示的是已取消状态的订单 验证难点:测试和…

Java:JVM

1.JVM内存区域的划分 一个Java写的程序跑起来,就得到了一个Java进程 JVM 上面运行的字节码指令; 进程:操作系统资源分配的基本单位; 内存区域的划分: 1.程序计数器 在内存空间里(比较小的空间),保存了下一个要执行的指令的内存地址(元数据区的地址); 这里的"下一条…

常见git命令记录

记录一些常见的git操作 下载代码 下载 git clone [代码连接] 切分支 git branch -b [分支名] 提交代码 添加 git add [需要提交的代码路径] 提交 git commit -m "一些骚话" push git push origin HEAD:refs/for/[仓名称] 通过diff文件&#xff0c;同步修…

快递物流查询API接口如何用PHP调用

在现代商业中&#xff0c;供应链的协同运作至关重要。 快递物流查询API接口可以实现供应商、电商平台、物流企业和消费者之间的信息无缝对接&#xff0c;各方能够及时获取快递物流信息&#xff0c;从而更好地协调生产、销售和配送等环节&#xff0c;提高整个供应链的效率和效益…

Java GC 学习笔记

Java GC 第一章 JVM内存模型 方法区 栈区 堆区 程序计数器 第二章 常用回收算法 2.1 什么情况下需要回收&#xff1f; 2.2 什么时候需要回收&#xff1f; 2.3 怎样回收&#xff1f; ParallelNew &#xff08;Young&#xff09; CMS &#xff08;Old&#xff09…

Overleaf数学符号乱码等问题

Overleaf使用XeLatex编译时&#xff0c;公式中数学符号非法显示&#xff0c;如下图&#xff0c;属于∈符号显示错误&#xff1a; 原因&#xff1a;一般是文内中文引起的&#xff0c;警惕是否有中文标点等。 XeLatex编译图片标题是中文 原因&#xff1a;用了UTF-8编码&#x…

【MySQL 保姆级教学】事务的隔离级别(详细)--下(13)

事务的隔离级别 1. 如何理解事务的隔离性2. 事务隔离级别的分类3. 查看和设置事务隔离级别3.1 全局和会话隔离级别3.2 查看和设置隔离级别 4. 事务隔离级别的演示4.1 读未提交&#xff08;Read Uncommitted&#xff09;4.2 读已提交&#xff08;Read Committed&#xff09;4.3 …

响应式网页设计--html

一&#xff0c;HTML 文档的基本结构 一个典型的 HTML 文档包含了几个主要部分&#xff0c;基本结构如下(本文以下出现的所有代码都可以套入下面示例进行测试)&#xff1a; <!DOCTYPE html> <html lang"zh"> <head><meta charset"UTF-8&q…