Un secret ușor pentru a vă face codul automat mai ușor de citit

(Ryan Chong) (2 dec. 2020)

Filele sau spațiile?

Aceasta este întrebarea. Dezvoltatorii sunt extrem de avizați. Astfel, când va veni momentul să decidem despre ceva care pare banal, cum ar fi utilizarea unor file sau spații, ar putea evolua rapid în războaie de flacără. Tabăra mea față de tabăra ta.

Dar nu acesta este singurul lucru pe care dezvoltatorii îl susțin. În trecut, primim adesea o mulțime de comentarii despre formatarea codului nostru în timpul procesului de examinare a codului.

De exemplu, vom primi comentarii despre:

  • Indentare incoerentă
  • Utilizarea incoerentă a ghilimelelor simple și duble
  • Inserarea incoerentă a punct și virgulă
  • Utilizarea incoerentă a filelor față de spații

Din fericire, dezvoltatorii sunt, de asemenea, oameni foarte eficienți. Nu a durat mult până când au decis că petrecerea zilei certându-se despre ce convenție îl depășește pe celălalt nu este cea mai bună utilizare a timpului.

Și astfel, au venit cu o soluție: Formatator de cod .

Iată cum funcționează. Mai întâi, definiți o configurație standard. Apoi, împărtășiți configurația standard tuturor celor care lucrează la același proiect. Formatatorul de cod vă va forma automat codul pe baza acelei configurații înainte de a ajunge la depozitul de coduri. Prin urmare, codul tuturor va fi consecvent, indiferent de formatarea originală.

Există multe variante de formatare a codului, dar în cele din urmă apare un standard . Prettier este considerat pe scară largă de mulți drept standardul în dezvoltarea FE. Voi explica cum funcționează într-o clipă.

Dar mai întâi, să vorbim despre instalarea Prettier.

Instalarea Prettier

Dacă nu ați făcut-o, mergeți la editorul de cod preferat și instalați extensia. Folosim Cod Visual Studio (Cod VS). În VS Code, pur și simplu faceți clic pe panoul de extensii și căutați „Prettier”. Veți vedea ceva similar cu captura de ecran de mai jos.

Configurarea configurației mai frumoase

În continuare, trebuie să definim configurația mai frumoasă. Aceasta este pentru a spune mai frumos să formatezi codul folosind file sau spații, ghilimele simple sau ghilimele duble și așa mai departe. Puteți găsi lista completă a configurației aici .

Configurația noastră mai frumoasă

Apoi, în settings.json, activați formatatorul javascript și alegeți, de asemenea, când să formatați.

Setările noastre.json

Alternativ, puteți deschide și versiunea GUI (Preferință> Deschidere setări utilizator) și comuta manual setările relevante.

Setările noastre GUI

Cum funcționează mai frumos

Luați în considerare exemplul de mai jos. Prima captură de ecran arată o bucată de cod javascript în versiunea sa neformatată. Este greu să ne dăm seama de unde începe și se termină codul.

Acum, cu formatatorul de cod, cum ar fi Prettier, tot ce trebuie să facem este să-l salvați și totul va fi prettified frumos așa:

cod formatat
După: Cod formatat

Rezumat

Formatarea manuală a codului nu este cea mai bună utilizare a timpului. Așezați-vă pe un standard, apoi implementați acel standard ca configurație. În cele din urmă, nu veți petrece timp suplimentar comentând formatele de cod în următoarea dvs. examinare a codului.

TeamSpirit angajează ingineri software senior / junior în Singapore. Dacă sunteți interesat să lucrați cu colegi prietenoși care apreciază sugestiile dvs. și vă oferă multă autonomie, vă rugăm să trimiteți CV-ul dvs. la recruit.sg @ teamspirit.com