Làm thế nào để alphabetize một file CSS trong Vim

Question

tôi nhận được một tập tin 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; 
} 

Tôi muốn alphabetize ranh giới giữa các {...}

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; 
} 

Tôi map F7 để làm điều đó

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

Nhưng tôi cần phải bấm F7 hết lần này đến lần khác để hoàn thành công việc.
Nếu tệp CSS lớn, tốn thời gian & dễ bị chán.
Tôi muốn lấy các đường dẫn cmd. Vì vậy, tôi chỉ nhấn F7 một lần!
Bất kỳ ý tưởng nào? cảm ơn!

Answer 1

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

Giải thích:

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 

Bạn có thể tất nhiên bản đồ này cho một phím tắt hoặc làm cho nó thành một lệnh:

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

" Or: 

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

Sau đó, bạn chỉ cần nhấn F7 hoặc chạy:

:SortCSSBraceContents 

Answer 2

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

Đây là những gì nó làm:

1. zR mở tất cả các nếp gấp.
2. gg di chuyển con trỏ đến dòng đầu tiên.
3. search("{$") tìm kiếm dấu ngoặc mở ở cuối dòng và di chuyển con trỏ đến vị trí tìm thấy.
4. search(, 'W') ngăn chặn search() từ gói vào cuối tệp, vì vậy nó sẽ trả về false sau vị trí tìm thấy cuối cùng.
5. .+1,/}$/-1 bộ phạm vi để «từ ​​một dòng sau khi vị trí (+1) con trỏ (.) vào dòng trước (-1) nẹp kết thúc vào cuối dòng (/}$/)».
6. sort các loại, bạn biết điều đó.

Answer 3

Đối với stylesheets SCSS:

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

này tìm kiếm hoặc là một cú đúp xoăn đóng hay cách khác cú đúp xoăn mở và chọn dòng trước nó.

Answer 4

Đối Vuejs thành phần tập tin duy nhất, phong cách nội tuyến, vv - nơi bạn cần lệnh để chạy chỉ trong vòng yếu tố:

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