En av de store smertene med å skrive kode er å håndtere rotete, knapt lesbar kode. Men med verktøyene som er nevnt og koblet til i denne artikkelen, kan du forskjønne HTML-en din for å gjøre den lettere å lese.
Dette er en artikkel om de beste verktøyene for å forskjønne HTML.
Innholdsfortegnelse
Hva er HTML Beautifiers?
HTML Beautifiers er, som du sikkert har gjettet, verktøy som brukes til å forskjønne HTML-koden din. De tar inn rotete kode, formaterer den riktig og returnerer vakker HTML. Flere ting vil bli korrigert under formateringen, for eksempel å lage passende nye linjer, korrigere mellomrom og innrykk kode.
Dette gjør koden din enklere å lese og sikrer at hele kodebasen følger aksepterte beste praksis. Det hjelper deg også å fange opp feil tidligere og forbedre produktiviteten siden du ikke trenger å formatere HTML-en manuelt. Det er flere verktøy for å forskjønne HTML-en din, og i denne artikkelen vil jeg nevne noen av de populære.
Les også: Vanlige HTML-koder å vite for nybegynnere
Fordeler med å forskjønne HTML
✅ Du forbedrer kodens lesbarhet. Dette gjør det lettere for deg og andre å lese koden. Som et resultat vil utviklerproduktiviteten bli forbedret.
✅ Det lar deg følge beste praksis og bruke standard formatering.
✅ Det lar deg skape enhetlighet i kodeplassene dine, for eksempel ved å bruke mellomrom eller tabulatorer, hvor mye innrykk du skal bruke, etc.
Beste verktøy for å forskjønne HTML
I denne delen vil jeg liste opp de beste verktøyene for å forskjønne HTML-verktøyene dine. Jeg har delt verktøyene inn i to kategorier: online og desktop. Først vil vi dekke skrivebordsverktøyene.
Skrivebordsverktøy
Det første settet med verktøy vi vil dekke i denne artikkelen er skrivebordsverktøy. Desktop-verktøy er ideelle ettersom de enkelt kjøres lokalt for å forskjønne HTML-filene du har på systemet.
Noen av disse verktøyene integreres med VSCode, en populær koderedigerer, og vil fungere sømløst for å forskjønne HTML-en din mens du skriver.
Penere
Penere er sannsynligvis det mest populære verktøyet for å formatere HTML, CSS og JavaScript. Det er veldig meningsfylt. Derfor formaterer den koden din til sin forhåndsdefinerte standard uten mange alternativer for variasjoner. Selv om det først og fremst er et skrivebordsverktøy, kan du fortsatt kjøre det på nett og formater koden din.
Den kan installeres på populære IDE-er, inkludert Visual Studio Code, WebStorm og Vim som en utvidelse. Du kan installere den som en NPM-pakke og formater koden fra kommandolinjen. Dette lar deg formatere koden din i et bredere utvalg av innstillinger.
Den støtter til og med rammeverk som React, Angular og Vue og forskjellige smaker av CSS som SCSS. Den kan også formatere GraphQL, YAML, Markdown og Styre.
Penere er sannsynligvis det beste verktøyet for å formatere HTML-koden din hvis populariteten er noe å gå etter. Derfor er det min HTML Beautifier-valg.
JS forskjønne
JS forskjønne er et populært NPM-bibliotek for å forskjønne HTML, CSS og JavaScript. Det er en fullverdig formatering som kan sammenlignes med penere. I motsetning til Prettier er den imidlertid utilgjengelig som en VS-kodeutvidelse.
Ikke desto mindre er den i stand til å utføre mange oppgaver for å forskjønne HTML-en din. Disse inkluderer riktig innrykk, innsetting av linjeskift og bevaring eller fjerning av kommentarer. Formateringsalternativer kan spesifiseres i en konfigurasjonsfil for hvert prosjekt eller som en profil som kan gjenbrukes på tvers av forskjellige prosjekter.
JS Beautify er tilgjengelig som enten en NPM- eller PIP-pakke. Imidlertid kan PIP-versjonen bare formatere JavaScript, mens NPM-versjonen kan formatere JavaScript, HTML og CSS. Når den er installert, kan den formatere filer fra kommandolinjen. Alternativt kan du laste pakken til en nettleser ved å bruke deres CDN.
AB HTML-formater
AB HTML-formater er et enkelt verktøy for å forskjønne HTML-en din. I motsetning til Prettier, som gjør mange ting, vil AB HTML Formatter bare gjøre én ting – formatere HTML-en din. Selv om det kan virke dårlig å ha færre funksjoner, lar det formateringsverktøyet kjøre raskt og effektivt.
AB Formatter er ideell når du ikke vil bremse VSCode med mange store utvidelser.
For å forskjønne koden din, alt du trenger å gjøre for å formatere HTML-koden din er å trykke Alt + Shift + F , og AB Formatter vil gjøre resten.
Nettverktøy
Et alternativ til skrivebordsverktøy er nettbaserte verktøy. I motsetning til skrivebordsverktøy, krever ikke nettbaserte verktøy installasjon. Dette er fordi nettbaserte verktøy er tilgjengelige via nettsteder der du laster opp koden din og laster ned den formaterte koden.
Arbeidsflyten med å kopiere koden din, formatere den og lime den tilbake er kjedelig, spesielt sammenlignet med skrivebordsverktøy som forskjønner HTML-en din på plass. Ikke desto mindre har nettverktøy fortsatt et bruksområde, og det finnes forskjellige verktøy for å forskjønne HTML-en din. Disse inkluderer:
Dirty Markup
Dirty Markup er et gratis online verktøy for å formatere HTML. Det er et av de beste nettverktøyene for å forskjønne HTML-koden din. Den kan tilpasses med forskjellige alternativer for innrykk, linjelengde og å legge til tomme linjer for klarhet.
Nettstedet tilbyr også et tilpasset API for programmatisk forskjønnelse av HTML-en din. Dette vil være nyttig for å legge til HTML Beautifying i CI/CD-arbeidsflyten.
HTML-formater
HTML-formater er en enkel forskjønner for HTML-koden din. I motsetning til de andre verktøyene denne artikkelen dekker, har den ikke tilpasningsmuligheter.
I tillegg til HTML, formaterer den også JSON, XML, YAML, JavaScript, TypeScript, Java og C++. Nettstedet tilbyr også tilleggstjenester som å validere HTML-en din, se HTML-utdataene dine, forminske HTML og konvertere Excel og Jade til HTML. Alle disse tjenestene tilbys gratis online.
HTML Viewer
HTML Viewer er et anstendig verktøy i denne kategorien. I tillegg til å kopiere og lime inn kode, kan du laste opp en fil eller sende inn en URL. Tilpasningsalternativer er begrenset; du kan bare endre avstanden på innrykk. Men i tillegg til å forskjønne HTML-en din, kan den også forminske den.
I likhet med HTML Formatter har HTML Viewer mange funksjoner, for eksempel forskjønnere for HTML, CSS, JavaScript, JSON, YAML, XML og mange andre språk. Den har også omformere mellom datarepresentasjonsformater som JSON og XML, SQL og CSV. Den kan også kompilere CSS fra SCSS og LESS. Som andre nettjenester nevnt her, er det helt gratis.
Siste ord
I denne artikkelen diskuterte vi de forskjellige verktøyene som kan brukes til å forskjønne HTML-en din. Les deretter denne artikkelen om å lage et HTML-redigeringsprogram.