Jak sformatować kod HTML za pomocą Sublime Text 2?

Mam trochę źle sformatowany kod HTML, który chciałbym sformatować. Czy istnieje polecenie, które automatycznie sformatuje kod HTML w Sublime Text 2, aby wyglądał lepiej i był łatwiejszy do odczytania?

Nie potrzebujesz do tego żadnych wtyczek. Wystarczy wybrać wszystkie linie ( Ctrl A), a następnie z menu wybierz Edycja → Linia → Reindent. Działa to, jeśli plik jest zapisany z rozszerzeniem zawierającym HTML, takim jak .htmllub .php.

Jeśli robisz to często, przydatne może być mapowanie klawiszy:

{ "keys": ["ctrl+shift+r"], "command": "reindent" , "args": { "single_line": false } }

Jeśli plik nie został zapisany (np. Właśnie wkleiłeś fragment kodu do nowego okna), możesz ręcznie ustawić język wcięcia, wybierając menu Widok → Składnia → language of choiceprzed wybraniem opcji reindent.

Istnieje pół tuzina sposobów formatowania HTML w Sublime. Przetestowałem każdą z najpopularniejszych wtyczek (szczegółowe informacje na ten temat napisałem na blogu ), ale oto krótki przegląd niektórych z najpopularniejszych opcji:

Reindent Command

Plusy:

• Wysyłany z Sublime, więc instalacja wtyczki nie jest wymagana

Cons:

• Nie usuwa dodatkowych pustych linii
• Nie obsługuje zminimalizowanych wierszy HTML z wieloma otwartymi tagami
• Nie formatuje poprawnie <script>bloków

Etykietka

Plusy:

• Obsługuje ST2 / ST3
• Usuwa dodatkowe puste linie
• Brak zależności binarnych

Cons:

• Dławiki na tagach PHP
• Nie obsługuje <script>poprawnie bloków

HTMLTidy

Plusy:

• Obsługuje tagi PHP
• Niektóre ustawienia poprawiania formatowania

Cons:

• Wymaga PHP (wraca do serwisu internetowego)
• Tylko ST2
• Opuszczony?

HTMLBeautify

Plusy:

• Obsługuje ST2 / ST3
• Proste i bez zależności binaray
• Wsparcie dla OS X, Win i Linux

Cons:

• Dusi się trochę komentarzami
• Rozwija zminimalizowany / skompresowany kod

HTML-CSS-JS Prettify

Plusy:

• Obsługuje ST2 / ST3
• Obsługuje HTML, CSS, JS
• Świetna integracja z menu Sublime
• Wysoce konfigurowalny
• Ustawienia poszczególnych projektów
• Formatuj przy opcji zapisu

Cons:

• Wymaga Node.js
• Nie nadaje się do osadzonego PHP

Który jest najlepszy

HTML-CSS-JS Prettify jest zwycięzcą w mojej książce. Wiele wspaniałych funkcji, na które nie można narzekać.

Jedyny pakiet, jaki udało mi się znaleźć, to Tag .

Możesz go zainstalować za pomocą kontrolki pakietu. https://sublime.wbond.net

Po zainstalowaniu kontroli pakietu. Przejdź do kontroli pakietów ( Preferencje -> Kontrola pakietów ), a następnie wpisz install, naciśnij enter. Następnie wpisz tagi naciśnij enter.

Po zainstalowaniu Tag podświetl tekst i naciśnij skrót Ctrl+ Alt+ F.

Polecam tę wtyczkę: HTML / CSS / JS Prettify , to naprawdę działa.

Po instalacji wybierz kod i naciśnij Ctrl+Shift+H.

Gotowy!

Po prostu ogólna wskazówka. Aby automatycznie uporządkować kod HTML, zainstalowałem pakiet HTML_Tidy, a następnie dodałem następujące przypisanie klawiszy do ustawień domyślnych (których używam):

{ "keys": ["enter"], "command": "html_tidy" },

to uruchamia HTML Tidy przy każdym wejściu. Mogą to mieć wady, jestem całkiem nowy w Sublime, ale wydaje się, że robię to, co chcę :)

Chociaż pytanie dotyczy HTML, chciałbym dodatkowo podać informacje o tym, jak automatycznie sformatować kod JavaScript dla Sublime Text 2 ;

Możesz wybrać cały swój kod ( ctrl+ A) i użyć funkcji w aplikacji, reindent ( Edit-> Line-> Reindent) lub możesz użyć wtyczki formatującej JsFormat, Sublime Text 2jeśli chcesz mieć więcej ustawień, które można dostosować do formatowania kodu domyślne ustawienia zakładki / wcięcia tekstu Sublime Text.

https://github.com/jdc0589/JsFormat

Możesz łatwo zainstalować JsFormat za pomocą Kontroli pakietu ( Preferences-> Package Control) Otwórz Kontrolę pakietu, a następnie wpisz install, hitenter . Następnie wpisz js formati naciśnij enter, gotowe. (Kontroler pakietu pokaże status instalacji z powodzeniem i błędami w lewym dolnym pasku Sublime)

Dodaj następujący wiersz do przypisań klawiszy ( Preferences-> Key Bindings User)

{ "keys": ["ctrl+alt+2"], "command": "js_format"}

Używam ctrl+ alt+ 2, możesz zmienić ten klawisz skrótu, co chcesz. Jak dotąd JsFormatjest to dobra wtyczka, warto ją wypróbować!

Mam nadzieję, że to komuś pomoże.

Istnieje wtyczka o nazwie SublimeHtmlTidy, która działa całkiem dobrze

https://github.com/welovewordpress/SublimeHtmlTidy

Dla mnie HTML Prettifyrozwiązanie było niezwykle proste. Poszedłem na stronę HTML Prettify .

1. Potrzebowałem Sublime Package Manager
2. Postępowano zgodnie z instrukcjami dotyczącymi instalowania menedżera pakietów tutaj
3. wpisany, cmd + shift + paby wyświetlić menu
4. Wpisany prettify
5. Wybierz HTML prettifyopcję z menu

Bum. Gotowy. Wygląda świetnie

Po prostu idź do

Edytuj -> Tag -> Auto-formatuj tagi na dokumencie

Stworzyłem pakiet o nazwie HTMLBeautify , który porządnie formatuje HTML. Oparłem go na skrypcie Perla, który znalazłem w 1997 r. - zaktualizowałem go, aby działał ze wszystkimi nowymi wymyślnymi nowoczesnymi tagami. :)

Sprawdź to i daj mi znać, co myślisz!

https://github.com/rareyman/HTMLBeautify

Myślę, że tego właśnie szukasz:

https://github.com/victorporof/Sublime-HTMLPrettify

Jestem jeszcze mieć przywilej aby skomentować więc jest to po prostu dodatkowe informacje związane @ Piotra odpowiedź powyższej odpowiedzi.

Odkryłem, że HTML nie jest wyrównany zgodnie z oczekiwaniami, jeśli komentarze warunkowe IE w nagłówku nie są całkowicie zgodne, np. Przesunięcie w lewo:

<!--[if lt IE 7]>
<p class='chromeframe'>Your browser is <em>unsupported</em>. <a href="http://browsehappy.com/">Upgrade to a different browser</a> or <a href="http://www.google.com/chromeframe/?redirect=true">install Google Chrome Frame</a> to experience this site.</p>
<![endif]-->
<!-- Le HTML5 shim, for IE6-8 support of HTML elements -->
<!--[if lt IE 9]>
<script src="http://html5shim.googlecode.com/svn/trunk/html5.js"></script>
<![endif]--> 

Jest ładna wtyczka CodeFormatter o otwartym kodzie źródłowym , która (wraz z reindentowaniem) może upiększyć brudny kod, nawet jeśli wszystko jest w jednej linii.

Korzystam z tidy wraz z niestandardowym systemem kompilacji, aby upiększać HTML.

Mam HTMLTidy.sublime-build w moim katalogu Packages / User /:

{
  "cmd": ["tidy", "-config", "$packages/User/tidy_config.cfg", "$file"]
}

i plik tidy_config.cfg w tym samym katalogu:

indent: auto
tab-size: 4
show-warnings: no
write-back: yes
quiet: yes
indent-cdata: yes
tidy-mark: no
wrap: 0

I po prostu wybierz system kompilacji i naciśnij ctrl+ blub cmd+, baby ponownie sformatować zawartość pliku. Jednym drobnym problemem jest to, że ST2 nie automatycznie ponownie ładuje pliku, więc aby zobaczyć wyniki, musisz przełączyć się na inny plik i cofnąć (lub inną aplikację i cofnąć).

Na Macu użyłem Macports do zainstalowania Tidy, w Windows musisz go pobrać sam i określić katalog roboczy w systemie kompilacji, w którym znajduje się Tidy:

"working_dir": "c:\\HTMLTidy\\"

lub dodaj go do ŚCIEŻKI.

możesz ustawić klawisz skrótu F12łatwo !!!

{ "keys": ["f12"], "command": "reindent" , "args": { "single_line": false } }

zobacz szczegóły tutaj .