Come posso riformattare il codice HTML usando Sublime Text 2?

Ho del codice HTML mal formattato che vorrei riformattare. Esiste un comando che riformatterà automaticamente il codice HTML in Sublime Text 2 in modo che appaia migliore e sia più facile da leggere?

Non hai bisogno di plugin per farlo. Basta selezionare tutte le linee ( Ctrl A) e quindi dal menu selezionare Modifica → Linea → Riindent. Questo funzionerà se il tuo file viene salvato con un'estensione che contiene HTML come .htmlo .php.

Se lo fai spesso, potresti trovare utile questo mapping dei tasti:

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

Se il tuo file non viene salvato (ad esempio, hai appena incollato uno snippet in una nuova finestra), puoi impostare manualmente la lingua per il rientro selezionando il menu Visualizza → Sintassi → language of choiceprima di selezionare l'opzione di reindent.

Ci sono una mezza dozzina di modi per formattare HTML in Sublime. Ho testato ciascuno dei plugin più popolari (vedi il recensione che ho fatto sul mio blog per tutti i dettagli), ma ecco una rapida panoramica di alcune delle opzioni più popolari:

Comando Reindent

Professionisti:

• Viene fornito con Sublime, quindi non è necessaria l'installazione di plug-in

Contro:

• Non elimina le righe vuote extra
• Impossibile gestire HTML minimizzato, righe con più tag aperti
• Non formatta correttamente i <script>blocchi

Etichetta

Professionisti:

• Supporta ST2 / ST3
• Rimuove le righe vuote extra
• Nessuna dipendenza binaria

Contro:

• Soffocamenti sui tag PHP
• Non gestisce <script>correttamente i blocchi

HTMLTidy

Professionisti:

• Gestisce i tag PHP
• Alcune impostazioni per modificare la formattazione

Contro:

• Richiede PHP (torna al servizio Web)
• Solo ST2
• Abbandonato?

HTMLBeautify

Professionisti:

• Supporta ST2 / ST3
• Dipendenze binaray semplici e senza
• Supporto per OS X, Win e Linux

Contro:

• Soffoca un po 'con i commenti in linea
• Espande il codice minimizzato / compresso

HTML-CSS-JS Prettify

Professionisti:

• Supporta ST2 / ST3
• Gestisce HTML, CSS, JS
• Ottima integrazione con i menu di Sublime
• Altamente personalizzabile
• Impostazioni per progetto
• Formato su opzione di salvataggio

Contro:

• Richiede Node.js
• Non eccezionale per PHP incorporato

Qual è il migliore?

HTML-CSS-JS Prettify è il vincitore nel mio libro. Tante funzioni eccezionali, non c'è molto di cui lamentarsi.

L'unico pacchetto che sono riuscito a trovare è Tag .

Puoi installarlo usando il controllo del pacchetto. https://sublime.wbond.net

Dopo aver installato il controllo del pacchetto. Vai a controllo pacchetto ( Preferenze -> Controllo pacchetto ) quindi digita install, premi enter. Quindi digitare tage premere enter.

Dopo aver installato Tag, evidenziare il testo e premere il collegamento Ctrl+ Alt+ F.

Consiglio questo plugin: HTML / CSS / JS Prettify , funziona davvero.

Dopo l'installazione, basta selezionare il codice e premere Ctrl+Shift+H .

Fatto!

Solo un consiglio generale. Quello che ho fatto per riordinare automaticamente il mio HTML, è stato installare il pacchetto HTML_Tidy e quindi aggiungere il seguente keybinding alle impostazioni predefinite (che utilizzo):

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

questo esegue HTML Tidy con ogni invio. Potrebbero esserci degli inconvenienti, sono abbastanza nuovo per Sublime, ma sembra fare quello che voglio :)

Anche se la domanda è per HTML, vorrei anche fornire informazioni su come formattare automaticamente il codice Javascript per Sublime Text 2 ;

Puoi selezionare tutto il tuo codice ( ctrl+ A) e utilizzare la funzionalità in-app, reindent ( Edit-> Line-> Reindent) oppure puoi utilizzare il plug-in di formattazione JsFormat Sublime Text 2se desideri avere impostazioni più personalizzabili su come formattare il tuo codice in aggiunta a le impostazioni della scheda / rientro predefinite di Sublime Text.

https://github.com/jdc0589/JsFormat

Puoi facilmente installare JsFormat usando il Controllo pacchetto ( Preferences-> Package Control) Apri il controllo pacchetto quindi digita installa, premienter . Quindi digitare js formate premere enter, il gioco è fatto. (Il controller del pacchetto mostrerà lo stato dell'installazione con esito positivo ed errori nella barra in basso a sinistra diSublime )

Aggiungi la seguente riga alle tue combinazioni di tasti ( Preferences-> Key Bindings User)

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

Sto usando ctrl+ alt+ 2, puoi cambiare questo tasto di scelta rapida come preferisci. Finora, JsFormatè un buon plugin, vale la pena provarlo!

Spero che questo possa aiutare qualcuno.

C'è un plugin chiamato SublimeHtmlTidy che funziona abbastanza bene

https://github.com/welovewordpress/SublimeHtmlTidy

Per me, la HTML Prettifysoluzione era estremamente semplice. Sono andato alla pagina HTML Prettify .

1. Ho bisogno del Sublime Package Manager
2. Seguito le istruzioni per l'installazione del gestore pacchetti qui
3. digitato cmd + shift + p per richiamare il menu
4. Typed prettify
5. Scegli la HTML prettifyselezione nel menu

Boom. Fatto. Sembra fantastico

Vai semplicemente a

Modifica -> Tag -> Formatta automaticamente i tag sul documento

Ho creato un pacchetto chiamato HTMLBeautify che fa un buon lavoro di riformattazione dell'HTML. L'ho basato su uno script Perl che ho trovato nel 1997: l'ho aggiornato per funzionare con tutti i nuovi tag moderni e smangiati. :)

Dai un'occhiata e fammi sapere cosa ne pensi!

https://github.com/rareyman/HTMLBeautify

Penso che questo sia quello che stai cercando:

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

Devo ancora avere il privilegio di commentare, quindi si tratta semplicemente di informazioni aggiuntive relative alla risposta di @ peter sopra la risposta.

Ho scoperto che l'HTML non si allineava come previsto se i commenti condizionali di IE nell'intestazione non fossero completamente in linea, ad esempio a livello di sinistra:

<!--[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]--> 

C'è un bel plug-in CodeFormatter open source , che (insieme al reindenting) può abbellire il codice sporco anche se tutto è su una sola riga.

Sto usando ordinato insieme al sistema di generazione personalizzato per preimpostare HTML.

Ho HTMLTidy.sublime-build nella mia directory Packages / User /:

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

e file tidy_config.cfg nella stessa directory:

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

E basta selezionare il sistema di generazione e premere ctrl+ bo cmd+b per riformattare il contenuto del file. Un piccolo problema è che ST2 non ricarica automaticamente il file, quindi per vedere i risultati devi passare ad un altro file e viceversa (o ad un'altra applicazione e viceversa).

Su Mac ho usato macports per installare tidy, su Windows dovresti scaricarlo tu stesso e specificare la directory di lavoro nel sistema di compilazione, dove si trova tidy:

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

o aggiungilo al PERCORSO.

è possibile impostare il tasto di scelta rapida F12facile !!!

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

vedi i dettagli qui .