Yadda kyautatawa HTML ke aiki
Mai kyautatawa yana karanta alama ka tag biye da tag, yana bin zuriyar kowane abin da ke cikin juna, kuma yana sake fitar da shi tare da shigarwa daidaitacciya. Ba ya canza abin da shafin ke nuna — kawai yadda ana yin tsarin tushe.
- Raba Tags. Ɗakin karatu yana dubewa shigarwar ka zuwa jerin alamu: tags na buɗewa, tags na rufe, rubutun abun ciki, sharhi, da abun ciki na blocks na script da style. Ana ɗaukar ƙimar attribute masu alamomin quoting da jikin abubuwan pre da textarea a matsayin naɗoɗe ɗaya, don haka farar sarari a ciki ba ta canzawa.
- Bi Zuriyar. Yayin da yake tafiya a cikin jerin alamu, mai kyautatawa yana kiyaye matakin shigarwa na yanzu. Kowane tag na buɗewa wanda ba na kansa ba yana tura matakin zuwa zuriyar guda; kowane tag na rufe da ya dace yana komawa. Wannan zuriya tana yanke shawara kan adadin naɗoɗe na shigarwa da ke a gaban kowane layi da aka dawo da shi.
- Aiwatar da Zaɓuɓɓukan Ka. Zaɓin shigarwar ka — sarari 2, sarari 4, ko tab — yana ƙayyade fadin matakin ɗaya. Ƙimar nannade a shafi tana karya dogayen layukan attributes ko rubutu da zarar sun wuce shafin da ka zaɓa. Iyakar layukan fanko tana ninkewa dogayen jere na layukan fanko zuwa ƙayyadaddun adadin da ka ƙayyade.
- Fitar da Alama. A ƙarshe mai tsara yana buga tags da shigarwa da karyar layi da ya sarrafa. Idan ka kunna tsarar da aka saka, abun ciki na kowane block na style yana gudana ta cikin mai tsara CSS da kowane block na script ta cikin mai tsara JS, don haka lambar da aka saka ta yi daidai da alama da ke kewaye da ita.
Dalilin kyautatawa HTML
- Karanta shafuka da aka rage. Samarwar HTML tana jifarwa ba tare da karyar layi ba don adanar bytes. Kyautatawa yana maido da tsari don ka iya nemo ɓangaren da kake nema, gano tag na rufe da ya ɓace, da bin yadda takardar ke ƙunsawa da gaske.
- Tsara samfuran mara daidaito. Alama da mutane da yawa suka gyara tana driftawa zuwa shigarwa ta gauraye da sanya tag. Wucewar sau ɗaya ta cikin mai kyautatawa yana daidaita fayilin gaba ɗaya, don haka commit na gaba yana nuna canjin da ka yi maimakon bangon farar sarari da aka sake tsarawa.
- Baya ɗaukar nauyin shafin ka. Yawancin masu kyautatawa na intanet suna loda ɗakin karatu gaba ɗaya lokacin da ka buɗe shafin. Wannan yana loda js-beautify a hankali kawai lokacin da ka danna Kyautatawa ko ka kunna yanayin live, don haka buɗe shafin yana ɗaukar kilobytes kaɗan maimakon ɗaruruwan, kuma farkon samarwa yana kasancewa da sauri.
- Babu abin da ke barin burauzarku. Dukkan abu yana gudana a kan na'urar ka. Alama taka ba ta taɓa loda zuwa sabar ba — wannan yana da mahimmanci lokacin da shafin ya na'mallakin abokin cinikin, yana ƙunshe da URLs na cikin gida, ko ya faɗa ƙarƙashin yarjejeniyar sirri da ka sanya hannu.
Ayyuka na gari
Kyautatawa HTML yana faruwa a duk lokacin da wani ya buƙaci karanta alama da ba a rubuta ta don karantawa.
- Bincika shafi da ke aiki: liƙa tushen da aka rage daga Duba Tushe don nemo alama a bayan ɓarkewar tsari da ba za ka sake haifar da ita a gida ba.
- Tsabtace fitowar CMS: sake tsara samfurin da mai gina shafi ya aika a layi ɗaya kafin ka ɗaure shi zuwa repo.
- Bita na samun damar da SEO: faɗaɗa takardar don ka iya duba tsarin taken, tsarin alama, da siffofin alt da ke adawa da DOM na gaske.
Misali da aka yi aiki
Ɗauki yanki da aka rage: <div><p>hi</p><span>x</span></div>. Liƙa shi a sama tare da shigarwa da aka ƙayyade zuwa sarari 2, sannan danna Kyautatawa. Ka samu ɓangare mai karantawa: <div> a layin kansa, <p>hi</p> da <span>x</span> kowannensu da shigarwa matakin ɗaya zuriya, da </div> mai dacewa an daidaita shi a ƙarƙashin. Canza shigarwa zuwa Tab kuma kowane matakin zai koma daga sarari biyu zuwa harafin tab. Ƙara block na <style>a{color:red}</style>, kunna "Har da tsara CSS da JS da aka saka," kuma ƙa'ida za ta faɗaɗa zuwa layukanta masu shigarwa maimakon zama a layi ɗaya.
FAQ
Shin wannan yana gudana a cikin burauzarki?
Eh. Ɗakin karatu na js-beautify yana loda a karo na farko da ka danna Kyautatawa ko ka kunna yanayin live, kuma ana adana shi a cikin cache. Alama ba ta taɓa barin shafin ba — babu tafiya zuwa sabar kuma babu loda.
Shin kyautatawa zai canza yadda shafina ke nuna?
A'a. Mai kyautatawa yana ƙara da cire farar sarari da karyar layi tsakanin tags kawai. Mai binciken yana watsar da farar sarari lokacin da yake gina shafi, don haka sakamakon da aka nuna iri ɗaya ne. Abu ɗaya da ya kamata a kula da shi shi ne abun ciki mai dogara da farar sarari a cikin pre, textarea, ko abubuwa na layi, waɗanda mai tsara ya bar gangan ba a taɓa su.
Maɓallin CSS da JS da aka saka yana yin menene?
Yana kashe, abun ciki na blocks na style da script yana zama haka kamar yadda ka liƙa shi. Kunna shi, kuma CSS a cikin kowane block na style yana gudana ta cikin mai tsara CSS da JavaScript a cikin kowane block na script ta cikin mai tsara JS, don haka lambar da aka saka ta yi daidai da alama da ke kewaye da ita.
"Nanna a shafi" yana yin menene?
Yana ƙayyade tsayin layi wanda tag mai attributes da yawa, ko dogon gudu na rubutu, ana karya shi zuwa layuka da yawa. Bar shi a 0 don kiyaye kowane abin a layi ɗaya ba tare da la'akari da tsayi ba. Ƙayyade shi zuwa 80 ko 120 kuma mai tsara zai nannade duk wani abu da ya wuce wannan shafi, wanda ke sanya abubuwa masu faɗi su iya karantawa a cikin edita mai ƙunci.
Kyautatawa HTML a gefen burauzar yana ba ka alama mai karantawa ba tare da mataki na gini ko loda ba. Liƙa shafi da aka rage ko mara tsari, zaɓi shigarwa da faɗin nannade, yanke shawara ko za a sake tsara CSS da JS da aka saka, sannan kwafi ko sauke sakamakon. Babu abin da ke barin na'urar ka, babu asusun, kuma ɗakin karatu yana loda kawai lokacin da ka roƙa shi — don haka buɗe wannan shafi yana ɗaukar kilobytes kaɗan, ba megabyte ba.