2010-06-16 6 views
19

ich eine CSS-Datei:Wie eine CSS-Datei in Vim alphabetize

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

Ich möchte Alphabetisieren Linien zwischen dem {...}

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

I Karte F7 es zu tun

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

Aber ich muss F7 immer und immer wieder drücken, um die Arbeit zu erledigen.
Wenn die CSS-Datei groß ist, ist es zeitraubend & leicht gelangweilt.
Ich möchte die cmds Piped bekommen. Also, ich drücke nur F7 einmal!
Irgendeine Idee? Vielen Dank!

+0

Wie ist das genau off topic, näher? –

+0

es ist wirklich nett, dass dies möglich ist, aber das hat das Potenzial, viele neue CSS-bezogene Fehler mit Attributen zu verursachen, die in einer bestimmten Reihenfolge definiert wurden – travis

Antwort

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

Erläuterung:

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 

Sie können natürlich auf Karte auf eine Tastenkombination oder machen es zu einem Befehl: hit

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

" Or: 

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

Dann können Sie einfach F7 oder Lauf:

:SortCSSBraceContents 
+3

puh! Das ist cool!! –

+0

Der einzige Haken ist, dass, wenn ich dies in einem sagen, eine HTML-Datei mit CSS und Javascript, es auch versucht, alle meine JS-Objekte zu sortieren. –

+1

Irgendwelche Ideen dazu, wie man diese -Webkit- und -moz-Werte in der Nähe, aber immer vor ihren browserübergreifenden Gegenstücken sortiert? Ich benutze die "sort {pattern}" - Funktion, um die - * - Sachen beim Sortieren zu ignorieren, aber bestelle nicht das -moz/-webkit/(real) wie ich es vorziehen würde: sort/\ s * \ (- \ a * - \\ | \) / –

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

Das ist, was es tut:

  1. zR öffnet alle Falten.
  2. gg verschiebt den Cursor in die erste Zeile.
  3. search("{$") sucht nach der öffnenden Klammer am Ende der Zeile und bewegt den Cursor zur gefundenen Position.
  4. search(, 'W') verhindert, dass search() vom Ende der Datei umbrochen wird, so dass nach der letzten gefundenen Position false zurückgegeben wird.
  5. .+1,/}$/-1 setzt den Bereich «von einer Zeile nach dem (+1) Cursor-Position (.) mit der Leitung vor (-1) die schließende Klammer am Ende der Leitung (/}$/)» auf.
  6. sort Sorten, Sie kennen es.
1

Für SCSS Sheets:

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

Das sieht entweder für eine schließende geschweifte Klammer oder eine andere geöffnete geschweiften Klammer und wählt die Linie, bevor es.

0

Für Vuejs einzelne Datei Komponenten, Inline-Stil, usw. - wo Sie den Befehl benötigen nur innerhalb Element auszuführen:

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