atom-beautify怎么缩进css代码?


#1

最近换用atom作为代码编辑器,强大的插件系统和丰富多样的主题,我很喜欢。

在这里想问一个问题
atom-beautify 是否能够换个方式去格式化代码?
比如css它默认是这样的:

.a {
    width: 100%;
    height: 100%;
}

我个人比较喜欢这样的格式:

.a { width: 100%; height: 100%; }

有没有办法可以换成这样? 先谢谢各位了。


#2

花四十分钟查阅资料自己解决了这个问题。

先去 Settings -> Packages -> atom-beautifySettings
找到 CSS 栏打开 然后将 Default Beautifier换成 CSScomb
接着往下拉一点看到 comb custom config file 的一栏
可以引一个 .csscomb.json
然后把 space-after-combinator , space-after-opening-brace , space-before-closing-brace 的项全部改成一个空格即可。


#3

引用的.csscomb.json路径该怎么填写?


#5

无意中找到了引入的方法.
comb custom config file 的一栏里
填入~/.csscomb.json
然后在C:\Users\Administrator 下新建.csscomb.json
{
“always-semicolon”: true,
“block-indent”: " ",
“color-shorthand”: true,
“eof-newline”: false,
“leading-zero”: false,
“quotes”: “single”,
“space-before-colon”: " ",
“space-after-colon”: “”,
“space-before-combinator”: “”,
“space-after-combinator”: “”,
“space-between-declarations”: " ",
“space-before-opening-brace”: “”,
“space-after-opening-brace”: “”,
“space-after-selector-delimiter”: “”,
“space-before-selector-delimiter”: “”,
“space-before-closing-brace”: " ",
“strip-spaces”: true,
“tab-size”: true,
“unitless-zero”: true,
“vendor-prefix-align”: true
}
再CSS文件中格式化就可以缩进成单行css文件.
如果不喜欢这样单行的.也可以去csscomb的官方生成自己的自定义代码格式


#6

这样写成一行太长的话代码颜色不会不起作用吗?貌似一行超高200多个字符就全是灰色


#7

在deepin中引入后,格式化出现ast.remove is not a function的报错.
解决办法:

删除 block-indent": " "

csscomb的issues#501