vsCode css 格式化工具
由于自己的一丝丝的强迫症,所以在写代码的时候,格式问题总是很在乎,幸好有Ctrl+Alt+F,解决了我大多数格式问题,但是css格式化问题真的是骚扰了我好久,今天下午终于一气之下就安装了个css格式化工具。
我查到了css格式化工具有两个,第一个:Beauty。第二个:CSSComb
由于Beauty安装失败,所以尝试了第二个csscomb,最终成功完成css格式化工具安装。
安装CSSComb步骤如下:
1. 安装插件:
2. 在vscode的文件—>首选项—>设置中加入以下语句:
3. 在src目录下添加名为“.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" ] ]}复制代码
4. 一些参数的相关说明:
"always-semicolon": true, // 在每个样式后面加“;” "block-indent": " ", // 缩进两个空格 "color-case": "lower", "color-shorthand": true, "element-case": "lower", "eof-newline": true, "leading-zero": false, "lines-between-rulesets": 1, // 每组规则后加一个空行 "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,复制代码
转载于:https://juejin.im/post/5c4eb5025188250f743e1b5f
vsCode css 格式化工具相关推荐
- VSCode配置格式化工具(Prettier/Vetur/ESLint)和jsconfig.json
VSCode配置格式化工具(Prettier/Vetur/ESLint) 网上很多配置,有的过时了, 有的很杂, 自己看了下文档,简单配置了以下, 顺便记录下来. 准备 用vue-cli建好项目之后, ...
- vscode css智能补全_在 Webstorm 伤透我的心后,我决定尝试 VS Code
本文主要将介绍如何在 VS Code 中使用插件配置出一个顺手的开发环境 一.前言 1.1 没有什么比 Jetbrains 更强大的 IDE 了 我一直相信着这一点,并且是 WebStorm.PyCh ...
- vscode的格式化工具:eslint 、 prettier、editorconfig 和 vetur
文章目录 eslint--代码检查工具 eslint的作用 eslint的配置 第一步配置IDE的eslint环境 第二步:配置项目中的eslint 下载对应的包 vite集成eslint Eslin ...
- vscode css智能补全_强大的 VS Code入门
简介 在 Build 2015 大会上,微软除了发布了 Microsoft Edge 浏览器和新的 Windows 10 系统外,最大的惊喜莫过于宣布推出免费跨平台的 Visual Studio Co ...
- vscode css提示_锋利码农武器之vscode
俗话说,工欲善其事必先利其器,我们码农的器是什么尼?没错,就是我们亲爱的IDE,前端开发者最爱的编辑器应该是vscode了吧.但是我们要怎么去锋利它尼?不外乎就是熟悉它的使用方法.快捷键以及第三方的插 ...
- vscode css提示_lt;css-doodle/gt;让你成为CSS艺术家
说到css-doodle,那要追回到第五届CSS大会,那是袁川大佬在css大会首秀,属实惊艳. 袁川大佬当时演讲的PPT:https://yuanchuan.dev/talk/generative-a ...
- Danmo 的学习之路(HTML——CSS)
文章目录 meta标签 选择器 RGB.盒子模型.文档流 盒子大小和圆角 浮动 高度塌陷和BFC 定位 字体族 图标字体 字体和文本 背景 渐变 雪碧图 表格 表单 过渡 动画 变形 less 弹性盒 ...
- 前端周刊第58期:送你 3 道面试题
破解前端面试系列文章本周出到第 3 篇:如何搞定纸上编程环节,早些时候发布了闭包篇.DOM 篇,感兴趣的同学可以看看,对面试官和求职者都应该有些参考价值,每篇文章下面的讨论也是值得阅读的,部分读者提出 ...
- React教程(一):React基础
传送门: React教程(二):React组件基础 一.React介绍 React是什么 一个专注于构建用户界面的javascript库,和vue和angular并称前端三大框架,不夸张的说,re ...
最新文章
- 聊聊 Linux 中的五种 IO 模型
- sql sever 中如何查看某个表的索引_查看执行计划:explain的type
- win10 x64+anaconda+labelme标注数据
- cobbler工作流分析
- 绝对干货:供个人开发者赚钱免费使用的一些好的API接口
- Python:检查‘Dictionary‘是否为空似乎不起作用
- qt4.7.0 交叉编译环境搭建经验总结
- HTML与XML数据的结合小总结
- 在Windos上安装Nginx
- 【数字电子技术课程设计】多功能数字电子钟的设计
- modelsim使用第三方编辑器VS code
- iOS 去除字符串中的H5标签
- Python中的变量作用域,LEGB规则和闭包原理
- [cryptoverse ctf 2022] cvctf
- Spine的默认材质Spine/Skeleton有毛边问题
- CEO自测问卷:你是公司的天花板吗?
- (Lightweight multi-scale aggregated residual attention networks for image super-resolution)阅读笔记
- python基础(一)
- PyCharm下载和安装
- 如何用代码设置滚动条的位置?