vscode使用CSScomb插件

1. 安装

在这里插入图片描述
在设置中搜索csscomb,把Csscomb: Format On Save勾上
然后去edit in settings.json配置
在这里插入图片描述
在这里插入图片描述

2.使用

2.1 用官网提供的三种方法
https://github.com/csscomb/csscomb.js/tree/master/config
在这里插入图片描述
2.2 自定义
CSS 书写顺序规则可以参考这个荐腾讯 AollyTeam 团队的规范: http://alloyteam.github.io/CodeGuide/#css-declaration-order

 "csscomb.formatOnSave":true,// "csscomb.preset": "yandex", // 官方给的配置"csscomb.preset":{   // 也可以自定义"exclude": [".git/**","node_modules/**","bower_components/**"],"sort-order": [  //属性的排序设置["display","visibility","float","clear","overflow","overflow-x","overflow-y","clip","zoom"],["table-layout","empty-cells","caption-side","border-spacing","border-collapse","list-style","list-style-position","list-style-type","list-style-image"],["-webkit-box-orient","-webkit-box-direction","-webkit-box-decoration-break","-webkit-box-pack","-webkit-box-align","-webkit-box-flex"],["position","top","right","bottom","left","z-index"],["margin","margin-top","margin-right","margin-bottom","margin-left","-webkit-box-sizing","-moz-box-sizing","box-sizing","border","border-width","border-style","border-color","border-top","border-top-width","border-top-style","border-top-color","border-right","border-right-width","border-right-style","border-right-color","border-bottom","border-bottom-width","border-bottom-style","border-bottom-color","border-left","border-left-width","border-left-style","border-left-color","-webkit-border-radius","-moz-border-radius","border-radius","-webkit-border-top-left-radius","-moz-border-radius-topleft","border-top-left-radius","-webkit-border-top-right-radius","-moz-border-radius-topright","border-top-right-radius","-webkit-border-bottom-right-radius","-moz-border-radius-bottomright","border-bottom-right-radius","-webkit-border-bottom-left-radius","-moz-border-radius-bottomleft","border-bottom-left-radius","-webkit-border-image","-moz-border-image","-o-border-image","border-image","-webkit-border-image-source","-moz-border-image-source","-o-border-image-source","border-image-source","-webkit-border-image-slice","-moz-border-image-slice","-o-border-image-slice","border-image-slice","-webkit-border-image-width","-moz-border-image-width","-o-border-image-width","border-image-width","-webkit-border-image-outset","-moz-border-image-outset","-o-border-image-outset","border-image-outset","-webkit-border-image-repeat","-moz-border-image-repeat","-o-border-image-repeat","border-image-repeat","padding","padding-top","padding-right","padding-bottom","padding-left","width","min-width","max-width","height","min-height","max-height"],["font","font-family","font-size","font-weight","font-style","font-variant","font-size-adjust","font-stretch","font-effect","font-emphasize","font-emphasize-position","font-emphasize-style","font-smooth","line-height","text-align","-webkit-text-align-last","-moz-text-align-last","-ms-text-align-last","text-align-last","vertical-align","white-space","text-decoration","text-emphasis","text-emphasis-color","text-emphasis-style","text-emphasis-position","text-indent","-ms-text-justify","text-justify","letter-spacing","word-spacing","-ms-writing-mode","text-outline","text-transform","text-wrap","-ms-text-overflow","text-overflow","text-overflow-ellipsis","text-overflow-mode","-ms-word-wrap","word-wrap","-ms-word-break","word-break"],["color","background","filter:progid:DXImageTransform.Microsoft.AlphaImageLoader","background-color","background-image","background-repeat","background-attachment","background-position","-ms-background-position-x","background-position-x","-ms-background-position-y","background-position-y","-webkit-background-clip","-moz-background-clip","background-clip","background-origin","-webkit-background-size","-moz-background-size","-o-background-size","background-size"],["outline","outline-width","outline-style","outline-color","outline-offset","opacity","filter:progid:DXImageTransform.Microsoft.Alpha(Opacity","-ms-filter:\\'progid:DXImageTransform.Microsoft.Alpha","-ms-interpolation-mode","-webkit-box-shadow","-moz-box-shadow","box-shadow","filter:progid:DXImageTransform.Microsoft.gradient","-ms-filter:\\'progid:DXImageTransform.Microsoft.gradient","text-shadow"],["-webkit-transition","-moz-transition","-ms-transition","-o-transition","transition","-webkit-transition-delay","-moz-transition-delay","-ms-transition-delay","-o-transition-delay","transition-delay","-webkit-transition-timing-function","-moz-transition-timing-function","-ms-transition-timing-function","-o-transition-timing-function","transition-timing-function","-webkit-transition-duration","-moz-transition-duration","-ms-transition-duration","-o-transition-duration","transition-duration","-webkit-transition-property","-moz-transition-property","-ms-transition-property","-o-transition-property","transition-property","-webkit-transform","-moz-transform","-ms-transform","-o-transform","transform","-webkit-transform-origin","-moz-transform-origin","-ms-transform-origin","-o-transform-origin","transform-origin","-webkit-animation","-moz-animation","-ms-animation","-o-animation","animation","-webkit-animation-name","-moz-animation-name","-ms-animation-name","-o-animation-name","animation-name","-webkit-animation-duration","-moz-animation-duration","-ms-animation-duration","-o-animation-duration","animation-duration","-webkit-animation-play-state","-moz-animation-play-state","-ms-animation-play-state","-o-animation-play-state","animation-play-state","-webkit-animation-timing-function","-moz-animation-timing-function","-ms-animation-timing-function","-o-animation-timing-function","animation-timing-function","-webkit-animation-delay","-moz-animation-delay","-ms-animation-delay","-o-animation-delay","animation-delay","-webkit-animation-iteration-count","-moz-animation-iteration-count","-ms-animation-iteration-count","-o-animation-iteration-count","animation-iteration-count","-webkit-animation-direction","-moz-animation-direction","-ms-animation-direction","-o-animation-direction","animation-direction"],["content","quotes","counter-reset","counter-increment","resize","cursor","-webkit-user-select","-moz-user-select","-ms-user-select","user-select","nav-index","nav-up","nav-right","nav-down","nav-left","-moz-tab-size","-o-tab-size","tab-size","-webkit-hyphens","-moz-hyphens","hyphens","pointer-events"]
]
}

其他

sort-order按这种格式写的话,排版就出现空行,如果把他们都放在一个数组中,就不会有空行了
在这里插入图片描述
在这里插入图片描述

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

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

相关文章

【六:(mock数据)spring boot+mybatis+yml】

目录 1.1、代码编写Demo类User类启动类 APplication 1.2、配置类查询语句的配置 mysql.ymlspringboot的配置 application.yml日志的配置 logback.xml数据库的配置 mybatis-config.xml 1.3、测试:1.3.1、测试获取用户数1.3.2、添加用户1.3.3、数据的更新1.3.4、数据的…

阿里云今年有双十一活动吗?不好说

阿里云今年有双十一活动吗?不好说,因为去年就没有。阿里云双11优惠活动是一项大型的促销活动,每年都有,但是去年没有双十一活动,不知道今年2023年阿里云是否有双11优惠活动。但是阿里云百科aliyunbaike.com猜想&#x…

uni-app:js二维数组与对象数组之间的转换

一、二维数组整理成对象数组 效果 [ ["前绿箭","DI10","RO1"], ["前红叉","DI2","RO2"], ["后绿箭","DI12","RO3"], ["后红叉","DI4","RO6"] ] …

ES6 Generator 函数

Generator 函数是 ES6 提供的一种异步编程解决方案,语法行为与传统函数完全不同。 形式上,Generator 函数是一个普通函数,但是有两个特征。一是,function关键字与函数名之间有一个星号;二是,函数体内部使用…

STM32基于HAL库RT-Thread Demo测试

STM32基于HAL库RT-Thread Demo测试 🎈源码地址:https://github.com/RT-Thread/rt-thread/tree/master📌基于STM32CUBEMX中间件安装《基于 CubeMX 移植 RT-Thread Nano》📍环境搭建《使用 Env 创建 RT-Thread 项目工程》&#x1f5…

操作系统知识点学习

操作系统 一、什么是操作系统?请简要概述一下 操作系统是管理计算机硬件和软件资源的计算机程序,提供一个计算机用户与计算机硬件系统之间的接口。向上对用户程序提供接口,向下接管硬件资源。操作系统本质上也是一个软件,作为最接…

ChessGPT:免费好用的国际象棋对弈AI机器人

对于国际象棋初学者,需要找一个对手来练棋。ChessGPT,就是一个免费好用的AI对弈机器人,非常适合新手来提升,是一个很好的练习伙伴。网站地址是:https://www.chess.com/play/computer,也有手机版app&#xf…

【RocketMQ系列五】消息示例-顺序消息延迟消息广播消息的实现

1. 前言 上一篇文章我们介绍了简单消息的实现,本文将主要来介绍顺序消息的实现,顺序消息分为局部顺序消息和全局顺序消息。 顺序消息指的是消费者在消费消息时,按照生产者发送消息的顺序进行消费。即先发送的先消费【FIFO】。 顺序消息分为…

避免创建不必要的对象

1、一般来说,最好能重用对象而不是每次需要的时候就创建一个功能相同的新对象 先看一个反例,如下所示: String s = new String("No way"); 该语句每次被执行都会创建一个新的String实例。传递给String构造器的参数"No way"本身就是一个String实例,功…

设计模式-装饰器模式

装饰器模式(Decorator Pattern)是一种设计模式,它允许在运行时动态地给一个对象添加额外的功能,而不需要修改原始对象的结构。 在Java中,装饰器模式可以通过以下方式实现: 1. 创建一个接口…

从实时数据库转战时序数据库,他陪伴 TDengine 从 1.0 走到 3.0

关于采访嘉宾 在关胜亮的学生时代,“神童”这个称号如影随形,很多人初听时会觉得这个称谓略显夸张,有些人还会认为这是不是就是一种调侃,但是如果你听说过他的经历,就会理解这一称号的意义所在了。 受到教师母亲的影…

处理sass-loader安装失败

Vue项目中安装node-sass跟sass-loader 我们在开发中,经常会使用sass语法来编写css,在安装node-sass和sass-loader时,经常会出现错误(通常是依赖冲突)导致安装失败。因为官方发布的版本号并不是连续的,有些版本与版本之…

【ssh_config】SSH中配置多个private key

当要使用多个不同的private key登录不同的主机时,我们可以在ssh命令里面用-i参数指定每次使用的private key文件。 但是这样做比较发麻而且容易出错,我们可以利用~/.ssh/config文件,在让ssh自动为我们决定应该使用哪个key。 基本方法 最简单…

ESRI ArcGIS Desktop 10.8.2图文安装教程及下载

ArcGIS 是由美国著名的地理信息系统公司 Esri 开发的一款地理信息系统软件,它是目前全球最流行的 GIS 软件之一。ArcGIS 提供了图形化用户界面和数据分析工具,可以帮助用户管理、分析和可视化各种空间数据。ArcGIS Desktop是一个完整的桌面GIS软件套件&a…

【软件安装】docker 安装 elasticsearch 和 kibana

首先根据需要选择相应的版本号,然后分别执行下面的脚本 install_elasticsearch.sh docker run -it --name es_710 \-p 9200:9200 \-p 9300:9300 \-e "discovery.typesingle-node" \-e ES_JAVA_OPTS"-Xms5g -Xmx10g" \-e "TAKE_FILE_OWNE…

JVMGC复习

TLAB:默认给每一个线程开辟一块内存空间存放线程自己的对象 Class对象是存放在堆区的,不是方法区,类的元数据元数据并不是类的Class对象,Class对象是加载的最终产品,类的方法代码,变量名,方法名&#xff0c…

【黑马程序员】机器学习

(一)机器学习概述 一、机器学习算法分类 1、监督学习: (1)目标值是类别:分类问题 k-近邻算法、贝叶斯分类、决策树与随机森林、逻辑回归 (2)目标值是连续型的数据:回归…

微信小程序进阶——后台交互

目录 一、后台准备 1.1 pom.xml 1.2 配置数据源 1.3 整合mybatis 二、前后端交互 2.1 method1 2.2 method2 2.2.1 封装request 2.2.2 头部引用util 2.2.3 编写方法 2.2.4 展示效果 三、WXS的使用 3.1 会议状态 3.1.2 引入wxs 3.1.3 修改代码 3.1.4 展示效果 3…

【python】进程和线程

进程和线程 今天我们使用的计算机早已进入多CPU或多核时代,而我们使用的操作系统都是支持“多任务”的操作系统,这使得我们可以同时运行多个程序,也可以将一个程序分解为若干个相对独立的子任务,让多个子任务并发的执行&#xff…

WuThreat身份安全云-TVD每日漏洞情报-2023-10-12

漏洞名称:curl SOCKS5 堆溢出漏洞(CVE-2023-38545) 漏洞级别:高危 漏洞编号:CVE-2023-38545,CNVD-2023-75809 相关涉及:cURL libcurl >7.69.0&#xff0c;<8.3.0 漏洞状态:POC 参考链接:https://tvd.wuthreat.com/#/listDetail?TVD_IDTVD-2023-25382 漏洞名称:Apache H…