Vim：将一行CSS格式转换为多行

Question

我有一些CSS代码是这个格式：

a { color: #333; background-color: #fff; } 
a:visited { color: #aaa; background-color: #555; } 

我希望以这种格式获取它：

a { 
    color: #333; 
    background-color: #fff; 
} 
a:visited {
    color: #aaa; 
    background-color: #555; 
} 

有没有简单的方法可以做到这一点？我知道我可以写一个宏来完成，但我希望能有一个更好/更容易的解决方案。理想情况下，我希望能够选择这些行并执行类似于gq的操作。

- Jonathan

---

这看起来像是一个重复的问题，链接为https://dev59.com/0H3aa4cB1Zd3GeqPa0Vj。实际上，@Kent在这里的答案和我在那里的答案非常相似。 - benjifisher

可能还想看一下 https://dev59.com/VXM_5IYBdhLWcg3wUxjF 这个问题的解答，它提供了有用的解决方案。我甚至从中编写了一个小折叠脚本：https://gist.github.com/PeterRincker/9977119 - Peter Rincker

Answer 1

如果文件类型已经被设置为 CSS，您可以尝试：

:%s/[{;}]/&\r/g|norm! =gg

至少它对你的示例起作用：

- Kent

---

我喜欢这个！！（可能比我的答案更喜欢）- 不过，用我的vi只能得到每个块缩进的最后一个属性 :-( - YFP

正则表达式万能公式。 - Etheryte

我会以相同的方式处理，只是我会使用两行分别进行操作。Vim内部的重新格式化仅更改缩进，不会添加或删除换行符。因此，首先使用:s来断开行，然后使用gg=G或等效命令。如果您想要比正则表达式更可靠的东西，请像Ingo Karkat的答案中那样使用外部程序。 - benjifisher

太棒了。你能告诉我s/[{;}]/&\r/g是什么意思吗？我知道这是一种正则表达式替换，但我对[{;}]感到困惑。 - Jonathan

它会在每个“{”、“;”或“}”后面添加一个新行。@Jono - Kent

Answer 2

您可以使用 cssbeautify 工具来美化CSS代码：

:%! css-beautify --file -

- Ingo Karkat

---

如果你喜欢 css-beautify 的结果，那么你可以使用它来代替 vim 自带的重新格式化功能。例如：:set equalprg=css-beautify（未经测试）。请参阅 :help 'equalprg'。 - benjifisher

Answer 3

我已经为这个问题工作了一段时间。但在我的情况下，我想按行重新格式化单行CSS文件，受肯特的答案启发，我终于得到了这个：

1. 使用可视模式选择要重新格式化的一行或几行
2. 输入'<,'>s/[{;}]/&\r/g|norm! v'<=

当你完成重新格式化的CSS块后，在可视模式中只选择一个CSS块并按J（大写J），然后它就变成了一个漂亮的单行。

PS. 抱歉我的英语不好

- wowo878787

Answer 4

这不是最终答案，但可能会帮助您朝着正确的方向前进。我使用很多vim文件来检查我的代码（不同的语言），我发现通过插件，我可以将代码复制到其中，并在飞行中进行良好的格式化（例如，在进行Python时使用PEP-8）。 希望这对您有所帮助：http://www.vim.org/scripts/script.php?script_id=2981

TotalOpinion - （抱歉！） - 恭喜您选择了所有编辑器之王！

- YFP

---

国王需要一位皇后... :) - Kent

Answer 5

肯特的回复在处理像this这样更复杂的文件时效果不佳：（W3C参考CSS）

我用了一个不同的方法：

1. 把长的一行分成每行一个规则：

%s/\(.\{-}{.\{-}}\)/\r\1/gc

重新格式化：第一步。对于每个规则，将所有属性放在同一行中：

%s/\(.\{-}{\)\(.\{-}\)\(}\)/\1\r\t\2\r\3\r/gc

重新格式化：第二步。每行拆分一个属性：

%s/;/;\r\t/gc

也许你可以用更少的步骤完成，但这个方法也很好用。

- Antonio