Recent am publicat un pachet pe npm: o bibliotecă de structuri de date și algoritmi implementată în JavaScript.

Scopul proiectului este de a-i ajuta pe ceilalți să învețe și să înțeleagă structurile de date și algoritmii dintr-o perspectivă JavaScript.

În loc să conțină doar fragmente de cod cu explicații însoțitoare, proiectul este menit să ofere unui cursant dornic un cod complet funcțional, cazuri bune de testare și un loc de joacă plin de exemple.

Dacă sunteți interesat, proiectul poate fi găsit pe npm aici.

Dar, mai degrabă decât să vorbesc despre proiectul în sine, despre ceea ce vreau să scriu astăzi sunt toate instrumentele îngrijite despre care am învățat și pe care le-am folosit în timpul creării proiectului.

Am lucrat la o mulțime de proiecte și demo-uri în ultimii șase ani, dar fiecare dintre ele este foarte vizibil doar „proiecte pentru animale de companie”. Ei nu au în nici un fel calitățile care îi vor face să pară profesioniști sau pregătiți pentru producție.

Ceea ce mi-am propus să creez era ceva ce putea fi considerat un pachet respectabil open-source. Pentru a face acest lucru, am decis că proiectul meu va avea nevoie de documentație adecvată, scule, scame, integrare continuă și teste unitare.

Mai jos sunt câteva dintre instrumentele pe care le-am folosit. Fiecare are un scop unic. M-am conectat la documentația pentru fiecare pachet, astfel încât și dvs. să puteți începe să utilizați aceste instrumente în proiectele dvs.

Notă: Acest articol presupune că sunteți deja familiarizați cu procesul de creare a unui pachet JavaScript simplu și publicarea acestuia pe npm.

Dacă nu, echipa npm are ceva o documentație excelentă pentru a începe care vă va ghida prin inițializarea unui proiect și pașii pentru publicare.

Deci sa începem.

Mai frumoasă

Prettier este un formatator de cod opinionat care vă formează automat codul. În loc să utilizați pur și simplu ESLint pentru a impune orice standarde de formatare la care a convenit echipa dvs., Prettier se poate ocupa de formatare pentru dvs.

Nu vă mai faceți griji cu privire la remedierea indentării și a lățimilor liniei! Utilizez acest lucru în mod special pentru JavaScript, dar poate gestiona multe limbi diferite.

Cele mai bune instrumente pentru a va ajuta sa va
Eșantionează JavaScript înainte și după rularea Prettier

Puteți consulta documentele Prettier aici: https://github.com/prettier/prettier

stylelint

stylelint vă formează automat CSS-ul pentru dvs. Similar cu Prettier, acest instrument vă ajută să vă păstrați CSS curat în timp ce aveți grijă de greutatea ridicată pentru dvs.

1611549009 216 Cele mai bune instrumente pentru a va ajuta sa va
Eșantion de ieșire de la rularea stylelint

Puteți consulta documentele stylelint aici: https://github.com/stylelint/stylelint

ESLint

ESLint gestionează toate celelalte instrumente JavaScript pentru detectarea erorilor de sintaxă și aplicarea celor mai bune practici.

1611549009 791 Cele mai bune instrumente pentru a va ajuta sa va
Eșantion de ieșire din linting cu ESLint în mediul lor de joacă

Puteți consulta documentele ESLint aici: https://eslint.org/

Angajat

Commitizen este un instrument CLI care vă ajută să scrieți mesajele de confirmare. Acesta generează mesajul de confirmare pentru dvs. pe baza datelor introduse și se asigură că mesajul de confirmare rezultat respectă standardul Convențional de angajamente.

1611549010 262 Cele mai bune instrumente pentru a va ajuta sa va
Interfața liniei de comandă Commitizen atunci când creați un nou commit

Puteți consulta documentele Commitizen aici: https://github.com/commitizen/cz-cli

commitlint

commitlint verifică dacă mesajele dvs. de confirmare respectă standardul convențional de angajamente. Atâta timp cât utilizați Commitizen pentru a vă crea mesajele de confirmare, nu veți avea probleme.

Avantajul real al utilizării commitlint este de a prinde comitetele pe care dezvoltatorii le-au scris singure și care nu respectă standardele dvs. de formatare.

Cele mai bune instrumente pentru a va ajuta sa va.svg
commitlint demo pentru a afișa posibile mesaje de eroare

Puteți consulta documentele commitlint aici: https://github.com/conventional-changelog/commitlint

cu scame

lint-staged rulează linters împotriva codului pe care încercați să îl comiteți. Aici puteți valida faptul că codul dvs. depășește standardele aplicate de Prettier, stylelint și ESLint.

Cele mai bune instrumente pentru a va ajuta sa va
exemplu în fază scame care rulează ESLint pe codul de înregistrare

Puteți consulta documentele cu scame de scame aici: https://github.com/okonet/lint-staged

Husky

Husky facilitează rularea cârligelor Git.

Toate instrumentele menționate anterior pot fi rulate prin Husky on Git hooks pre-commit sau commit-msg, deci aici se întâmplă magia.

De exemplu, execut teste de scame și teste unitare în timpul pre-commit hook și rulez commitlint în timpul commit-msg cârlig. Asta înseamnă că atunci când încerc să verific codul meu, Husky face toate validările pentru a mă asigura că respect toate regulile pe care le aplic în proiectul meu.

1611549012 908 Cele mai bune instrumente pentru a va ajuta sa va
Exemplu de configurație Husky care rulează pe cârligele pre-commit și commit-msg Git

Puteți consulta documentele Husky aici: https://github.com/typicode/husky

Rulează

Pachet este un pachet de module pentru JavaScript. Vă ia tot codul sursă și îl include în fișierele pe care doriți să le distribuiți ca parte a pachetului.

Înțelepciunea convențională pare să fie dacă construiți o aplicație web, ar trebui să utilizați webpack. Și dacă construiți o bibliotecă, ar trebui să utilizați Rollup.

În cazul meu, construiam o bibliotecă de structuri de date și algoritmi, așa că am ales să folosesc Rollup. Un beneficiu pare a fi rezultatul generat de pachet este semnificativ mai mic decât rezultatele webpack.

1611549012 604 Cele mai bune instrumente pentru a va ajuta sa va
O configurație de pachet foarte minimă care creează un pachet de ieșire în formatul CommonJS

Puteți consulta documentele Rollup aici: https://rollupjs.org/guide/en/

Versiune standard

Versiunea standard vă ajută să automatizați versiunea și generarea de registre de schimbări.

Anterior, am menționat instrumente precum Commitizen și commitlint pentru formatarea comitetelor dvs. în conformitate cu standardul Convențional Commits. De ce, vă puteți întreba, este de ajutor?

Răspunsul, cel puțin parțial, este că, utilizând un format consistent de mesaj de validare, puteți utiliza instrumente care sunt capabile să înțeleagă ce fel de modificări fac comitetele dvs.

De exemplu, remediați erori? Adăugați funcții noi? Efectuați schimbări de rupere pe care ar trebui să le cunoască oamenii care vă consumă biblioteca? Versiunea standard este capabilă să vă înțeleagă mesajele de confirmare și apoi să vă genereze un jurnal de schimbări.

De asemenea, este capabil să lovească în mod inteligent versiunea pachetului dvs. în conformitate cu standardul de versiune semantică (major, minor, patch).

1611549012 519 Cele mai bune instrumente pentru a va ajuta sa va
Exemplu de script de pre-lansare a versiunii standard care rulează înainte ca versiunea să se lovească

Puteți consulta documentele despre versiunea standard aici: https://github.com/conventional-changelog/standard-version

Travis CI

Travis CI este un instrument de integrare continuă (CI) care poate fi integrat cu GitHub, unde codul meu este găzduit.

Instrumentele CI sunt importante deoarece permit confirmările dvs. să fie testate din nou înainte de a le îmbina în filiala dvs. principală. Ați putea argumenta folosind Travis CI și un instrument precum Husky duplică funcționalitatea, dar este important să rețineți că chiar și Husky poate fi ocolit prin trecerea unui --no-verify semnalizați comanda de comitere.

Prin GitHub, puteți specifica faptul că lucrările dvs. Travis CI trebuie să fie transmise înainte ca codul să poată fi îmbinat, deci acest lucru adaugă încă un strat de protecție și verifică faptul că numai codul de trecere îl face în repo.

1611549013 494 Cele mai bune instrumente pentru a va ajuta sa va
Ieșire Travis CI dintr-o versiune de trecere

Puteți consulta documentele Travis CI aici: https://docs.travis-ci.com/

Codecov

Codecov este un alt instrument CI care analizează acoperirea codului proiectului dvs.

Scriu teste unitare JavaScript folosind Jest. O parte din jobul meu Travis CI îmi execută suita de testare și se asigură că toate trec. De asemenea, canalizează ieșirea de acoperire a codului către Codecov, care apoi poate verifica dacă acoperirea codului meu alunecă sau rămâne ridicată. De asemenea, poate fi utilizat împreună cu insignele GitHub, despre care vom vorbi în continuare.

1611549013 798 Cele mai bune instrumente pentru a va ajuta sa va
Tabloul de bord Codecov (uitați-vă la acea frumoasă acoperire de cod 100%!)

Puteți consulta documentele Codecov aici: https://docs.codecov.io/docs

Insigne

V-ați uitat vreodată la un proiect în GitHub și ați văzut insigne mici în partea de sus a README? Lucruri cum ar fi dacă versiunea trece, care este acoperirea codului și care este cea mai recentă versiune a pachetului npm, toate pot fi afișate folosind ecusoane.

Sunt relativ simple de adăugat, dar cred că adaugă o notă foarte frumoasă oricărui proiect. Shields.io este o resursă excelentă pentru a găsi o mulțime de ecusoane diferite care pot fi adăugate la proiectul dvs. și vă ajută să generați reducere pentru a le include în README.

1611549014 159 Cele mai bune instrumente pentru a va ajuta sa va
Insigne GitHub pentru pachetul meu js-data-structures-and-algorithms npm

Puteți consulta documentele Shields.io aici: https://shields.io/

Documentație

Puțină documentație merge mult. În proiectul meu, am adăugat un README, CHANGELOG, ghiduri de contribuție, cod de conduită și o licență.

Aceste documente vă ajută oamenii să știe care este proiectul dvs., cum să îl utilizați, ce modificări au fost făcute cu fiecare versiune, cum să contribuie dacă doresc să se implice, cum se așteaptă să interacționeze cu ceilalți membri ai comunității, și care sunt termenii legali.

1611549014 656 Cele mai bune instrumente pentru a va ajuta sa va
CHANGELOG pentru pachetul meu js-data-structures-and-algorithms npm

Puteți consulta documentația pentru proiectul meu aici: https://github.com/thawkin3/js-data-structures-and-algorithms

Șabloane GitHub

Știați că puteți crea șabloane în GitHub pentru lucruri precum rapoarte de erori, cereri de caracteristici și solicitări pull? Crearea acestor șabloane face să fie clar, de exemplu, ce informații ar trebui să ofere cineva atunci când înregistrează o eroare.

1611549014 196 Cele mai bune instrumente pentru a va ajuta sa va
Șabloane GitHub pentru rapoarte de erori și cereri de caracteristici

Puteți consulta documentele despre șabloanele GitHub aici: https://help.github.com/en/github/building-a-strong-community/about-issue-and-pull-request-templates

Închidere

Asta e. Când am arătat acest proiect unor prieteni pentru prima dată, unul dintre ei a comentat: „Oh, supa mea de instrumente de construcție!” Și poate că are dreptate. Asta este mult. Dar cred cu tărie că merită să adăugați toate instrumentele de mai sus. Vă ajută să automatizați multe lucruri și vă menține baza de coduri curată și în stare de funcționare.

Cea mai mare soluție de la construirea acestui proiect este că configurarea tuturor instrumentelor de mai sus nu este atât de descurajantă pe cât pare. Fiecare dintre aceste instrumente are o documentație bună și ghiduri utile pentru a începe. Nu a fost chiar așa de rău și ar trebui să vă simțiți încrezători în adoptarea unora (dacă nu a tuturor) acestor instrumente în proiectul dvs.

Codificare fericită!