de Artem Sapegin

De ce roboții ar trebui să ne formateze codul pentru noi

De ce robotii ar trebui sa ne formateze codul pentru
Fotografie de a ta cu adevărat pe Unsplash

Obișnuiam să cred că un stil de cod personal este un lucru bun pentru un programator. Arată că sunteți un dezvoltator matur care știe cum ar trebui să arate un cod bun.

Profesorii mei de facultate mi-au spus că știau când unii dintre colegii mei de clasă au folosit codul meu în munca lor din cauza stilului de cod diferit. Acum cred că a fost pentru că codul meu a fost cel puțin cumva formatat și al tuturor celorlalți a fost o mizerie.

De atunci am petrecut mult timp argumentând stilul de cod și configurând instrumente pentru a-l aplica. Este timpul pentru o schimbare.

Câteva exemple

După ce ați citit Piatra programatorilor Am pus paranteze astfel mult timp:

if (food === 'pizza'){    alert('Pizza ;-)');  }else{      alert('Not pizza ;-(');}

Dar apoi mi-am dat seama că pot fi singurul care a făcut acest lucru în comunitatea front-end. Toți ceilalți folosesc acest stil:

if (food === 'pizza') {    alert('Pizza ;-)');  } else {    alert('Not pizza ;-(');}

Sau asta:

if (food === 'pizza') {    alert('Pizza ;-)');  }else {      alert('Not pizza ;-(');}

Așa că mi-am schimbat stilul în ultimul.

Îmi place foarte mult acest stil pentru înlănțuire:

function foo(items) {  return items    .filter(item => item.checked)    .map(item => item.value)  ;}

Văd aceleași beneficii de refactorizare ca și pentru virgule finale:

const food = [  'pizza',  'burger',  'pasta',]

Dar probabil sunt și mai singur cu acest stil decât cu bretele. Nimeni nu mi-ar trimite vreodată cod pentru revizuire cu acest stil, nici un linter nu îl poate aplica. Așa că trebuie să încetez să-l folosesc și pentru a fi mai aproape de lumea reală.

Există un alt lucru pe care nimeni altcineva nu îl face în afară de mine. Pun întotdeauna două spații înainte de comentariul de la sfârșitul rândului:

const volume = 200;  // ml

Am crezut că îmbunătățește lizibilitatea. Dar de fapt face ca baza de cod să fie inconsistentă, deoarece alți dezvoltatori pun doar un spațiu.

Ce fac dezvoltatorii JavaScript

Din păcate, JavaScript nu are un stil de cod oficial. Sunt cateva stiluri de cod populare ca Airbnb sau Standard. Le-ați putea folosi pentru a vă face codul să pară familiar altor dezvoltatori.

Ai putea folosi ESLint pentru a aplica stilul de cod și chiar codul de autoformat în unele cazuri. Dar nu va face baza codului dvs. 100% consecventă. ESLint cu configurația Airbnb ar normaliza doar primul meu exemplu și ar permite inconsecvența în celelalte două exemple.

Ce ar trebui să facă dezvoltatorii JavaScript

Unele limbi au stiluri și instrumente de cod stricte pentru formatarea codului. Așadar, dezvoltatorii nu pierd timpul argumentând stilul codului. Uita-te la Refmt pentru Rațiune și Rustfmt pentru Rust.

Se pare că JavaScript în cele din urmă are o soluție la această problemă. Un nou instrument numit Mai frumoasă vă va reformata codul folosind propriile reguli. Acesta ignoră complet modul în care a fost scris codul în primul rând.

Hai încearcă Prettier pe exemplele mele:

if (food === 'pizza') {  alert('Pizza ;-)');} else {  alert('Not pizza ;-(');}function foo(items) {  return items.filter(item => item.checked).map(item => item.value);}const volume = 200; // ml

Nu poți fi de acord cu acest stil. De exemplu, nu-mi place else plasarea și scrierea lanțurilor funcționale într-un singur rând este discutabilă. Dar văd beneficii imense în adoptarea lui Prettier:

  • Aproape nici o decizie de luat – Prettier are puține opțiuni.
  • Nu vă certați despre anumite reguli dacă lucrați în echipă.
  • Nu este nevoie să aflați stilul de cod al proiectului pentru colaboratori.
  • Nu este nevoie să remediați problemele de stil raportate de ESLint.
  • Este posibil să configurați autoformatul la salvarea fișierelor.

Concluzie

Prettier a fost deja adoptat de unele proiecte populare precum React și Babel. Și încep să o fac converti toate proiectele mele de la stilul meu de cod personalizat la Prettier. Îl voi recomanda în locul stilului de cod Airbnb.

La început am avut o mulțime de momente „Uf, asta e urât” cu Prettier. Dar când cred că ar trebui, de exemplu, să reformatez manual codul JSX dintr-o singură linie în mai multe linii atunci când adaug un alt element și nu se potrivește pe o singură linie – îmi dau seama că merită total.

De ce robotii ar trebui sa ne formateze codul pentru
Prettier vă formatează codul atunci când salvați un fișier

Citiți cum să înființează Prettier în proiectul tău.

PS Aruncă o privire asupra noului meu instrument care va simplifica adăugarea ESLint, Prettier și alte instrumente la proiectul dvs., precum și păstrarea configurațiilor lor sincronizate.

Abonați-vă la newsletter-ul meu: https://tinyletter.com/sapegin