Jak uporządkować wcięcia pliku HTML w VI?

132

Jak naprawić wcięcia w jego ogromnych plikach HTML, które były pomieszane?

Wypróbowałem zwykłe "gg=Gpolecenie , którego używam, aby naprawić wcięcia plików kodu. Jednak wydawało się, że nie działa dobrze na plikach HTML. Po prostu usunął całe formatowanie.

Próbowałem też ustawić :filetype = xml, aby zobaczyć, czy oszukanie go w myśleniu, że to plik XML, pomogłoby, ale nadal tego nie robi.

html  vim  vi  indentation 
— mmcdole
źródło

Odpowiedzi:

92

Z filetype indent onwewnątrz mojego .vimrcVim wcięcia html całkiem ładnie.

Prosty przykład z shiftwidth2:

<html>
  <body>
    <p>
    text
    </p>
  </body>
</html>
— moinudin
źródło
15
Skopiuj, wklej kod HTML tej strony z pytaniami do pliku HTML. Otwórz za pomocą VIM, wpisz „set smartindent”, a następnie „gg = G” i nie naprawia to wcięcia pliku.
— mmcdole
16
Mi to pasuje. set ft = html <cr> set si <cr> gg = G <cr>. Dość dobrze formatuje tę stronę.
— Don Reba
5
+1 potwierdził, że „włączenie / wyłączenie wcięcia typu pliku” włącza lub wyłącza magię.
— Wim Coenen
4
Tak, po ustawieniu inteligentnego wcięcia, filetype = html, a i filetype ident zadziałało.
— mmcdole
22
Ze strony chovy.com/web-development/fix-indentation-and-tabs-in-vim stwierdziłem, że muszę ponownie załadować plik: e po włączeniu wcięcia typu pliku.
— Marc Stober
191

Jest kilka rzeczy, które muszą być gotowe. Podsumowując je wszystkie w jednym miejscu:

Ustaw następującą opcję:

:filetype indent on
:set filetype=html           # abbrev -  :set ft=html
:set smartindent             # abbrev -  :set si

Następnie albo przesuń kursor na górę pliku i wykonaj wcięcie do końca: gg =G
Lub wybierz żądany tekst do wcięcia i naciśnij, =aby go wciąć.

— tylerl
źródło
@tyrel, dzięki, ale u mnie nie działa. Oto zawartość pliku: pastebin.com/gagia8W2 . Plik nosi nazwę home.html. Nie mam problemu z wcięciem plików .php. Tutaj masz moje .vimrc: pastebin.com/FAJ0MCA9
— ziiweb
1
Czy istnieje sposób, aby ustawić to w pliku .vimrc? Nie chcę mówić za każdym razem, gdy otwieram plik HTML, że jest to plik HTML. Wielkie dzięki za skrót gg, =, G. Naprawdę przydatne.
— zakishaheen
1
Należy zauważyć, że w vim 7.4domyślnych ustawień wcięcia będzie nie na tym przykładzie, jak html, bodyi pnie są wcięte domyślnie. Zobacz tę odpowiedź .
— Cory Klein
2
smartindentnie jest konieczne. Jest również dostrojony do C i C ++, wolę autoindentzamiast tego używać bardziej ogólnych .
— Kos
Działa świetnie z vim7.4. @tylerl czy jest jakiś sposób, aby ta konfiguracja stała się trwała dla plików HTML w wersji 7.4?
— xaph
65

Głównym problemem związanym z inteligentnym wcięciem jest to, że jeśli XML (lub HTML) znajduje się w jednej linii, ponieważ może w końcu wrócić z żądania curl, to gg=Gnie zadziała. Zamiast tego właśnie doświadczyłem dobrego wcięcia przy użyciu tidy wywołanego bezpośrednio z VI:

:!tidy -mi -xml -wrap 0 %

Zasadniczo mówi to VI, aby wywoływał tidy w celu wyczyszczenia pliku XML bez zawijania wierszy w celu dopasowania ich do domyślnych linii o szerokości 68 znaków. Przetworzyłem duży plik XML o wielkości 29 MB i zajęło to 5 lub 6 sekund. Domyślam się, że dla pliku HTML polecenie powinno wyglądać następująco:

:!tidy -mi -html -wrap 0 %

Jak wspomniano w komentarzach, tidyjest to podstawowe narzędzie, które można znaleźć w wielu podstawowych systemach Linux / MacOS. Oto strona projektu na wypadek, gdybyś chciał, ale nie masz: HTML Tidy .

— oscaroscar
źródło
1
Nie wierzę, że html jest potrzebny, ponieważ domyślnie jest to html
— lsiebert,
4
Uzgodniono z tobą @Isieber. Wydaje mi się jednak, że ułatwia to zrozumienie logiki, a niektórzy mogą nawet uznać je za dobrą praktykę.
— oscaroscar
2
FYI, porządne dławiki, jeśli HTML zawiera SVG (np. Wykresy itp.).
— Alex Quinn
1
Tak, jeśli kod HTML jest w jednej linii, polecenie vim indent nie zadziała!
— wisbucky
Czym jest porządek poza słowem w słowniku? Nie jest to pełna odpowiedź bez powiązania z projektem.
— Bruno Bronosky
49

Jak Tylerl wyjaśnia powyżej, ustaw następujące elementy:

:filetype indent on
:set filetype=html
:set smartindent

Jednak należy pamiętać, że w vim 7.4 znaczniki HTML html, head, body, i niektórzy inni nie wcięty domyślnie. Ma to sens, ponieważ prawie cała zawartość pliku HTML podlega tym znacznikom. Jeśli naprawdę chcesz, możesz ustawić wcięcia tych tagów w następujący sposób:

:let g:html_indent_inctags = "html,body,head,tbody"

Zobacz „ Wcięcia HTML nie działają w skompilowanym Vimie 7.4, jakieś pomysły? ” I „ alternatywny skrypt wcięć HTML ”, aby uzyskać więcej informacji.

— Cory Klein
źródło
to jest zwycięzca w mojej książce! Używanie Vima 7.4 w systemie Windows i działa fantastycznie! : D
— Michael J
12

Oto moje rozwiązanie, które dobrze sprawdza się przy otwieraniu „brzydkiego” HTML-a w ładnie rozmieszczony sposób:

vim fileIn.html -c "set sw=2 | %s/>/>\r/ | execute 'normal gg=G' | set nohlsearch | g/^\\s*\$/d"
  • To swpolecenie jest spowodowane tym, że moja domyślna wartość to 4, co jest zbyt wysokie dla HTML.
  • Następna część dodaje nową linię (Vim myśli, że to powrót karetki, westchnienie) po każdym elemencie ( >).
  • Następnie wprowadź ponownie wcięcie całego pliku za pomocą =.
  • Następnie odznacz >(ponieważ mam set hlsearchw moim vimrc).
  • Następnie usuń wszystkie puste / tylko białe znaki (zobacz " Vim usuwa puste linie ", aby uzyskać więcej informacji, również jest to znak podwójnego znaku ucieczki, ponieważ znajduje się w powłoce).

Możesz nawet dodać | wq! fileOut.htmlna końcu, jeśli w ogóle nie chcesz wchodzić do Vima, ale po prostu wyczyść plik.

— adam_0
źródło
Zgrabne rozwiązanie! Zmodyfikowałem go na :%s/>\s*/>\r/g(dodałem a gdla globalnego zastąpienia i \s*aby usunąć końcowe białe znaki). Dodałem również, :%s/</\r</gaby dodać nową linię przed otwartym nawiasem. W przeciwnym razie tagi like <td>foo</td>zostaną podzielone jak <td>i foo</td>.
— wisbucky
Słuszna uwaga, mam domyślnie włączoną funkcję globalnej zamiany, dlatego nie ma jej w moim rozwiązaniu.
— adam_0
7

Używam tego skryptu: https://github.com/maksimr/vim-jsbeautify

W powyższym linku masz wszystkie informacje:

  1. zainstalować
  2. Skonfiguruj (skopiuj z pierwszego przykładu)
  3. Biegać :call HtmlBeautify()

Wykonuje swoją pracę pięknie!

— SimonW
źródło
3
haha, dlaczego miałbyś chcieć używać node + js do czyszczenia html w vimie, który ma tę możliwość wbudowaną dłużej niż w ogóle node istnieje ... zadziwia mój umysł ..
— mb21
4

Czy próbowałeś użyć skryptu wcięć HTML na stronie Vim?

— JaredPar
źródło
+1, tego nie widziałem. Byłoby miło, gdybym nie musiał uruchamiać skryptu, ale wygląda na to, że może to być jedyny sposób.
— mmcdole
Ten skrypt jest teraz przestarzały, a nowsza wersja zawiera vim (np /usr/share/vim/vim74/indent/html.vim.). „4 lipca 2014 r .: Vim 7.4.356 lub nowszy zawiera potomka tego skryptu (oficjalny skrypt jest teraz obsługiwany przez Brama i zawiera ogromne zmiany)”
— wisbucky
4

Oto ciężkie rozwiązanie, które umożliwia tworzenie wcięć, a także wszystkie ładne wydruki HTML, o które niekoniecznie chcesz się przejmować podczas edycji.

Najpierw pobierz Tidy . Upewnij się, że dodałeś plik binarny do swojej ścieżki, abyś mógł wywoływać go z dowolnego miejsca.

Następnie utwórz plik konfiguracyjny opisujący Twój ulubiony smak HTML. Dokumentacja nie jest świetna dla Tidy, ale oto przegląd i lista wszystkich opcji . Oto mój plik konfiguracyjny:

bare: yes
break-before-br: no
clean: yes
drop-proprietary-attributes: yes
fix-uri: yes
indent-spaces: 4
indent: yes
logical-emphasis: yes
markup: yes
output-xhtml: yes
quiet: yes
quote-marks: yes
replace-color: yes
tab-size: 4
uppercase-tags: no
vertical-space: yes
word-2000: yes
wrap: 0

Zapisz to tidyrc_html.txtw swoim ftpluginfolderze (w vimfiles).

Jeszcze jeden plik: dodaj następujący wiersz do (lub utwórz) html.vim, również w ftplugin:

map <leader>tidy :%! tidy -config ~/vimfiles/ftplugin/tidyrc_html.txt <CR>

Aby z niego skorzystać, po prostu otwórz plik HTML i wpisz /tidy. (To /jest <leader>klucz.)

Proszę bardzo! W żadnym wypadku nie jest to szybkie rozwiązanie, ale teraz jesteś trochę lepiej przygotowany do edycji tych ogromnych, popsutych plików HTML.

— Lemur
źródło
2

Żadna z odpowiedzi nie działała dla mnie, ponieważ cały mój kod HTML znajdował się w jednej linii.

Zasadniczo musisz najpierw podzielić każdy wiersz za pomocą następującego polecenia, które zastępuje ><te same znaki, ale z podziałem wiersza pośrodku.

:%s/></>\r</g

Potem polecenie

gg=G

spowoduje wcięcie pliku.

— Thomas G.
źródło
0

Wypróbowałem zwykłe polecenie „gg = G”, którego używam do naprawiania wcięć w plikach kodu. Jednak wyglądało na to, że nie działa poprawnie na plikach HTML. Po prostu usunął całe formatowanie.

Jeśli autoformatowanie / wcięcie vima gg=Gwydaje się być "zepsute" (np. Wcięcie po lewej stronie każdej linii), najprawdopodobniej wtyczka indent nie jest włączona / załadowana. Powinien naprawdę dać komunikat o błędzie zamiast po prostu robić złe wcięcia, w przeciwnym razie użytkownicy po prostu uważają, że funkcja autoformatowania / wcięć jest okropna, podczas gdy w rzeczywistości jest całkiem dobra.

Aby sprawdzić, czy wtyczka indent jest włączona / załadowana, uruchom :scriptnames. Sprawdź, czy .../indent/html.vimjest na liście. Jeśli nie, oznacza to, że wtyczka nie została załadowana. W takim przypadku dodaj tę linię do ~/.vimrc:

filetype plugin indent on

Teraz, jeśli otworzysz plik i uruchomisz :scriptnames, powinieneś zobaczyć .../indent/html.vim. Następnie uruchom gg=G, co powinno teraz wykonać poprawne autoformatowanie / wcięcie. (Chociaż nie doda nowych linii, więc jeśli cały kod html znajduje się w jednym wierszu, nie będzie wcięty).

Uwaga: jeśli :filetype plugin indent onzamiast tego korzystasz z wiersza poleceń vim ~/.vimrc, musisz ponownie otworzyć plik :e.

Nie musisz się też martwić o ustawienia autoindenti smartindentustawienia, nie są one do tego istotne.

— wisbucky
źródło
Korzystając z naszej strony potwierdzasz, że przeczytałeś(-aś) i rozumiesz nasze zasady używania plików cookie i zasady ochrony prywatności.
Licensed under cc by-sa 3.0 with attribution required.