En af de store smerter ved at skrive kode er at håndtere rodet, knapt læsbar kode. Men med de værktøjer, der er nævnt og linket i denne artikel, kan du forskønne din HTML for at gøre det lettere at læse.
Dette er en artikel om de bedste værktøjer til at forskønne HTML.
Indholdsfortegnelse
Hvad er HTML Beautifiers?
HTML Beautifiers er, som du sikkert har gættet, værktøjer, der bruges til at forskønne din HTML-kode. De tager rodet kode ind, formaterer den korrekt og returnerer smuk HTML. Flere ting vil blive rettet under formatering, såsom oprettelse af passende nye linjer, korrigering af mellemrum og korrekt indrykning af kode.
Dette gør din kode lettere at læse og sikrer, at hele din kodebase følger accepteret bedste praksis. Det hjælper dig også med at fange fejl tidligere og forbedre produktiviteten, da du ikke behøver at formatere din HTML manuelt. Der er flere værktøjer til at forskønne din HTML, og i denne artikel vil jeg nævne nogle af de populære.
Læs også: Almindeligt brugte HTML-tags at kende for begyndere
Fordele ved at forskønne HTML
✅ Du forbedrer din kodes læsbarhed. Dette gør det nemmere for dig og andre at læse koden. Som et resultat vil udviklerproduktiviteten blive forbedret.
✅ Det giver dig mulighed for at følge bedste praksis og bruge standardformatering.
✅ Det giver dig mulighed for at skabe ensartethed i dine koderum, for eksempel ved at bruge mellemrum eller tabulatorer, hvor meget indrykning du skal bruge osv.
Bedste værktøjer til at forskønne HTML
I dette afsnit vil jeg liste de bedste værktøjer til at forskønne dine HTML-værktøjer. Jeg har opdelt værktøjerne i to kategorier: online og desktop. Først vil vi dække skrivebordsværktøjerne.
Skrivebordsværktøjer
Det første sæt værktøjer, vi vil dække i denne artikel, er skrivebordsværktøjer. Desktopværktøjer er ideelle, da de bekvemt kører lokalt for at forskønne de HTML-filer, du har på systemet.
Nogle af disse værktøjer integreres med VSCode, en populær kodeeditor, og vil arbejde problemfrit for at forskønne din HTML, mens du skriver.
Kønnere
Kønnere er nok det mest populære værktøj til at formatere din HTML, CSS og JavaScript. Det er meget meningsfuldt. Derfor formaterer den din kode til dens foruddefinerede standard uden mange muligheder for variationer. Selvom det primært er et skrivebordsværktøj, kan du stadig køre det online og formater din kode.
Det kan installeres på populære IDE’er, herunder Visual Studio Code, WebStorm og Vim som en udvidelse. Du kan installere det som en NPM pakke og formater din kode fra kommandolinjen. Dette giver dig mulighed for at formatere din kode i en bredere række af indstillinger.
Det understøtter endda rammer såsom React, Angular og Vue og forskellige varianter af CSS såsom SCSS. Det kan også formatere GraphQL, YAML, Markdown og Styr.
Smukkere er nok det bedste værktøj til at formatere din HTML-kode, hvis dens popularitet er noget at gå efter. Derfor er det min foretrukne HTML Beautifier.
JS Forskønne
JS Forskønne er et populært NPM-bibliotek til at forskønne HTML, CSS og JavaScript. Det er en fuldt udstyret formatter, der kan sammenlignes med smukkere. Men i modsætning til Prettier er den ikke tilgængelig som en VS-kodeudvidelse.
Ikke desto mindre er den i stand til at udføre en masse opgaver for at forskønne din HTML. Disse omfatter korrekt indrykning, indsættelse af linjeskift og bevarelse eller fjernelse af kommentarer. Formateringsindstillinger kan angives i en konfigurationsfil for hvert projekt eller som en profil, der kan genbruges på tværs af forskellige projekter.
JS Beautify er tilgængelig som enten en NPM- eller PIP-pakke. PIP-versionen kan dog kun formatere JavaScript, mens NPM-versionen kan formatere JavaScript, HTML og CSS. Når den er installeret, kan den formatere filer fra kommandolinjen. Alternativt kan du indlæse pakken til en browser ved hjælp af deres CDN.
AB HTML-formater
AB HTML-formater er et simpelt værktøj til at forskønne din HTML. I modsætning til Prettier, som gør mange ting, vil AB HTML Formatter kun gøre én ting – formatere din HTML. Selvom det kan virke dårligt at have færre funktioner, gør det det muligt for formateringsværktøjet at køre hurtigt og effektivt.
AB Formatter er ideel, når du ikke ønsker at bremse din VSCode med mange store udvidelser.
For at forskønne din kode skal du bare trykke på Alt + Shift + F for at formatere din HTML, og AB Formatter klarer resten.
Online værktøjer
Et alternativ til desktopværktøjer er onlineværktøjer. I modsætning til desktopværktøjer kræver onlineværktøjer ikke installation. Dette skyldes, at onlineværktøjer er tilgængelige via websteder, hvor du uploader din kode og downloader den formaterede kode.
Arbejdsgangen med at kopiere din kode, formatere den og indsætte den tilbage er dog trættende, især sammenlignet med skrivebordsværktøjer, der forskønner din HTML på plads. Ikke desto mindre har onlineværktøjer stadig en brugssag, og der er forskellige værktøjer til at forskønne din HTML. Disse omfatter:
Dirty Markup
Dirty Markup er et gratis online værktøj til at formatere din HTML. Det er et af de bedste onlineværktøjer til at forskønne din HTML-kode. Det kan tilpasses med forskellige muligheder for indrykning, linjelængde og tilføjelse af tomme linjer for overskuelighed.
Hjemmesiden tilbyder også en brugerdefineret API til programmæssig forskønnelse af din HTML. Dette ville være nyttigt for at tilføje HTML Beautifying til din CI/CD-arbejdsgang.
HTML-formater
HTML-formater er en simpel forskønnelse af din HTML-kode. I modsætning til de andre værktøjer, denne artikel dækker, har den ikke tilpasningsmuligheder.
Ud over HTML formaterer den også JSON, XML, YAML, JavaScript, TypeScript, Java og C++. Hjemmesiden tilbyder også yderligere tjenester såsom validering af din HTML, visning af dit HTML-output, formindskelse af HTML og konvertering af Excel og Jade til HTML. Alle disse tjenester leveres gratis online.
HTML Viewer
HTML Viewer er et anstændigt værktøj i denne kategori. Ud over at kopiere og indsætte kode kan du uploade en fil eller indsende en URL. Tilpasningsmulighederne er begrænsede; du kan kun ændre afstanden på fordybninger. Ud over at forskønne din HTML kan den dog også formindske den.
Ligesom HTML Formatter har HTML Viewer mange funktioner, såsom forskønnelse af din HTML, CSS, JavaScript, JSON, YAML, XML og mange andre sprog. Det har også konvertere mellem datarepræsentationsformater som JSON og XML, SQL og CSV. Det kan også kompilere CSS fra SCSS og LESS. Ligesom andre onlinetjenester nævnt her, er det helt gratis.
Afsluttende ord
I denne artikel diskuterede vi de forskellige værktøjer, der kan bruges til at forskønne din HTML. Læs derefter denne artikel om Oprettelse af en HTML-editor.