Gerðu þjappaðan kóða læsilegan á netinu

Gera ákveðið kóðasnið læsilegt

Hvert snið hefur sína eigin síðu með upplýsingum sem eiga sérstaklega við um málið:

• Sníða JavaScriptJavaScript
• Sníða CSSCSS
• Sníða HTMLHTML
• Sníða XMLXML
• Sníða JSONJSON

Hvað er kóðaþjöppun?

Forritarar skrifa kóða sem aðrir forritarar eiga að geta lesið. Þess vegna nota þeir athugasemdir, inndrátt, auðar línur milli kóðablokka og breytuheiti sem lýsa innihaldinu. Allt þetta hjálpar fólki, en vafrinn þarf ekki á því að halda. Kóðaþjöppun er skref í smíðiferlinu sem fjarlægir það sem vélin þarf ekki: bil, línuskipti, athugasemdir og oft upprunaleg heiti breyta og falla, sem eru stytt í einn staf. Hegðun forritsins er óbreytt þótt framsetningin verði allt önnur.

Ávinningurinn er verulegur. Þjappaður JavaScript-pakki er gjarnan 30 til 70 prósent minni en frumkóðinn. Það þýðir færri bæti yfir netið, hraðari fyrstu birtingu og betri Core Web Vitals. Þess vegna afhenda næstum allir vefir í rekstri þjappað JS, CSS og HTML. Gallinn er að skráin sem þú sækir af slíkum vef verður ein þétt lína sem erfitt er að lesa. Þegar þú þarft að skilja skrána, leita að villu eða kanna hvað hún gerir í raun er fyrsta skrefið að gera kóðann læsilegan aftur.

Hvað gerir þetta tól við þjappaðan kóða?

LFUnminify tekur þjappaðan kóða og endurbyggir læsilega framsetningu hans. Það bætir við inndrætti, setur hverja skipun á eigin línu, bætir bilum við blokkir og virkja og beitir samræmdum sniðreglum fyrir málið sem það greinir. Pakki með fjögur þúsund stöfum á einni línu verður að nokkur hundruð rétt inndregnum línum sem hægt er að fletta í gegnum, leita í og skilja.

Að baki keyrir Prettier, kóðasniðill sem mörg JavaScript-teymi nota nú þegar, beint í vafranum þínum. Niðurstaðan fylgir því sama sniði og ritillinn þinn myndi nota á venjulegan frumkóða. Hún verður kunnugleg og auðveld aflestrar. Greiningin er sjálfvirk: límdu inn kóðann og tólið finnur út hvort um JavaScript, CSS, HTML, XML eða JSON er að ræða áður en það beitir viðeigandi sniði.

Ein takmörkun þarf að vera skýr frá upphafi. Að gera þjappaðan kóða læsilegan jafngildir ekki því að endurheimta frumkóðann. Athugasemdum, upprunalegum breytuheitum og skýringum forritarans var eytt við smíðina og ekkert tól getur búið þær upplýsingar til aftur. Þú færð vel skipulagðan kóða sem auðvelt er að lesa og rata um, en stuttu heitin haldast. Í reynd dugar það yfirleitt til að fylgja röksemdafærslunni, finna fall eða sjá hvaða gögn skriftan sendir og hvert.

Kóðasnið sem eru studd

Einn ritill, fimm mál. LFUnminify les efnið sem þú límir inn, greinir málið og sendir það í þáttara sem er hannaður fyrir málskipan þess. Þú þarft aldrei að velja snið úr valmynd og skrá með rangri skráarendingu fær samt rétta meðhöndlun:

• JavaScript, þar á meðal ES6 og nýrri málskipan, einingar, ósamstilltur kóði og JSX. Dæmigert dæmi er pakki sem webpack, Vite, esbuild eða Terser hefur búið til.
• CSS, þar á meðal nútímamálskipan, sérsniðnir eiginleikar, miðlafyrirspurnir og hreiðraðar reglur. Hentar vel fyrir stílsnið sem Tailwind, Sass eða PostCSS hefur búið til.
• HTML, þar á meðal innfelldar script- og style-blokkir sem eru sniðnar með merkingunni í stað þess að sitja eftir á einni langri línu.
• XML, þar á meðal veftré, RSS-straumar, SVG-skrár, SOAP-umslög og stillingaskrár sem berast án nokkurra línuskipta.
• JSON, þar á meðal djúpt hreiðruð API-svör, pakkalýsingar, stillingaskrár og gögn úr annálum.

Hvenær þarf að gera þjappaðan kóða læsilegan?

Yfirleitt er tilgangurinn að svara ákveðinni spurningu fremur en að svala forvitni. Þetta er oft fljótlegasta leiðin til að skilja kóða sem þú skrifaðir ekki, eða eigin kóða sem er orðinn ólæsilegur:

• Villuleit í rekstri. Kallstaflinn bendir á línu 1, dálk 24815 í pakka. Með því að sníða skrána færðu raunveruleg línunúmer og getur fundið fallið sem olli villunni.
• Úttekt á skriftu frá þriðja aðila. Áður en þú bætir greiningarkóða, spjallglugga eða samstarfsskriftu á vefinn geturðu skoðað hvaða gögn hún safnar, hvaða lén hún tengist og hvað hún skrifar í geymslu vafrans.
• Lestur á samsettu stílsniði. Hjálparklasakerfi skila risastórum CSS-skrám á einni línu. Læsilegt snið sýnir forgangsröð reglna, hvaða regla ræður og hvers vegna þín eigin yfirskrift er hunsuð.
• Skoðun á API-svari. JSON-gögn af netflipanum eru ólæsileg þar til þau hafa verið sniðin. Þá verða uppbyggingin, hreiðrunin og reiturinn sem vantar augljós á nokkrum sekúndum.
• Að læra af raunverulegum kóða. Það er góð leið til að bæta sig að lesa hvernig vel hannað safn leysir vandamál. Rétt snið gerir slíkan lestur mun þægilegri.

Svona notarðu LFUnminify

Þú getur sett kóða í ritilinn á þrjá vegu. Límdu hann beint í vinstra svæðið, smelltu á Velja skrá til að opna skrá úr tölvunni eða dragðu skrá inn á innsláttarsvæðið. Til að skoða kóða frá vef í rekstri skaltu opna hann með view-source eða þróunartólum vafrans, afrita og líma hér. Þú getur líka vistað .js-, .css-, .html-, .xml- eða .json-skrána og opnað hana með Velja skrá.

Sniðunin hefst sjálfkrafa svo þú þarft ekki að leita að hnappi. Tólið bíður þar til þú hættir að slá inn, greinir málið og birtir sniðna niðurstöðu hægra megin með málskipunarlitun. Þaðan geturðu afritað allt úttakið á klippiborðið með einum smelli eða sótt það sem skrá með viðeigandi heiti til að opna í eigin ritli.

Tvennt hjálpar við langar skrár. Kveiktu á línunúmerum þegar þú þarft að vísa á ákveðinn stað eða bera saman tvær útgáfur. Valið er geymt fyrir næstu heimsókn. Ef tólið greinir annað snið en þú bjóst við getur það líka verið gagnleg vísbending: skrá sem greinist sem JavaScript þótt þú héldir að hún væri JSON er oft JSONP-svar eða stillingagögn inni í gildisveitingu.

Kóðinn þinn fer aldrei úr tækinu þínu

Þetta þarf að vera skýrt. Sniðunin fer fram á tækinu þínu, í vafranum, með JavaScript sem hleðst einu sinni með síðunni. Kóðinn er ekki sendur, settur í biðröð á netþjóni, vistaður í gagnagrunni eða skráður í annál. Þú getur aftengt netið eftir að síðan hefur hlaðist og tólið heldur áfram að virka. Það sýnir á einfaldan hátt að engin gögn eru send.

Þú getur því límt inn lokaðan frumkóða, innri hugbúnaðarpakka, verkefni viðskiptavinar eða stillingaskrá sem þú vilt ekki deila. Ekkert sem þú límir inn eða opnar fer úr vafranum. Tólið sækir heldur aldrei skrár fyrir þig svo netþjónninn okkar kemst ekki að því hvaða kóða eða vefi þú ert að skoða. Þú þarft ekki að stofna aðgang og engin rakning er á efninu sem þú límir inn.

Hvers vegna er LFUnminify ókeypis?

LFUnminify tilheyrir safni ókeypis tóla sem Ludovic Frank hefur smíðað, ásamt lykilorðagjafa, favicon-gjafa, litaspjaldatóli og fleiri hjálpartólum. Hugmyndin er einföld: litlu tólin sem forritarar grípa til oft í viku ættu að vera aðgengileg án skráningar, auglýsingaveggja eða notkunarkvóta. Hér þarf engan aðgang, engin notkunarmörk eru sett og engar greiðsluáskriftir eru boðnar inni í tólinu.

Tólið er líka sýnidæmi í raunverulegri notkun. Hvert tól í safninu er fullbúið forrit sem er smíðað og viðhaldið með sama hætti og verkefni viðskiptavina. Það segir meira um vinnubrögðin en verkefnasýning ein og sér. Ef þú þarft sérsniðna vefþróun, vandað forrit fremur en sniðmát eða tæknilega ráðgjöf finnurðu tengilinn neðst á síðunni.

Algengar spurningar