Atom编辑器折腾记_(10)CSScomb增强版[CSS/LESS/SASS]_html/css

来源：动视网责编：小采时间：2020-11-27 16:06:03

Atom编辑器折腾记_(10)CSScomb增强版[CSS/LESS/SASS]_html/css

Atom编辑器折腾记_(10)CSScomb增强版[CSS/LESS/SASS]_html/css_WEB-ITnose:何为CSScomb 官方网站只有一句描述: Makes your code beautiful(让你的代码更漂亮) 通俗点讲: CSScomb是用来排版CSS代码的…可以说是格式化插件,依赖nodejs 获取CSScomb这不是今天的话题官方网站: CSScomb 支持许多编辑器,比如Sublim

推荐度：

点击下载本文 文档为doc格式

导读Atom编辑器折腾记_(10)CSScomb增强版[CSS/LESS/SASS]_html/css_WEB-ITnose:何为CSScomb 官方网站只有一句描述: Makes your code beautiful(让你的代码更漂亮) 通俗点讲: CSScomb是用来排版CSS代码的…可以说是格式化插件,依赖nodejs 获取CSScomb这不是今天的话题官方网站: CSScomb 支持许多编辑器,比如Sublim

何为CSScomb

官方网站只有一句描述:

Makes your code beautiful(让你的代码更漂亮)

通俗点讲:

CSScomb是用来排版CSS代码的…可以说是格式化插件,依赖nodejs

获取CSScomb?这不是今天的话题

官方网站: CSScomb

支持许多编辑器,比如Sublime/Atom/brackets等

第三方CSScomb?这才是今天的话题

昨天写了篇CSS3的文章…发现代码有点混乱..人力排版有点…….所以跑去atom插件库寻找csscomb

Atom -> settings -> install -> csscomb

我去,,好几个CSScomb插件包….看图(三个蓝色圈圈的功能基本一致,第一个是官方的,,,今天的主角是黄色的)

atom-css-comb

特点

支持格式化CSS/LESS/SASS

支持自定义格式

内置三种排版风格(Yandex/CSScomb/zen)

Yandex的CSS规范..去引擎搜索了下..好像很强大…不过不适合我

CSScomb排版样式

zen(Emmet的前身)

基础使用

默认快捷键有两个 [还可以使用鼠标点击插件调用]

ctrl + alt + c[冲突]

ctrl + alt + shift + c[冲突]

切换排版风格(Ready-made configs),看描述和看图

Packages -> Css comb -> settings

默认快捷键参数

'atom-text-editor': 'ctrl-alt-c':'css-comb:comb'

进阶使用

针对用户群:喜欢折腾,有自己风格的小伙伴,这里只是展示,具体小伙伴自己可以参考官方提供的文档进行定制

看到上面那个common config,选中custom config [Edit config file],
进入到定制参数页面,格式是使用JSON写的.

{ "help": "About options https://github.com/csscomb/csscomb.js/blob/master/doc/options.md", "exclude": ["node_modules/**"], "verbose": true, "always-semicolon": true, "block-indent": " ", "colon-space": ["", " "], "color-case": "lower", "color-shorthand": true, "element-case": "lower", "eof-newline": true, "leading-zero": false, "quotes": "single", "remove-empty-rulesets": true, "rule-indent": " ", "stick-brace": "\n", "strip-spaces": true, "unitless-zero": true, "vendor-prefix-align": true }