vscode格式化css文件，css文件排版
2024-06-09 21:11:47
vscode格式化css文件
1.安装css格式化工具
2.在根目录下添加“.csscomb.json”文件，代码如下:
{ "exclude": [ ".git/**", "node_modules/**", "bower_components/**" ], "always-semicolon": true, "block-indent": " ", "color-case": "lower", "color-shorthand": true, "element-case": "lower", "eof-newline": true, "leading-zero": false, "quotes": "single", "remove-empty-rulesets": true, "space-after-colon": " ", "space-after-combinator": " ", "space-after-opening-brace": "\n", "space-after-selector-delimiter": "\n", "space-before-closing-brace": "\n", "space-before-colon": "", "space-before-combinator": " ", "space-before-opening-brace": " ", "space-before-selector-delimiter": "", "space-between-declarations": "\n", "strip-spaces": true, "unitless-zero": true, "vendor-prefix-align": true, "sort-order": [ [ "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" ], [ "position", "z-index", "top", "right", "bottom", "left" ], [ "display", "visibility", "float", "clear", "overflow", "overflow-x", "overflow-y", "-ms-overflow-x", "-ms-overflow-y", "clip", "zoom", "-webkit-align-content", "-ms-flex-line-pack", "align-content", "-webkit-box-align", "-moz-box-align", "-webkit-align-items", "align-items", "-ms-flex-align", "-webkit-align-self", "-ms-flex-item-align", "-ms-grid-row-align", "align-self", "-webkit-box-flex", "-webkit-flex", "-moz-box-flex", "-ms-flex", "flex", "-webkit-flex-flow", "-ms-flex-flow", "flex-flow", "-webkit-flex-basis", "-ms-flex-preferred-size", "flex-basis", "-webkit-box-orient", "-webkit-box-direction", "-webkit-flex-direction", "-moz-box-orient", "-moz-box-direction", "-ms-flex-direction", "flex-direction", "-webkit-flex-grow", "-ms-flex-positive", "flex-grow", "-webkit-flex-shrink", "-ms-flex-negative", "flex-shrink", "-webkit-flex-wrap", "-ms-flex-wrap", "flex-wrap", "-webkit-box-pack", "-moz-box-pack", "-ms-flex-pack", "-webkit-justify-content", "justify-content", "-webkit-box-ordinal-group", "-webkit-order", "-moz-box-ordinal-group", "-ms-flex-order", "order" ], [ "-webkit-box-sizing", "-moz-box-sizing", "box-sizing", "width", "min-width", "max-width", "height", "min-height", "max-height", "margin", "margin-top", "margin-right", "margin-bottom", "margin-left", "padding", "padding-top", "padding-right", "padding-bottom", "padding-left" ], [ "table-layout", "empty-cells", "caption-side", "border-spacing", "border-collapse", "list-style", "list-style-position", "list-style-type", "list-style-image" ], [ "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", "-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", "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", "text-overflow", "-ms-text-overflow", "text-overflow-ellipsis", "text-overflow-mode", "-ms-word-wrap", "word-wrap", "word-break", "-ms-word-break", "-moz-tab-size", "-o-tab-size", "tab-size", "-webkit-hyphens", "-moz-hyphens", "hyphens", "pointer-events" ], [ "opacity", "filter:progid:DXImageTransform.Microsoft.Alpha(Opacity", "-ms-filter:\\'progid:DXImageTransform.Microsoft.Alpha", "-ms-interpolation-mode", "color", "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", "outline", "outline-width", "outline-style", "outline-color", "outline-offset", "background", "filter:progid:DXImageTransform.Microsoft.AlphaImageLoader", "background-color", "background-image", "background-repeat", "background-attachment", "background-position", "background-position-x", "-ms-background-position-x", "background-position-y", "-ms-background-position-y", "-webkit-background-clip", "-moz-background-clip", "background-clip", "background-origin", "-webkit-background-size", "-moz-background-size", "-o-background-size", "background-size", "box-decoration-break", "-webkit-box-shadow", "-moz-box-shadow", "box-shadow", "filter:progid:DXImageTransform.Microsoft.gradient", "-ms-filter:\\'progid:DXImageTransform.Microsoft.gradient", "text-shadow" ] ]}
3,打开一个css文件，点击F1(Fn键+f1)，输入“CSScode:Format …”选中即可
vscode格式化css文件，css文件排版相关推荐
- vsvue文件css提示插件,VSCode 开发Vue必备插件
VSCode 开发Vue必备插件 对于很多使用vscode编写vue项目的新手同学来说,可能不知道使用什么插件,这里简单说一下我常用的几款插件. 1. vetur 实现在 vue 文件中: 语法错误检 ...
- vscode格式化proto文件
目录 安装vscode-proto3插件 安装clang-format 可执行程序 格式化代码 另一种格式化方式 安装vscode-proto3插件 在应用商店中安装vscode-proto3插件 安 ...
- 解决修改css或js文件，浏览器缓存更新问题。
解决修改css或js文件,浏览器缓存更新问题. 参考文章: (1)解决修改css或js文件,浏览器缓存更新问题. (2)https://www.cnblogs.com/zhangycun/p/7427 ...
- 解决vscode格式化vue文件出现的问题
解决vscode格式化vue文件出现的问题 参考文章: (1)解决vscode格式化vue文件出现的问题 (2)https://www.cnblogs.com/weiqinl/p/8871826.ht ...
- 6. 管理你的css和js文件 - 从零开始学Laravel
从零开始学laravel教程目录 在Laravel中我们可以直接将css和js文件放在app/public目录下,不过在正式项目开发中我们可能会使用Sass, Less, Stylus,Browser ...
- java 读取css文件_java文件读取的两种方式
JAVA中读取文件(二进制,字符)内容的几种方 JAVA中读取文件内容的方法有很多,比如按字节读取文件内容,按字符读取文件内容,按行读取文件内容,随机读取文件内容等方法,本文就以上方法的具体实现给出代 ...
- gulp实现打包js/css/img/html文件，并对js/css/img文件加上版本号
参考打包教程: http://www.cnblogs.com/tugenhua0707/p/4069769.html http://www.cnblogs.com/tugenhua0707/p/498 ...
- css初始化样式文件_前端必备技能 webpack 4. webpack处理CSS资源
每篇文章纯属个人经验观点,如有错误疏漏欢迎指正 因为 webpack 本身只具有识别 JS 的能力,所以涉及到其他资源,需要我们通过 loader 来进行特殊处理,针对不同的样式资源,需要以下几个 ...
- django模板导入js，css等外部文件
html模板里面使用了css,但是直接引用不能,搜了一些资料终于搞定,这里记录以下. 首先是我文件的tree: mysite: -myapp: --admin.py, models.py, _init ...
- asp.net使用httphandler打包多CSS或JS文件以加快页面加载速度
介绍 使用许多小得JS.CSS文件代替一个庞大的JS或CSS文件来让代码获得更好的可维护性,这是一个很好的实践.但这样做反过来却损失了网站的性能.虽然你应该将你的Javascript代码写在小文件中并 ...
最新文章
- iOS - 数据持久化之 FMDB 的使用
- 你应该知道的缓存进化史
- Akka Notes –演员记录和测试
- java socket 线程池_java socket编程的一个例子（线程池）
- （转） Hibernate注解开发
- Linux下coredump调试2：实例
- 大学计算机相关理论,大学计算机理论基础 大学计算机基础理论题.doc
- 计算机的组成 —— usb 篇
- 移动Web界面样式-CSS3
- html文件导入奥维,【干货】奥维地图 | 如何导入高程数据
- 领域驱动设计核心概念
- 【毕业季】总结过去，展望未来
- 海康摄像机3D PTZ功能,拍照功能
- 数字逻辑第三章（集成门与触发器）
- Android运用手机多媒体
- Mysql数据库存储ip地址
- C65升级与补丁 V25－＞V43DIY全程
- 安卓Android活动社交仿QQ聊天app设计
- 自制免安装版JDK(zip)
- mysql注入天书（一）Basic Challenges