Come si riformatta il codice HTML utilizzando il testo sublime 2?

StackOverflow https://stackoverflow.com/questions/8839753

Domanda

Ho un codice HTML scarsamente formato che vorrei riformattare. Esiste un comando che riformarà automaticamente il codice HTML in Sublime Text 2, quindi sembra migliore ed è più facile da leggere?

È stato utile?

Soluzione

Non hai bisogno di plugin per farlo. Basta selezionare tutte le righe (Ctrl UN) e quindi dal menu selezionare Modifica → riga → reindent. Funzionerà se il tuo file viene salvato con un'estensione che contiene HTML come .html o .php.

Se lo fai spesso, potresti trovare utile questa mappatura chiave:

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

Se il tuo file non viene salvato (ad esempio, hai appena incollato in uno snippet a una nuova finestra), è possibile impostare manualmente la lingua per il rientro selezionando la vista del menu → Sintassi → language of choice Prima di selezionare l'opzione rendente.

Altri suggerimenti

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

Comando rendente

Professionisti:

  • Spedimenti con sublime, quindi non è necessaria alcuna installazione di plug -in

Contro:

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

Etichetta

Professionisti:

  • Supporta ST2/ST3
  • Rimuove linee vuote extra
  • Nessuna dipendenza binaria

Contro:

  • Strozzamenti su tag PHP
  • Non gestisce <script> blocca correttamente

Htmltidy

Professionisti:

  • Gestisce tag PHP
  • Alcune impostazioni da modificare la formattazione

Contro:

  • Richiede PHP (ricade nel servizio web)
  • Solo ST2
  • Abbandonato?

Htmlbeautify

Professionisti:

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

Contro:

  • Soffoca un po 'con commenti in linea
  • Espande un codice ridotto/compresso

HTML-CSS-JS Prettify

Professionisti:

  • Supporta ST2/ST3
  • Gestisce HTML, CSS, JS
  • Grande integrazione con i menu di Sublime
  • Altamente personalizzabile
  • Impostazioni per progetto
  • Formato sull'opzione Salva

Contro:

  • Richiede node.js
  • Non è eccezionale per PHP incorporato

Qual è il migliore?

HTML-CSS-JS Prettify è il vincitore del mio libro. Molte ottime caratteristiche, non molto di cui lamentarsi.

L'unico pacchetto che sono stato in grado di trovare è Etichetta.

È possibile installarlo utilizzando il controllo del pacchetto. https://sublime.wbond.net

Dopo aver installato il controllo del pacchetto. Vai al controllo del pacchetto (Preferenze -> Controllo del pacchetto) quindi digita install, colpo accedere. Quindi digita tag e colpito accedere.

Dopo aver installato il tag, evidenziare il testo e premere il collegamento Ctrl+Al+F.

Consiglio questo plugin: HTML/CSS/JS Prettify, Funziona veramente.

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

Fatto!

Solo un consiglio generale. Quello che ho fatto per raggruppare automaticamente il mio html, è stato installare il pacchetto html_tidy, quindi aggiungere il seguente keybinding alle impostazioni predefinite (che uso):

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

Questo funziona in ordine HTML con ogni inserimento. Potrebbero esserci svantaggi in questo, sono abbastanza nuovo per sublime me stesso, ma sembra fare quello che voglio :)

Tuttavia, la domanda è per HTML, vorrei anche dare informazioni su come farlo Formatta automaticamente il tuo codice JavaScript per il testo sublime 2;

Puoi selezionare tutto il tuo codice (Ctrl + UN) e utilizzare la funzionalità in-app, rendente (Edit -> Line -> Reindent) Oppure puoi utilizzare il plug -in di formattazione JSformat per Sublime Text 2 Se desideri avere impostazioni più personalizzabili su come formattare il codice per aggiungere alle impostazioni della scheda/rientro predefinite del testo sublime.

https://github.com/jdc0589/jsformat

Puoi facilmente installare Jsformat Con l'utilizzo del controllo del pacchetto (Preferences -> Package Control) Apri il controllo del pacchetto quindi Digitare Installa, premere accedere. Quindi digita js format e colpito accedere, hai finito. (Il controller del pacchetto mostrerà lo stato dell'installazione con successo ed errori nella barra in basso a sinistra di Sublime)

Aggiungi la riga seguente ai collegamenti chiave (Preferences -> Key Bindings User) 

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

sto usando Ctrl + Al + 2, puoi cambiare questa chiave di scelta rapida qualunque cosa tu voglia. Finora, JsFormat è un buon plugin, vale la pena provarlo!

Spero che questo aiuti qualcuno.

C'è un plugin chiamato Sublimehtmltidy che funziona abbastanza bene

https://github.com/welovewordpress/sublimehtmltidy

For me, the HTML Prettify solution was extremely simple. I went to the HTML Prettify page.

  1. Needed the Sublime Package Manager
  2. Followed the Instructions for installing the package manager here
  3. typed cmd + shift + p to bring up the menu
  4. Typed prettify
  5. Chose the HTML prettify selection in the menu

Boom. Done. Looks great

Simply go to

Edit -> Tag -> Auto-format tags on document

I created a Package called HTMLBeautify that does a decent job of reformatting HTML. I based it off of a Perl script I found back in 1997—I updated it to work with all the new fangled modern tags. :)

Check it out and let me know what you think!

https://github.com/rareyman/HTMLBeautify

I am yet to have the privilege to comment so this is simply additional information related to @peter's answer above answer.

I found HTML did not align as expected if IE conditional comments in the header were not completely in-line e.g. flush to the left:

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

There is a nice open source CodeFormatter plugin, which(along reindenting) can beautify dirty code even all of it is in single line.

I think this is what you're looking for:

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

I'm using tidy together with custom build system to prettify HTML.

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

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

and tidy_config.cfg file in the same directory:

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

And just select build system and press ctrl+b or cmd+b to reformat file content. One minor issue with that is that ST2 does not automatically reload the file so to see the results you have to switch to some other file and back (or to other application and back).

On Mac I've used macports to install tidy, on Windows you'd have to download it yourself and specify working directory in the build system, where tidy is located:

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

or add it to the PATH.

you can set shortcut key F12 easy!!!

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

see detail here.

Autorizzato sotto: CC-BY-SA insieme a attribuzione
Non affiliato a StackOverflow
scroll top