Question

我得到一个CSS文件：

div#header h1 {
    z-index: 101;
    color: #000;
    position: relative;
    line-height: 24px;
    margin-right: 48px;
    border-bottom: 1px solid #dedede;
    font-size: 18px;
}

div#header h2 {
    z-index: 101;
    color: #000;
    position: relative;
    line-height: 24px;
    margin-right: 48px;
    border-bottom: 1px solid #dedede;
    font-size: 18px;
}

我想在 {...}

之间按字母顺序排列行

div#header h1 {
    border-bottom: 1px solid #dedede;
    color: #000;
    font-size: 18px;
    line-height: 24px;
    margin-right: 48px;
    position: relative;
    z-index: 101;
}

div#header h2 {
    border-bottom: 1px solid #dedede;
    color: #000;
    font-size: 18px;
    line-height: 24px;
    margin-right: 48px;
    position: relative;
    z-index: 101;
}

我映射 F7 来做到这一点

nmap <F7> /{/+1<CR>vi{:sort<CR>

但我需要一遍又一遍地按 F7 才能完成工作。
如果CSS文件很大，那就很耗时了。容易感到无聊。
我希望用管道传输cmds。所以，我只按 F7 一次！任何的想法？谢谢！

Answer 1

:g#\({\n\)\@<=#.,/}/sort

说明：

g        " Work over the whole file running .,/}/sort on each line that matches
         " the pattern \({\n\)\@<=
#...#... " Delimiters: first bit is search pattern, second bit is what
         " to do on each matching line
\(       " Grouping, containing:
  {\n    " Open brace followed by new line
\)       " End of grouping
\@<=     " Negative look-behind, so match after the new-line, but make sure that
         " the match point is preceded by an open brace and a new-line

.,/}/    " From this line to the next closing brace...
sort     " Sort the lines

您当然可以将其映射到键盘快捷键或将其变为命令：

:nmap <F7> :g#\({\n\)\@<=#.,/}/sort<CR>

" Or:

:command! SortCSSBraceContents :g#\({\n\)\@<=#.,/}/sort

然后你可以直接点击 F7 或运行：

:SortCSSBraceContents

Answer 2

nnoremap <S-F7> zRgg:while search("{$", 'W') \| .+1,/}$/-1sort \| endwhile<CR>

这就是它的作用：

zR打开所有折叠。
gg将光标移动到第一行。
search("{$")在行尾搜索左括号并将光标移动到找到的位置。
search(, 'W')阻止search()换行到文件末尾，因此在最后找到的位置后会返回false。
.+1,/}$/-1将范围设置为«从（+1）光标位置（.）之后的一行到结束之前的行（-1）结束括号（/}$/）»。
sort排序，你知道。

Answer 3

对于SCSS样式表：

:g#${\n$\@<=#.,/\.*[{}]\@=/-1 sort

这会查找右手大括号或另一个打开的大括号，并选择它前面的行。

Answer 4

对于Vuejs单个文件组件，内联样式等 - 您需要命令仅在元素内运行：

:/<style>/,/<\/style>/:g#\({\n\)\@<=#.,/}/sort

如何在Vim中按字母顺序排列CSS文件

4 个答案: