Удахните ваздух у АирБнБ-ов ЈаваСцрипт Стиле Гуиде

Нико не креће у писање ружног, недоследно стилизованог кода. То се једноставно догоди.

Чак и као једини програмер на пројекту, што више времена пролази и што више кода откачите, теже је одржавати доследан стил кода.

Због тога вам је потребан водич за стил.

Из прве руке сам искусио колико још тимова може постићи након усвајања водича за стил.

Више вам није потребно да свакодневно позивате на мало просуђивања стила. Само се консултујте са водичем за стил.

А када саиграч треба да одржи ваш код, то је чист код који могу да прочитају и разумеју.

Усвајање водича за стил је једна од најлакших ствари које можете учинити да побољшате одрживост кода - што на крају повећава продуктивност вашег тима. Па истражимо најпопуларнији начин за то.

Унесите АирБнБ + ЕСЛинт

ЈаваСцрипт екосистем нуди широк спектар алата и водича за стил. Ово не би требало никога да изненади. са ЈаваСцрипт-ом смо очекивали широк спектар свега.

Али како екосистем сазрева, искусни програмери почињу да чезну за „стандардним начином“ обављања ствари које нуде учвршћени екосистеми.

Наравно, добродошли сте да проведете неколико дана истражујући ЈаваСцрипт екосистем и упоређујући различите алате, али покушаћу вам уштедети мало времена : ЕСЛинт је најпопуларнији ЈаваСцрипт алат за повезивање, а АирБнБ-ов водич за стил је најчешће коришћена стил водич.

За више детаља о додавању ЕСЛинт-а вашем пројекту на овој вези.

Једном када то уклоните на квадрат, можете да конфигуришете свој пројекат тако да примењује АирБнБ-ов водич кроз стил инсталирањем њиховог нпм пакета:

npm install --save-dev eslint-config-airbnb

Додајте следећи ред у своју .еслинтрц датотеку

"extends": "airbnb"

И воила! Ваш код сада подлеже правилима најпопуларнијег водича за стил ЈаваСцрипт-а. Срећно кодирање!

Стандарди су прецењени

Иако се слажем са већином правила у водичу за стил, ево листе замена које сам саставио. Ево како изгледају датотеке .еслинтрц у основним директоријумима пројеката:

Дозволите ми да детаљно објасним образложење сваке од ових прилагодби.

Удубљење

Картице ВС свемирски рат могу потенцијално покварити пријатељства, а можда чак и саботирати романтичне везе.

Више волим да увлачим размак у коду, иако велика већина конфигурација више воли увлачење од 2.

Моје образложење је да вам, како бисте написали чисти код, већа удубљења дају бољи визуелни приказ колико је дубоко угнежђење у вашим функцијама и колико различитих грана имате.

Дефинитивно не бисте требали гнездити код дубље од 3 или 4 слоја унутар ЈаваСцрипт датотеке (то је мирис кода). Дакле, постојање 4 размака нуди вам бољу читљивост, а истовремено задржавате друга правила, попут држања кода унутар ограничења од 80 или 120 знакова по линији.

Такође, увлачење је једно од правила које удише више „ваздуха“ у АирБнБ-ов задати водич за стил. Као резултат, ваш код се не гужва на левој страни уређивача толико лоше.

Размак

Ово је вероватно највеће одступање од стандарда. Мрзим пренатрпани код. Код сам почео да пишем са додатним размаком пре више од две године и никада се нисам освртао.

Па шта та правила значе? Па, погледајте следећи код. Технички поштује правила службеног водича за стил компаније АирБнБ.

Знам, помало је збуњујуће. Покушао сам да тражим функцију средње сложености из једне од мојих база кода, али морао сам да је замутим, па немојте покушавати да разумете логику која стоји иза кода (јер је нема). Само покушајте да је прочитате. Покушајте да се фокусирате, на пример, на променљиве које се користе на више места, када се параметри прослеђују функцијама и где су позиви функција.

Сада погледајте исти код, али са примењеним додатним правилима за размак:

Не кажем да је сада врло читљив, али можете лакше идентификовати где су параметри послани функцијама - посебно око карираних функција.

Такође проверите разлику између увлачења 2 и 4 размака у два примера.

У почетку ове технике можда не изгледају као велико побољшање. Охрабрујем вас да покушате. Мислим да ћете брзо искусити какву то разлику чини.

Куоте варс

Иако су прве две категорије имале неке јасне аргументе, морам рећи да је одлука о појединачном и двоструком наводнику крајње субјективна.

Моја склоност двоструким наводницима вероватно потиче из пуно рада са Реацт-ом, где мешате ЈаваСцрипт са ЈСКС ознакама. Будући да је ЈСКС ближи ХТМЛ-у, тенденција је додавање атрибута између двоструких наводника. Тако сам почео да користим двоструке наводнике за све, само ради доследности.

Приметио сам да је много већа вероватноћа да ћете морати да напишете један наводник у низу енглеског текста него двоструки наводник („Овде сам“, „Не ради то“). Дакле, двоструки наводници би у овим случајевима могли бити погоднији.

Аранжман кода

Званични водич за стил АирБнБ-а има правило „но-усе-бефоре-дефине“, које доноси грешку ако покушате да користите нешто пре него што то дефинишете. Ово је добро правило - посебно за променљиве - јер се не бисте требали ослањати на дизање и требали бисте имати на уму проблем временске мртве зоне када користите лет анд цонст.

Више волим да дозволим да се функције користе пре него што се дефинишу. Разлог је једноставан: најчешће ћете своје функције раставити на мање подфункције. Међутим, правило „но-усе-бефоре-дефине“ ће вам рећи да ове под-функције ставите испред оригиналне функције.

Али ваше подфункције су ту да апстрахују делове алгоритма. Не би вас сметали када отворите датотеку која садржи вашу функцију највишег нивоа , а коју користите изван датотеке.

Ово је наравно дискутабилно. Али то утиче на отклањање грешака. Када прелазите преко неког кода и нађете позив другој функцији, идеално би било да будете у могућности да погледате испод њега, или - у најгорем случају - померите се кроз неколико подфункција и пронађите оно што тражите.

Ово, у комбинацији са АирБнБ-овом изјавом функције против израза функцијеправило,може вам дати слободу да структурирате своје модуле или библиотеке функција како желите, истовремено осигуравајући да случајно не позовете неиницијализовану функцију.

Цонст овер лет

Ево још једног малог одступања од водича за стил. У мојој конфигурацији можете приметити:

"prefer-const": 1

У конфигурацији АирБнБ ово је постављено на 2, што значи грешку , док 1 значи упозорење .

Ако не разумете зашто бисте више волели цонст него лет, више о томе можете прочитати овде и овде.

У вези са мојим одступањем, више волим упозорење, јер постоје ситуације у којима не мењате додељивање променљиве, али мењате пуно њеног садржаја.

Погледајте овај код:

Правила ће вам рећи да је то тачно - хеш треба да буде цонст јер се не додељује поново. Али ово ми никада није имало смисла. Требао бих бити свестан да се унутар хеша догађа велика промена .

Дакле, користићу лет да сигнализирам чињеницу да је променљива подложна променама. цонст и лет би требало да дају више значења вашим променљивим и не би требало да сакривају истину на било који начин.

Сложеност кода

Можете цикломатично сложити код да бисте израчунали сложеност сваке од ваших функција.

Одлучивање о максималном нивоу сложености је незгодно. У идеалном случају требало би да буде што је могуће ниже, што значи да ваше функције треба да имају највише 1 или 2 могућности гранања.

Има смисла имати тај број што је могуће нижи из перспективе поновне употребе и тестирања кода. Али постоје тренуци када је теже разбити функције. Због тога комплексност видим више као упозорење, него као грешку.

Овде је најважније ограничити број функција које достижу ту максималну границу сложености. Чак и у кодној бази средње величине, не бих волео да видим више од 10 функција које крше ово правило. Зато сам изабрао максималну вредност 5, како бих нагласио те функције. Циљаћу ове функције кад будем имао времена за рефакторирање.

Комплексност се може решити на више начина. Рефакторирање у мање функције је очигледно. Друга опција је претварање ваших наредби пребацивања у задатке мапирања.

Имали смо неколико дебата у нашем тиму и на крају смо користили 5 као референтну вредност за правило максималне сложености. Али у неким случајевима идемо на 4, само да бисмо били сигурни да пишемо чист и једноставан код.

Белешка о Реацт-у

Будући да пуно радим са Реацт-ом, а конфигурација АирБнБ такође садржи позамашан број правила у тој области, желела сам да овде укључим и неке своје преференције.

Главни циљ мојих поништавања Реацт-а је ограничити разлику између редовних ЈаваСцрипт модула и Реацт компоненти, као и између ЈаваСцрипт кода и ЈСКС-а. Због тога бирам слично увлачење и употребу двоструких наводника за све ЈСКС атрибуте. И зато радије остављам све своје датотеке са екстензијом .јс.

Коначно, у односу на класу у односу на фабричке компоненте, више волим друге. У овом тренутку не видим никакву предност коришћења наставе. Могу да напишем будући пост који ће проширити питање зашто се тако осећам.

То је то! Надам се да сте уживали читајући ово. Поздрављам ваше повратне информације у наставку.

Ако вам се свидео чланак, кликните на зелено срце испод и знаћу да мој труд није узалудан.