Yksi helppo salaisuus koodin tekemisestä automaattisesti luettavammaksi

(Ryan Chong) (2. joulukuuta 2020)

Välilehdet tai välilyönnit?

Tässä on kysymys. Kehittäjät ovat erittäin mielikuvituksellisia. Joten kun on aika päättää jotain, joka näyttää triviaalilta, kuten sarkainten tai välilyöntien käyttö, se voi nopeasti kehittyä liekkisodiksi. Minun leirini vs. leirisi.

Mutta kehittäjät eivät vain riitä. Vanhoina aikoina saamme usein paljon kommentteja koodin muotoilusta koodin tarkistusprosessin aikana.

Saamme esimerkiksi kommentteja:

  • epäyhtenäinen sisennys
  • Yksittäisten ja kaksoislainausten epäyhtenäinen käyttö
  • Epäyhtenäinen puolipisteen lisäys
  • Välilehtien ja välilyöntien epäyhtenäinen käyttö

Onneksi kehittäjät ovat myös erittäin tehokkaita ihmisiä. Ei kestänyt kauan, ennen kuin he päättivät, että päivien viettäminen keskustelemalla siitä, mikä konventti valitsee toisen, ei ole paras ajankäyttö.

Ja näin ollen he keksivät ratkaisun: Koodin muotoilija .

Näin se toimii. Määritä ensin vakiokonfiguraatio. Jaa sitten vakiokonfiguraatio kaikkien saman projektin parissa työskentelevien kanssa. Koodin muotoilija muotoilee koodisi automaattisesti kyseisen kokoonpanon perusteella, ennen kuin se saapuu koodivarastoon. Tämän seurauksena kaikkien koodit ovat johdonmukaisia ​​alkuperäisestä muotoilustaan ​​riippumatta.

Koodin muotoilussa on monia makuja, mutta lopulta syntyy standardi . Kauniimpi pidetään monien mielestä vakiona FE-kehityksessä. Selitän, miten se toimii hetkessä.

Mutta ensin puhutaan Prettierin asentamisesta.

Prettierin asentaminen

Jos et ole, siirry osoitteeseen suosikkikoodieditori ja asenna laajennus. Käytämme Visual Studio -koodia (VS-koodi). Napsauta VS-koodissa yksinkertaisesti laajennuspaneelia ja etsi ”Kaunis”. Näet jotain alla olevan kuvakaappauksen kaltaista.

Kauniimman kokoonpanon määrittäminen

Seuraavaksi meidän on määriteltävä kauniimpi kokoonpano. Tämän tarkoituksena on kertoa kauniimpi muotoilla koodi sarkaimilla tai välilyönneillä, yhden lainauksen tai kaksoislainausten avulla. Löydät täydellisen luettelon määrityksistä täältä .

Kauniimpi kokoonpanomme

Ota sitten JavaScript-muotoilu käyttöön VS-koodissa settings.json ja valitse myös alustusajankohta.

Asetuksemme.json

Vaihtoehtoisesti voit myös avata graafisen käyttöliittymän version (Preference> Open User Settings) ja vaihtaa asiaankuuluvat asetukset manuaalisesti.

GUI-asetuksemme

Kuinka kauniimpi toimii

Harkitse esimerkkiä alla. Ensimmäisessä kuvakaappauksessa näkyy pala javascript-koodia sen muotoilemattomassa versiossa. On vaikea selvittää, mistä koodi alkaa ja päättyy.

Nyt kun käytämme koodin muotoilijaa, kuten Prettier, meidän on vain tallennettava se ja kaikki on prettified hienosti näin:

alustettu koodi
Jälkeen: Alustettu koodi

Yhteenveto

Koodin muotoileminen manuaalisesti ei ole paras ajankäyttö. Valitse yksi standardi ja ota sitten standardi käyttöön kokoonpanona. Lopuksi, et viettää ylimääräistä aikaa koodimuotojen kommentointiin seuraavassa koodiarvostelussa.

TeamSpirit palkkaa vanhempia / nuorempia ohjelmistoinsinöörejä Singaporeen. Jos olet kiinnostunut työskentelemään ystävällisten kollegoiden kanssa, jotka arvostavat ehdotuksiasi ja antavat sinulle paljon itsenäisyyttä, lähetä ansioluettelosi osoitteeseen recruit.sg @ teampirit.com