Ilmainen Koodin Muotoilija: Kaunista JavaScript, Python, HTML ja Paljon Muuta
Muotoile sekava koodi välittömästi oikealla sissenvedolla ja välistyksellä. Tukee yli 12 kieltä, kuten JavaScript, Python, HTML, CSS ja Java. Selainpohjainen, turvallinen ja ilmainen. Ei vaadi rekisteröitymistä.
Koodin Muotoilija
Muotoile koodisi yhdellä napsautuksella. Valitse kieli, liitä koodisi ja saa se muotoiltua oikein.
Käyttöohjeet:
- Valitse ohjelmointikielesi pudotusvalikosta.
- Liitä muotoilematon koodisi syöttöalueelle.
- Napsauta 'Muotoile Koodi' -painiketta.
- Kopioi muotoiltu tulos tulosalueelta.
Dokumentaatio
Mikä on koodinmuotoilija?
Koodinmuotoilija on työkalu, joka kirjoittaa lähdekoodin uudelleen yhdenmukaisella sisennyksellä, rivinvaihdoilla ja välilyönneillä muuttamatta koodin toimintaa. Tämä koodinmuotoilija toimii verkkoselaimessa. Se tukee 12 ohjelmointikieltä, kuten JavaScriptiä, Pythonia, HTML:ää ja CSS:ää.
Miten tämä koodinmuotoilija toimii
Työkalu käyttää kullekin kielelle erilaista sääntöjoukkoa. Mikään niistä ei muodosta koodista täydellistä jäsennyspuuta JSONia lukuun ottamatta.
- JSON jäsennetään selaimen sisäisellä JSON-jäsentimellä ja tulostetaan sitten uudelleen kahden välilyönnin sisennyksellä. Jos JSON on virheellinen, työkalu ilmoittaa virheestä eikä näytä tulostetta.
- JavaScript, TypeScript, Java, C, C++ ja C# käyttävät samaa muotoilijaa. Se käy koodin läpi merkki merkiltä ja seuraa aaltosulkeita, sulkeita ja puolipisteitä. Jokainen
{aloittaa uuden sisennetyn lohkon, ja jokainen}tai;päättää rivin. Kommentit ja lainausmerkkien sisällä olevat merkkijonot kopioidaan muuttamattomina. Tämä muotoilija ei lisää välilyöntejä operaattoreiden ympärille tai pilkkujen jälkeen, jos niitä ei alkuperäisessä koodissa ollut, vaan rakentaa uudelleen ainoastaan rivinvaihdot ja sisennyksen. - Python lukee kunkin rivin nykyisen sisennyksen ja rakentaa sen uudelleen käyttämällä neljää välilyöntiä tasoa kohti Python-kielen omien sisäkkäisyyssääntöjen mukaisesti. Se ei jaa pitkiä rivejä, lisää tyhjiä rivejä tai lisää välilyöntejä operaattoreiden ympärille, vaan ainoastaan yhdenmukaistaa kunkin rivin sisennystason.
- CSS poistaa ylimääräiset rivinvaihdot ja tyhjät välit ja lisää sitten rivinvaihdon jokaisen
{- ja;-merkin jälkeen sekä ennen jokaista}-merkkiä. - HTML ja XML lisäävät rivinvaihdon ja kahden välilyönnin sisennyksen jokaista sisäkkäisten tunnisteiden tasoa kohti ja tunnistavat tavalliset itsestään sulkeutuvat tunnisteet, kuten
<br>,<img>ja<input>. - SQL muuttaa ennalta määritetyn joukon avainsanoja, kuten
SELECT,FROM,WHERE,JOINjaORDER BY, suuraakkosiksi ja aloittaa uuden rivin ennen jokaista päälausetta.
Koska vain JSON-polku todella jäsentää syötteen, muut muotoilijat eivät havaitse syntaksivirheitä, kuten puuttuvaa suljetta tai sulkematonta merkkijonoa. Ne muotoilevat kaiken annetun tekstin uudelleen, vaikka se ei olisi suoritettavissa.
Tuetut kielet
| Kieli | Tyypillinen tiedostopääte | Sisennyksen leveys |
|---|---|---|
| JavaScript | .js | 2 välilyöntiä |
| TypeScript | .ts | 2 välilyöntiä |
| HTML | .html | 2 välilyöntiä |
| CSS | .css | 2 välilyöntiä |
| Python | .py | 4 välilyöntiä |
| Java | .java | 4 välilyöntiä |
| C | .c | 4 välilyöntiä |
| C++ | .cpp | 4 välilyöntiä |
| C# | .cs | 4 välilyöntiä |
| SQL | .sql | Rivinvaihdot lausekkeiden mukaan |
| JSON | .json | 2 välilyöntiä |
| XML | .xml | 2 välilyöntiä |
Koodin muotoilu
- Valitse ohjelmointikieli pudotusvalikosta.
- Liitä muotoilematon koodi syöttökenttään.
- Valitse ”Muotoile koodi”.
- Kopioi muotoiltu tulos tuloskentästä.
Muotoilu tapahtuu kokonaan selaimessa. Koodia ei koskaan lähetetä palvelimelle.
JavaScriptin muotoiluesimerkki
Ennen muotoilua:
1function add(a, b) {
2 if (a > 0) { return a + b; }
3 return 0;
4}
5Muotoilun jälkeen:
1function add(a, b) {
2 if (a > 0) {
3 return a + b;
4 }
5 return 0;
6}
7Muotoilija siirsi kohteen { } sisällä olevan koodin omalle sisennetylle rivilleen ja yhdenmukaisti sisennyksen kahdeksi välilyönniksi tasoa kohti. Se jätti kohteiden a > 0 ja a + b ympärillä olevat välit täsmälleen ennalleen, koska ne olivat jo valmiiksi olemassa.
Pythonin muotoiluesimerkki
Ennen muotoilua:
1def calculate_average(numbers):
2 if len(numbers) == 0:
3 return 0
4 total = sum(numbers)
5 return total / len(numbers)
6Muotoilun jälkeen:
1def calculate_average(numbers):
2 if len(numbers) == 0:
3 return 0
4 total = sum(numbers)
5 return total / len(numbers)
6Alkuperäisessä koodissa käytettiin kahta välilyöntiä sisennystasoa kohti. Muotoilija rakensi kunkin rivin sisennyksen uudelleen käyttäen neljää välilyöntiä tasoa kohti PEP 8:n, Pythonin virallisen tyylioppaan, mukaisesti. Se säilytti kaikki rivit samassa järjestyksessä eikä muuttanut rivien sisäisiä välilyöntejä.
Miksi koodin muotoilu on tärkeää
Epäyhtenäinen sisennys vaikeuttaa sen näkemistä, missä funktio, silmukka tai ehto päättyy. Usean henkilön muokkaamaan koodiin päätyy usein sekaisin sarkain- ja välilyöntisisennyksiä tai rivejä, jotka eivät kohdistu niihin lohkoihin, joihin ne kuuluvat. Muotoilijan käyttäminen antaa jokaiselle tiedostolle saman visuaalisen rakenteen, jolloin koodin silmäily nopeutuu ja väärään paikkaan joutunut sulje on helpompi havaita.
Rajoitukset
- Syötteen koko: Työkalu hyväksyy enintään 50 000 merkkiä koodia. Pidempi syöte hylätään virheilmoituksella ennen muotoilun aloittamista.
- Useimpien kielten syntaksintarkistus puuttuu: Vain JSON-syöte jäsennetään ja validoidaan. Muiden 11 kielen koodi muotoillaan sellaisenaan, vaikka siitä puuttuisi sulje tai siinä olisi sulkematon merkkijono. Tällöin tulos voi olla väärin sisennetty sen sijaan, että siitä ilmoitettaisiin virheenä.
- Operaattoreiden välityksiä ei muuteta: JavaScript-, TypeScript- ja C-perheen muotoilijat järjestävät uudelleen vain rivinvaihdot ja sisennyksen. Ne eivät lisää välilyöntiä merkkien
+,=tai!==ympärille eivätkä pilkun jälkeen, jos välilyöntiä ei alun perin ollut. - PHP:tä ei tueta: Tuettomän kielen valitseminen palauttaa koodin muuttumattomana.
Usein kysyttyä
Tarkistaako tämä työkalu koodini syntaksivirheiden varalta? Vain JSONin osalta. JSON-syöte jäsennetään, joten virheellinen JSON tuottaa virheilmoituksen. Muiden tuettujen kielten koodi muotoillaan tarkistamatta, onko sen syntaksi kelvollinen.
Lähettääkö se koodini palvelimelle? Ei. Muotoilu suoritetaan kokonaan selaimessa JavaScriptin avulla. Koodia ei ladata eikä tallenneta mihinkään.
Kuinka paljon koodia se voi enintään muotoilla? 50 000 merkkiä. Tätä suuremman määrän liittäminen tuottaa virheen ennen muotoilun aloittamista.
Lisääkö se puuttuvat välilyönnit operaattoreiden ympärille tai pilkkujen jälkeen? Ei JavaScriptin, TypeScriptin, Javan, C:n, C++:n eikä C#:n osalta. Nämä muotoilijat rakentavat uudelleen vain sisennyksen ja aaltosulkeiden sekä puolipisteiden ympärillä olevat rivinvaihdot; muun osan kustakin rivistä ne kopioivat sellaisena kuin se on kirjoitettu.
Millaista sisennystä se käyttää? Kaksi välilyöntiä JavaScriptissä, TypeScriptissä, HTML:ssä, CSS:ssä, JSONissa ja XML:ssä. Neljä välilyöntiä Pythonissa, Javassa, C:ssä, C++:ssa ja C#:ssa.
Miksi koodini näyttää muotoilun jälkeen lähes samalta? Jos syötteessä käytettiin jo yhdenmukaisia välilyöntejä ja yhtä suljetyyliä, muotoilija rakentaa pääasiassa sisennyksen uudelleen, joten muutos voi olla pieni. Se on hyödyllisin koodissa, jossa sisennykset vaihtelevat, tai koodissa, joka on tiivistetty hyvin harvoille riveille.