JavaScriptin muotoilu verkossa
Liitä minimoitu .js-tiedosto, webpack-koontitiedosto tai yksirivinen katkelma. Saat oikein sisennettyä JavaScriptiä oikeanpuoleiseen paneeliin. Prettier muotoilee koodin selaimessasi lähettämättä sitä mihinkään.
Miksi JavaScript muuttuu vaikealukuiseksi?
Monet tuotannon koontiprosessit minimoivat JavaScriptin ennen jakelua. Minimointityökalut poistavat tarpeettomat välit ja kommentit sekä voivat lyhentää nimiä tai kirjoittaa lausekkeita uudelleen. Erillinen niputusvaihe voi yhdistää moduulit suuremmiksi tiedostoiksi, joten jaettava komentosarja saattaa poiketa huomattavasti projektin lähdekoodista. Vaiheiden tarkoitus on säilyttää toiminta ja valmistella koodi jakelua varten, mutta samalla käsin tutkiminen vaikeutuu. Useista luettavista moduuleista koostuva projekti voi päätyä muutamaan tiiviiseen koontitiedostoon. Muotoilu tuo niiden jäljellä olevan rakenteen näkyviin peruuttamatta koontivaiheen muunnoksia.
Mitä muotoilu todella palauttaa näkyviin?
Koontitiedoston muotoilu lisää rivinvaihtoja, välejä ja sisennyksiä, jotka helpottavat jäljellä olevan ohjelman tutkimista. Sisäkkäiset funktiot ja ehdolliset haarat erottuvat, ja merkkijonot tai rajapintojen nimet löytyvät helpommin. Uudet rivinumerot koskevat muotoiltua kopiota: minimoidun tiedoston pinonjälki viittaa edelleen alkuperäiseen tiedostoon. LFUnminify ei muunna sijainteja eikä yhdistä niitä lähdekarttoihin. Käytä muotoiltua näkymää ympäröivän logiikan ymmärtämiseen ja selaimen virheenjäljitystä tarkkojen suoritusaikaisten kohtien tutkimiseen. Hyvä aloituskohta on virheilmoituksen tai verkkopyynnön erottuva merkkijono. Etsi se muotoillusta kopiosta ja lue sitä ympäröivät ehdot sen sijaan, että olettaisit lähimmän funktion aiheuttaneen ongelman. Koontitiedoston sisältämät generoidut apufunktiot ja suoritusympäristön kääreet säilyvät muotoilussa. Jos alkuperäinen lähdekoodi on saatavilla, sen vertaaminen tähän kokonaisuuteen antaa luotettavamman selityksen kuin pelkkä sisennys.
Nykyaikainen syntaksi on tuettu
Muotoilija jäsentää nykyistä JavaScriptiä eikä vain vuosikymmenen takaista osajoukkoa. Nuolifunktiot, luokat, async ja await, generaattorit, valinnainen ketjutus, null-arvojen yhdistämisoperaattori, mallimerkkijonot, purkusijoitus, levityssyntaksi, dynaamiset tuonnit ja ES-moduulit ovat tuettuja. Myös JSX on tuettu, mikä auttaa tutkimaan React-komponenttia, jonka JSX:ää ei ole muunnettu pois koonnissa. Koska työn tekee Prettier, tulos noudattaa yhtenäisiä käytäntöjä, vaikka työkalun asetukset voivat erota oman editorisi asetuksista.
Muotoilun rajat
Muotoilu ei peruuta koontivaiheen muunnoksia. Muuttuja nimeltä n pysyy n:nä, vaikka sen alkuperäinen nimi olisi ollut remainingRetries. Yhdistetyt moduulit jäävät annettuun koontitiedostoon, eikä poistettuja kommentteja voi päätellä luotettavasti. Alkuperäinen koodivarasto tai lähdekartta voi auttaa taustatietojen palauttamisessa tämän työkalun ulkopuolella. Tarkoituksella vaikeaselkoistettu koodi pysyy sellaisena muotoilun jälkeen: koodatut merkkijonot, keinotekoiset haarat ja harhaanjohtavat nimet voivat yhä peittää merkityksen. Käytä tulosta tutkimisen apuna ja testaa kaikki muutokset varsinaisessa projektissa.
Usein kysytyt kysymykset
Voiko tällä muotoilla webpackin tai Viten koontitiedoston?
Kyllä. Tuettua JavaScriptiä sisältävän koontitiedoston voi muotoilla liittämällä sen sisällön tai avaamalla paikallisen tiedoston. Tulos säilyttää yhdistetyn koodin eikä rakenna erillisiä lähdemoduuleja uudelleen. Suuret koontitiedostot voivat hidastaa tai jumittaa selaimen, joten tutki mahdollisuuksien mukaan pienempää kokonaista osiota.
Purkaako työkalu JavaScriptin vaikeaselkoistamisen?
Se voi muotoilla vaikeaselkoistetun tiedoston tuettua JavaScript-syntaksia, mutta ei peruuta vaikeaselkoistamista. Koodatut merkkijonot, keinotekoinen ohjausvirta ja tarkoituksella harhaanjohtavat nimet jäävät ennalleen. Sisennys voi auttaa rakenteiden tutkimisessa, mutta luettava asettelu ei yksin osoita, mitä komentosarja tekee tai voiko siihen luottaa.
Voiko muotoilu rikkoa koodini?
Muotoilijan tavoitteena on säilyttää JavaScriptin toiminta ja yhtenäistää tyyli. Se voi muuttaa välimerkkejä, lainausmerkkejä ja asettelua, joten tulos ei ole tavuntarkka kopio. Säilytä alkuperäinen, tarkista tulos ja suorita projektin testit ennen muokatun tai muotoillun koontitiedoston käyttämistä tuotannossa.