A kódírás egyik legnagyobb fájdalma a rendetlen, alig olvasható kóddal való foglalkozás. A cikkben említett és hivatkozott eszközökkel azonban szépítheti HTML-jét, hogy könnyebben olvasható legyen.
Ez a cikk a HTML szépítésének legjobb eszközeiről szól.
Tartalomjegyzék
Mik azok a HTML szépítők?
A HTML-szépítők, ahogy valószínűleg sejtette, a HTML-kód szépítésére használt eszközök. Zavaros kódot vesznek be, megfelelően formázzák, és gyönyörű HTML-kódot adnak vissza. A formázás során számos dolgot javítani fognak, például megfelelő új sorokat hoznak létre, javítják a szóközöket és a kód helyes behúzását.
Ez megkönnyíti a kód olvasását, és biztosítja, hogy a teljes kódbázis az elfogadott bevált gyakorlatokat kövesse. Segít a hibák korábbi észlelésében és a termelékenység javításában, mivel nem kell kézzel formáznia a HTML-t. Számos eszköz létezik a HTML szépítésére, és ebben a cikkben megemlítek néhányat a legnépszerűbbek közül.
Olvassa el még: Általánosan használt HTML-címkék, amelyeket kezdőknek tudniuk kell
A HTML szépítésének előnyei
✅ Javítja a kód olvashatóságát. Ez megkönnyíti Önnek és másoknak a kód olvasását. Ennek eredményeként a fejlesztői termelékenység javulni fog.
✅ Lehetővé teszi a bevált gyakorlatok követését és a szabványos formázás használatát.
✅ Lehetővé teszi, hogy egységességet hozzon létre a kódterekben, például szóközök vagy tabulátorok használatával, mekkora behúzással stb.
A legjobb eszközök a HTML szépítéséhez
Ebben a részben felsorolom a legjobb eszközöket a HTML-eszközök szépítéséhez. Az eszközöket két kategóriába soroltam: online és asztali. Először az asztali eszközökkel foglalkozunk.
Asztali eszközök
Az első eszközkészlet, amelyre ebben a cikkben foglalkozunk, az asztali eszközök. Az asztali eszközök ideálisak, mivel kényelmesen futnak helyben, hogy szépítsék a rendszeren lévő HTML-fájlokat.
Ezen eszközök némelyike integrálható a VSCode népszerű kódszerkesztővel, és zökkenőmentesen javítja a HTML-kódot írás közben.
Csinosabb
Csinosabb valószínűleg a legnépszerűbb eszköz a HTML, CSS és JavaScript formázására. Nagyon véleményes. Ezért a kódot az előre meghatározott szabvány szerint formázza, sok variációs lehetőség nélkül. Bár ez elsősorban egy asztali eszköz, továbbra is futtathatja online és formázza meg a kódját.
Telepíthető olyan népszerű IDE-kre, mint a Visual Studio Code, a WebStorm és a Vim bővítményként. Telepítheti mint egy NPM csomag és formázza meg a kódot a parancssorból. Ez lehetővé teszi a kód formázását a beállítások szélesebb körében.
Még olyan keretrendszereket is támogat, mint a React, Angular és Vue, valamint a CSS különböző ízeit, például az SCSS-t. A GraphQL, a YAML, a Markdown és a Handlebars formázására is alkalmas.
A Prettier valószínűleg a legjobb eszköz a HTML-kód formázására, ha a népszerűsége számít. Ezért ez az általam választott HTML-szépítő.
JS Beautify
JS Beautify egy népszerű NPM-könyvtár a HTML, CSS és JavaScript szépítésére. Ez egy teljes funkcionalitású formázó, amely a szebbhez hasonlítható. A Prettier-től eltérően azonban nem érhető el VS Code kiterjesztésként.
Mindazonáltal sok feladatot képes elvégezni a HTML szebbé tételére. Ide tartozik a megfelelő behúzás, a sortörések beszúrása, valamint a megjegyzések megőrzése vagy eltávolítása. A formázási beállítások megadhatók az egyes projektek konfigurációs fájljában vagy profilként, amely újra felhasználható különböző projektekben.
A JS Beautify NPM vagy PIP csomagként is elérhető. A PIP verzió azonban csak a JavaScriptet, míg az NPM verzió a JavaScriptet, a HTML-t és a CSS-t tudja formázni. A telepítés után a parancssorból formázza a fájlokat. Alternatív megoldásként betöltheti a csomagot egy böngészőbe a CDN használatával.
AB HTML formázó
AB HTML formázó egy egyszerű eszköz a HTML szebbé tételéhez. Ellentétben a Prettier-rel, amely sok mindent megtesz, az AB HTML Formatter csak egy dolgot tesz: formázza a HTML-kódot. Bár a kevesebb funkció rossznak tűnhet, lehetővé teszi a formázó gyors és hatékony működését.
Az AB Formatter ideális, ha nem akarja lelassítani a VSCode-ját sok nagy kiterjesztéssel.
A kód szépítéséhez mindössze annyit kell tennie, hogy formázza a HTML-t, csak nyomja meg az Alt + Shift + F billentyűket, és az AB Formatter elvégzi a többit.
Online eszközök
Az asztali eszközök alternatívája az online eszközök. Az asztali eszközökkel ellentétben az online eszközöket nem kell telepíteni. Ennek az az oka, hogy az online eszközök olyan webhelyeken keresztül érhetők el, ahol feltölti a kódot, és letölti a formázott kódot.
A kód másolása, formázása és visszaillesztése azonban fárasztó, különösen az asztali eszközökhöz képest, amelyek a helyükön szebbé teszik a HTML-kódot. Mindazonáltal az online eszközöknek továbbra is van használati esetük, és számos eszköz létezik a HTML szebbé tételére. Ezek tartalmazzák:
Piszkos jelölés
Piszkos jelölés egy ingyenes online eszköz a HTML formázására. Ez az egyik legjobb online eszköz a HTML-kód szebbé tételéhez. Testreszabható különböző behúzási, sorhosszúsági és üres sorok hozzáadásával az áttekinthetőség érdekében.
A webhely egy egyéni API-t is kínál a HTML programozott szépítéséhez. Ez hasznos lehet a HTML Beautifying hozzáadásához a CI/CD munkafolyamathoz.
HTML formázó
HTML formázó egy egyszerű szépítő a HTML kódhoz. A cikkben tárgyalt többi eszköztől eltérően nem rendelkezik testreszabási lehetőségekkel.
A HTML mellett a JSON, XML, YAML, JavaScript, TypeScript, Java és C++ formátumokat is formázza. A webhely további szolgáltatásokat is kínál, például a HTML érvényesítését, a HTML-kimenet megtekintését, a HTML minimalizálását, valamint az Excel és a Jade HTML-re konvertálását. Mindezek a szolgáltatások ingyenesen elérhetők online.
HTML Viewer
HTML Viewer megfelelő eszköz ebben a kategóriában. A kód másolása és beillesztése mellett feltölthet egy fájlt vagy küldhet be egy URL-t. A testreszabási lehetőségek korlátozottak; csak a behúzásokon módosíthatja a térközt. Azonban amellett, hogy megszépíti a HTML-jét, csökkentheti is azt.
A HTML Formatterhez hasonlóan a HTML Viewer is számos funkcióval rendelkezik, mint például a HTML, CSS, JavaScript, JSON, YAML, XML és sok más nyelv szépítője. Átalakítókkal is rendelkezik olyan adatmegjelenítési formátumok között, mint a JSON és az XML, az SQL és a CSV. A CSS-t SCSS-ből és LESS-ből is le tudja fordítani. A többi itt említett online szolgáltatáshoz hasonlóan ez is teljesen ingyenes.
Végső szavak
Ebben a cikkben megvitattuk azokat a különféle eszközöket, amelyek segítségével szépítheti HTML-jét. Ezután olvassa el ezt a HTML-szerkesztő létrehozásáról szóló cikket.