Cum pot reformata cod HTML folosind Sublime Text 2?

Nu't nevoie de plugin-uri pentru a face acest lucru. Doar selectați toate liniile (Ctrl A) și apoi, din meniul selectați Editare → Linie → Reindent. Acest lucru va funcționa dacă fișierul este salvat cu o extensie care conține HTML ca .html "sau".php.

Dacă veți face acest lucru de multe ori, puteți găsi această cheie de cartografiere utile:

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

Dacă fișierul nu este salvat (de exemplu, trebuie doar lipite într-un fragment de la o fereastră nouă), puteți seta manual limba pentru indentare prin selectarea meniului View → Sintaxa → limba de alegere înainte de selectarea reindent opțiune.

Există o jumătate de duzină sau atât de moduri de a format HTML în Sublim. Am'am testat unul dintre cele mai populare plugin-uri (a se vedea writeup am făcut pe blog-ul meu pentru detalii complete), dar aici's o scurtă prezentare a unora dintre cele mai populare opțiuni:

Reindent comanda

Pro:

• Nave cu Sublim, deci nici un plugin de instalare

Contra:

• Nu - 't a șterge liniile necompletate suplimentare
• Poate't se ocupe de minified HTML, linii cu mai multe tag-uri deschise
• Nu - 't în mod corespunzător format <script> blocuri

Tag

Pro:

• Suportă ST2/ST3
• Elimină liniile necompletate suplimentare
• Nu există dependențe binar

Contra:

• Bobine de pe tag-uri PHP
• Nu - 't se ocupe de <script> blocuri corect

HTMLTidy

Pro:

• Mânere tag-uri PHP
• Unele setări pentru a tweak formatare

Contra:

• Necesită PHP (revine la serviciu web)
• ST2 numai
• Abandonate?

HTMLBeautify

Pro:

• Suportă ST2/ST3
• Simplu și nu binaray dependențe
• Suport pentru OS X, Win și Linux

Contra:

• Bobinele un pic cu comentarii inline
• Se extinde minimizat/comprimat cod

HTML-CSS-JS Prettify

Pro:

• Suportă ST2/ST3
• Se ocupă de HTML, CSS, JS
• Mare integrare cu Sublim's meniuri
• Extrem de personalizabil
• Pe-setări de proiect
• Format pe opțiunea salvare

Contra:

• Necesită Node.js
• Nu mare de integrate PHP

Care este mai bun?

HTML-CSS-JS Prettify este câștigător în cartea mea. O mulțime de caracteristici de mare, nu de mult să se plângă.

Singurul pachet pe care am'am fost în stare să găsesc Tag.

Puteți să-l instalați folosind pachetul de control. https://sublime.wbond.net

După instalarea pachetului de control. Du-te la pachetul de control (Preferințe -> Pachetul de Control), apoi tastați "install", hit enter. Atunci de tip " tag " și a lovit enter.

După instalarea Tag, evidențiați textul și apăsați tasta de comenzi rapide Ctrl+Alt+F.

Recomand acest plugin: HTML/CSS/JS Prettify, Este într-adevăr funcționează.

După instalare, trebuie doar să selectați codul și apăsați Ctrl+Shift+H.

Done!

Doar un sfat general. Ceea ce am făcut pentru auto-tidy up HTML mea, a fost instalați pachetul HTML_Tidy, și apoi se adaugă următoarele keybinding la setările implicite (pe care il folosesc):

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

acest ruleaza HTML Tidy cu fiecare enter. Pot exista dezavantaje la acest lucru, am'm destul de nou pentru Sublim eu, dar se pare că pentru a face ceea ce vreau :)

Deși întrebarea este pentru HTML, aș dori, de asemenea, în plus ca să dea informații despre cum să auto-format codul Javascript pentru Sublime Text 2;

Puteți selecta toate cod(ctrl + A) și de a folosi in-app funcționalitate, reindent ("Edit" - > "de Linie" - > Reindent) sau puteți folosi JsFormat formatare plugin pentru Sublime Text 2` dacă ar dori să aibă mai multe setări personalizate despre cum să formatați codul de la plus la Sublim Text's de default tab/liniuță setări.

https://github.com/jdc0589/JsFormat

Puteți instala cu ușurință JsFormat cu ajutorul Pachetului de Control ("Preferințe" - > Pachet de Control) Deschide pachetul de control atunci *tip instalare, hit <kbd>enter</kbd>*. Apoi tastațijs format și a lovit enter, ar're făcut. (Pachetul controlerul va arăta starea de instalarea cu succes și erori de pe bara din stânga jos al Sublim)

Adăugați următoarea linie la cheie legaturi ("Preferințe" - > de taste Utilizator)

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

Am'm cu ctrl + alt + 2, puteți schimba tasta de apelare rapidă ce vrei. Până în prezent, JsFormat este un plugin bun, merită să-l încercați!

Sper că acest lucru va ajuta pe cineva.

Nu's un plugin numit SublimeHtmlTidy care funcționează destul de bine

https://github.com/welovewordpress/SublimeHtmlTidy

Pentru mine, `HTML Prettify soluție a fost extrem de simplu. M-am dus la HTML Prettify pagina.

1. Este necesar Sublim Package Manager
2. Urmat Instrucțiunile pentru instalarea pachetului manager aici
3. introduce cmd + shift + p pentru a afișa meniul
4. Scris prettify
5. Ales `HTML prettify de selecție în meniul

Boom-ul. Făcut. Arata grozav

Pur și simplu du-te la

Edit -> Tag -> Auto-format etichetele de pe document

Am creat un Pachet numit HTMLBeautify care are un loc de muncă decent de reformatare HTML. M-am bazat pe un script Perl care l-am găsit în 1997—am actualizat pentru a lucra cu toate noile ultramoderne moderne tag-uri. :)

A verifica it afară și lasă-mă să știu ce crezi!

https://github.com/rareyman/HTMLBeautify

Eu sunt încă de a avea privilegiul de a comenta deci, acest lucru este pur și simplu informații suplimentare referitoare la @peter's răspunde răspunsul de mai sus.

Am găsit HTML nu a alinia cum era de așteptat în cazul IE condiționată comentarii în antet nu au fost complet în linie, de exemplu, culoare la stânga:

Este un open source CodeFormatter plugin, care(împreună reindenting) pot înfrumuseța cod murdar chiar și totul este într-o singură linie.

Cred că acest lucru este ceea ce ai're în căutarea pentru:

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

Am'm folosind ordine împreună cu obiceiul de a construi sistemul de prettify HTML.

Am HTMLTidy.sublim-de a construi în Pachete/User/ director:

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

și tidy_config.cfg fișier în același director:

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

Și doar selectați sistemul de a construi și apăsați ctrl+b sau cmd+b pentru a reformata conținutul fișierului. O mică problemă este că ST2 nu reîncărca automat fișierul astfel încât pentru a vedea rezultatele pe care le au pentru a comuta la un alt fișier și înapoi (sau la alte aplicații și înapoi).

Pe Mac am'am folosit căilor mediului pentru a instala ordonat, pe Windows ai'd trebuie să-l descărcați și să specificați directorul de lucru în sistemul de build, unde ordonat este situat:

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

sau adăugați-l la CALE.

puteți seta comenzi rapide cheie F12 ușor!!!

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

vezi detalii aici.