Hoe reformeer ik HTML-code met Sublime Tekst 2?

Ik heb een aantal slecht geformatteerde HTML-code die ik zou willen herformeren. Is er een opdracht die automatisch HTML-code in sublieme tekst 2 wordt herformaat, zodat het er beter uitziet en is gemakkelijker te lezen?

Antwoord 1, Autoriteit 100%

U hebt geen plug-ins nodig om dit te doen.
Selecteer gewoon alle regels (CTRL + A ) en vervolgens in het menu Selecteer Bewerken → Lijn → Herinner.
Dit zal werken als uw bestand wordt opgeslagen met een extensie die HTML-achtige .htmlof .phpbevat.

Als u dit vaak doet, kunt u deze sleutelmapping nuttig vinden:

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

Als uw bestand niet is opgeslagen (bijvoorbeeld u net geplakt in een fragment in een nieuw venster), kunt u de taal handmatig instellen voor inkeping door de menuweergave te selecteren → Syntaxis → language of choicehet selecteren van de reindeent-optie.

Antwoord 2, Autoriteit 18%

Er zijn een half dozijn of op dit moment om HTML in Sublime te formatteren. Ik heb elk van de populairste plug-ins getest (zie de Naam up ik deed op mijn blog voor vol Details), maar hier is een snel overzicht van enkele van de meest populaire opties:

REENDID-opdracht

PROS:

• schepen met subliem, dus geen plug-in installeren

Nadelen:

• Verwijdert geen extra lege lijnen
• kan niet aan gedesneden HTML, lijnen met meerdere open tags
• Formatteert niet <script>BLOKS

tag

PROS:

• Ondersteunt ST2 / ST3
• Verwijdert extra lege lijnen
• Geen binaire afhankelijkheden

Nadelen:

• verslikt op PHP-tags
• verwerkt niet <script>blokkeert correct

htmltidy

PROS:

• Handgrepen PHP-tags
• Sommige instellingen om te tweaken opmaken

Nadelen:

• vereist PHP (Falls Terug naar Web Service)
• ST2 alleen
• verlaten?

htmlbeautify

PROS:

• Ondersteunt ST2 / ST3
• Simple en No Binaray-afhankelijkheden
• Ondersteuning voor OS X, WIN en LINUX

Nadelen:

• stikt een beetje met inline-opmerkingen
• Vouwt een minimale / gecomprimeerde code uit

HTML-CSS-JS Prettify

PROS:

• Ondersteunt ST2 / ST3
• Handgrepen HTML, CSS, JS
• Geweldige integratie met Sublime's menu's
• zeer aanpasbaar
• per projectinstellingen
• Formaat op Opslaan optie

Nadelen:

• vereist knooppunt.js
• Niet geweldig voor ingebedde PHP

die het beste is?

HTML-CSS-JS Prettify is de winnaar in mijn boek. Veel geweldige functies, niet veel om over te klagen.

Antwoord 3, Autoriteit 8%

Het enige pakket dat ik heb kunnen vinden is tag .

U kunt het installeren met behulp van de pakketcontrole. https://sublime.wbond.net

Na het installeren van pakketcontrole. Ga naar Pakketbesturing (Voorkeuren - & GT; Pakketbesturing ) Typ vervolgens install, druk op Voer in. Typ vervolgens tagen druk op ENTER .

Na het installeren van Tag, markeer de tekst en druk op de sneltoets Ctrl+Alt+F.

Antwoord 4, autoriteit 2%

Ik raad deze plug-in aan: HTML/CSS/JS Prettify, It werkt echt.

Selecteer na de installatie de code en druk op CTRL+SHIFT+H.

Klaar!

Antwoord 5, autoriteit 2%

Gewoon een algemene tip. Wat ik deed om mijn HTML automatisch op te ruimen, was het pakket HTML_Tidy installeren en vervolgens de volgende sneltoetsen toevoegen aan de standaardinstellingen (die ik gebruik):

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

dit voert HTML Tidy uit bij elke invoer. Dit kan nadelen hebben, ik ben zelf vrij nieuw in Sublime, maar het lijkt te doen wat ik wil 🙂

Antwoord 6

Hoewel de vraag voor HTML is, zou ik ook graag informatie willen geven over het automatisch formatteren van uw Javascript-code voor Sublime Text 2;

Je kunt al je code selecteren (CTRL+A) en de in-app-functionaliteit gebruiken, reindent(Edit-> Line-> Reindent) of u kunt de JsFormat-opmaakplug-in gebruiken voor Sublime Text 2als u meer aanpasbare instellingen wilt voor het formatteren uw code toe te voegen aan de standaardinstellingen voor tabbladen/inspringen van Sublime Text.

https://github.com/jdc0589/JsFormat

U kunt eenvoudig JsFormatinstalleren met behulp van Pakketbeheer (Preferences-> Package Control) Open pakketbeheer en typ install , druk opENTER. Typ vervolgens js formaten druk op ENTER, je bent klaar.
(De pakketcontroller toont de status van de installatie met succes en fouten in de balk linksonder van Sublime)

Voeg de volgende regel toe aan uw sneltoetsen (Preferences-> Key Bindings User)

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

Ik gebruik CTRL+ALT+2, je kunt deze sneltoets veranderen wat je maar wilt. Tot nu toe is JsFormateen goede plug-in, het proberen waard!

Ik hoop dat dit iemand zal helpen.

Antwoord 7

Er is een plug-in genaamd SublimeHtmlTidy die redelijk goed werkt

https://github.com/welovewordpress/SublimeHtmlTidy

Antwoord 8

Voor mij was de HTML Prettify-oplossing uiterst eenvoudig. Ik ging naar de HTML Prettify-pagina.

1. De Sublime Package Manager

nodig hebben

2. Volg de instructies voor het installeren van de pakketbeheerder hier
3. typte CMD+SHIFT+Pom het menu te openen
4. Getypt prettify
5. Kies de selectie HTML prettifyin het menu

Boem. Gedaan. Ziet er geweldig uit

Antwoord 9

Ga gewoon naar

Bewerken -> Tag -> Auto-opmaak tags op document

Antwoord 10

Ik heb een pakket gemaakt met de naam HTMLBeautifydat een behoorlijke taak heeft bij het opnieuw formatteren van HTML. Ik baseerde het op een Perl-script dat ik in 1997 vond - ik heb het bijgewerkt om te werken met alle nieuwe verwarde moderne tags. 🙂

Bekijk het en laat me weten wat je ervan vindt!

https://github.com/rareyman/HTMLBeautify

Antwoord 11

Ik denk dat dit is wat u zoekt:

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

Antwoord 12

Ik heb nog niet het recht om te reageren, dus dit is gewoon aanvullende informatie met betrekking tot het antwoordvan @peter hierboven.

Ik ontdekte dat HTML niet werd uitgelijnd zoals verwacht als IE voorwaardelijke opmerkingenin de kop waren niet volledig in-line bijv gelijk naar links:

<!--[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="https://html5shim.googlecode.com/svn/trunk/html5.js"></script>
<![endif]--> 

Antwoord 13

Er is een mooie open source CodeFormatter plugin die (samen reindenting) vuile code kunnen verfraaien zelfs al is het in enkele lijn.

Antwoord 14

Ik gebruik netjes samen met aangepaste build systeem om Prettify HTML.

Ik heb HTMLTidy.sublime-build in mijn pakketten / User / directory:

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

en tidy_config.cfg bestand in dezelfde directory:

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

En net select bouwsysteem en druk op CTRL + B of CMD + B om opnieuw bestand inhoud. Een klein probleem met dat is dat ST2 het bestand niet automatisch herladen dus om de gewenste resultaten te schakelen naar een ander bestand en terug (of naar een andere toepassing en terug) te zien.

Op Mac die ik heb gebruikt macports netjes te installeren op Windows zou je moet het zelf te downloaden en te specificeren werkmap in het bouwsysteem, waarbij netjes is gevestigd:

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

of toe te voegen aan de PATH.

Antwoord 15

U kunt sneltoets F12 makkelijk !!!

set

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

zie detail hier .

Antwoord 16

HTML-CSS-JS Prettify - Handen naar beneden het beste.

1. Installeer pakketbediening
2. ⌘ + linker shift + p (of Ctrl + alt + linker shift + p) - & GT; Pakketbesturing: Installeer pakket
3. Voer HTML-CSS-JS Prettify

in

4. Installeer knooppunt
5. Start sublieme tekst opnieuw

Geniet.