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

Istnieje pół tuzina sposobów formatowania HTML w Sublime. Przetestowałem każdą z najpopularniejszych wtyczek( Zobacz writeup, który zrobiłem na moim blogu , Aby uzyskać szczegółowe informacje), ale oto szybki przegląd niektórych z najpopularniejszych opcji:

Komenda Reindent

Plusy:

• statki z Sublime, więc nie wymaga instalacji wtyczki

Wady:

• nie usuwa dodatkowych pustych linii
• nie radzi sobie z minifikowanym HTML, liniami z wieloma otwartymi tagi
• nie formatuje poprawnie <script> bloków

Tag

Plusy:

• obsługuje ST2/ST3
• usuwa dodatkowe puste linie
• brak zależności binarnych

Wady:

• Dławiki na znacznikach PHP
• nie obsługuje <script> bloków poprawnie

HTMLTidy

Plusy:

• obsługuje znaczniki PHP
• kilka ustawień do poprawienia formatowanie

Wady:

• wymaga PHP (wraca do serwisu www)
• tylko ST2
• porzucony?

HTMLBeautify

Plusy:

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

Wady:

• dławi się trochę komentarzami inline
• Czy rozszerza zminimalizowany / skompresowany kod

HTML-CSS-JS Prettify

Plusy:

• obsługuje ST2/ST3
• obsługuje HTML, CSS, JS
• świetna integracja z menu Sublime
• wysoce konfigurowalny
• Per-ustawienia projektu
• Format przy opcji zapisu

Wady:

• Wymaga Node.js
• Not great for embedded PHP

Który jest najlepszy?

HTML-CSS-JS Wiele świetnych funkcji, nie ma co narzekać około.

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

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

Po zainstalowaniu kontroli pakietu. Przejdź do package control (Preferences -> Kontrola pakietu) następnie wpisz install, naciśnij wprowadź. Następnie wpisz tag i naciśnij wprowadź .

Po zainstalowaniu tagu zaznacz tekst i naciśnij skrót Ctrl+Alt+F .

Polecam ten plugin: HTML / CSS / JS, naprawdę działa.

Po instalacji wystarczy wybrać kod i nacisnąć Ctrl+Shift + H .

Zrobione!

To tylko ogólna wskazówka. To, co zrobiłem, aby automatycznie uporządkować mój HTML, to zainstalowanie pakietu HTML_Tidy, a następnie dodanie następującego przypisania klawiszy do domyślnych ustawień (których używam):

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

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

Oprócz tego, że pytanie dotyczy HTML, chciałbym również podać informacje o tym, jak automatycznie formatować kod Javascript dla wysublimowanego tekstu 2;

Możesz wybrać cały kod (ctrl + a ) i korzystać z funkcjonalności in-app,(Edit -> Line -> Reindent) możesz też użyć wtyczki formatowania JsFormat dla Sublime Text 2 , Jeśli chcesz mieć bardziej konfigurowalne ustawienia dotyczące formatowania kodu, aby dodać do domyślnej karty / wcięcia Sublime Text ustawienia.

Https://github.com/jdc0589/JsFormat

Możesz łatwo zainstalować JsFormat za pomocą kontrolki pakietów(Preferences -> Package Control) Otwórz kontrolkę pakietu, następnie wpisz install, naciśnij enter. Następnie wpisz js format i naciśnij enter i gotowe. (Kontroler pakietu wyświetli stan instalacji z sukcesem i błędami na lewym dolnym pasku Sublime)

Dodaj następujący wiersz do swoich kluczy (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 na razie {[11] } jest dobrym pluginem, warto go wypróbować!

Jest plugin o nazwie SublimeHtmlTidy, który działa całkiem dobrze

Https://github.com/welovewordpress/SublimeHtmlTidy

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

1. potrzebne Sublime Package Manager
2. postępowano zgodnie z instrukcjami instalacji menedżera pakietów tutaj
3. wpisz cmd + shift + p aby wywołać menu
4. Typed prettify
5. Wybierz HTML prettify Wybór w menu

Po prostu przejdź do

Edit - > Tag - > Autoformatowanie znaczników na dokumencie

Stworzyłem Pakiet HTMLBeautify , który porządnie formatuje HTML. Oparłem go na skrypcie Perla, który znalazłem w 1997 roku-zaktualizowałem go do pracy ze wszystkimi nowymi fangled modern tagami. :)

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

Https://github.com/rareyman/HTMLBeautify

Nie mam jeszcze uprawnień do komentowania, więc jest to po prostu dodatkowa informacja związana z odpowiedzią @peter powyżej.

Znalazłem HTML nie wyrównuje się zgodnie z oczekiwaniami, jeśli IE komentarze warunkowe w nagłówku nie były całkowicie w linii np. flush 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]--> 

Istnieje fajna wtyczka open source CodeFormatter , która (wraz z linkiem) może upiększyć brudny Kod nawet w jednej linii.

Myślę, że to jest to, czego szukasz:

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

Możesz ustawić klawisz skrótu F12 easy!!!

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

Zobacz szczegóły tutaj .

Używamtidy razem z niestandardowym systemem budowania do ulepszania HTML.

Mam HTMLTidy.sublime-build in my Packages/ User / directory:

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

I tidy_config.plik 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 build system i naciśnij ctrl+b lub cmd+b aby sformatować zawartość pliku. Drobnym problemem jest to, że ST2 nie przeładowuje automatycznie pliku, więc aby zobaczyć wyniki, musisz przełączyć się na jakiś inne pliki i z powrotem (lub do innej aplikacji i z powrotem).

Na Macu użyłem macports do zainstalowania tidy, na Windows trzeba by go pobrać samemu i określić working directory w systemie build, gdzie znajduje się tidy:

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

Lub dodać go do ścieżki.