દરેક ડેવલપમેન્ટ ટીમ પાસે આવી એક વાર્તા હોય છે. એક pull request અડધા દિવસ સુધી ખુલ્લી રહે છે. એટલા માટે નહીં કે લોજિક ખોટું છે અથવા API કોન્ટ્રાક્ટ બદલાયો છે, પરંતુ એટલા માટે કારણ કે બે રિવ્યુઅર્સ વચ્ચે આ બાબતે અસંમતિ છે કે object literals માં trailing commas હોવા જોઈએ કે નહીં. ચર્ચા લાંબી થતી જાય છે. કોઈ સ્ટાઇલ ગાઇડની લિંક પોસ્ટ કરે છે. બીજું કોઈ અલગ ગાઇડ સાથે તેનો વિરોધ કરે છે. જ્યારે કોડ merge થાય છે, ત્યાં સુધીમાં સામેલ દરેક વ્યક્તિ તે features ના context ગુમાવી ચૂકી હોય છે જે તેઓ ખરેખર બનાવી રહ્યા હતા.

આ વિવાદો મોંઘા પડે છે. તેઓ senior engineer ના કલાકોનો સમય બગાડે છે, સાથીદારો વચ્ચે અણબનાવ પેદા કરે છે, અને junior developers ને એવું માનવા માટે તૈયાર કરે છે કે software engineering એ મુખ્યત્વે semicolons પર દલીલો જીતવા વિશે છે. સૌથી ખરાબ વાત? પ્રોડક્ટને આનાથી કોઈ ફરક પડતો નથી. તમારા યુઝર્સ સ્પેસ અને ટેબ વચ્ચેનો તફાવત ક્યારેય નોંધશે નહીં. તેઓ એ bug નોટિસ કરશે જે તમે સુધાર્યો નથી કારણ કે તમે quote marks પર ચર્ચા કરવામાં વ્યસ્ત હતા.

Consistency મહત્વની છે. એવો codebase જે એવું લાગે કે તે એક જ વ્યક્તિ દ્વારા લખવામાં આવ્યો છે, તેને વાંચવો, રિવ્યુ કરવો અને debug કરવો સરળ છે. ભૂલ એ છે કે તે સુસંગતતાને હાથથી (manually) લાગુ કરવાનો પ્રયાસ કરવો.

કંટાળાજનક કામોને Automate કરો

આનો ઉકેલ સીધો છે. ફોર્મેટિંગમાંથી માનવીય નિર્ણય લેવાની પ્રક્રિયાને સંપૂર્ણપણે દૂર કરો. તે કામ એવા ટૂલ્સને સોંપી દો જેમને કોઈ અહંકાર નથી અને જે થાકતા નથી.

ત્રણ ટૂલ્સ આ કામ ચોકસાઈથી કરી શકે છે.

Prettier તમારા કોડને લે છે અને તેને આપમેળે reformat કરે છે. તે પરવાનગી માંગતું નથી. તમે line lengths, quote styles, અથવા લાંબા function signature ને લાઇનમાં કેવી રીતે તોડવું તે વિશે વિચારવાનું બંધ કરી દો છો. તમે ફાઇલ save કરો છો અને Prettier તેને consistent બનાવે છે.

ESLint એ સમસ્યાઓ સંભાળે છે જેને Prettier અડતું નથી. તે unused variables, unreachable code, React hooks માં ખૂટતી dependencies અને એવા patterns પકડે છે જે ભૂતકાળમાં bugs તરફ દોરી જાય છે. જ્યારે યોગ્ય રીતે configure કરવામાં આવે, ત્યારે તે formatting થી દૂર રહે છે અને વાસ્તવિક code quality પર ધ્યાન કેન્દ્રિત કરે છે.

Husky એક pre-commit hook ઇન્સ્ટોલ કરે છે જે automated checks પાસ ન થાય ત્યાં સુધી તમારા repository માં કંઈપણ પ્રવેશતા અટકાવે છે. તે તમારી Git pipeline ને suggestions box ને બદલે એક gatekeeper માં ફેરવી દે છે.

સાથે મળીને તેઓ એક મજબૂત લૂપ બનાવે છે. તમે સ્થાનિક રીતે (locally) તમારી ઈચ્છા મુજબ કોડ લખો છો. જ્યારે તમે commit કરો છો, ત્યારે આ ટૂલ્સ તેને સાફ અને ચેક કરે છે. ત્યાર પછી જ કોડ તમારા મશીન પરથી બહાર જાય છે.

આ ચોક્કસ Stack શા માટે કામ કરે છે

તમે ESLint ના નિયમોને હાથથી tune કરવામાં અઠવાડિયા વિતાવી શકો છો. પણ એ ઈચ્છાને રોકી રાખો. અહીં ધ્યેય style વિશે દલીલો કરવાનું બંધ કરવાનો છે, style guide curator તરીકે નવી full-time નોકરી બનાવવાનો નથી.

Prettier જાણીજોઈને opinionated બનાવવામાં આવ્યું છે. તે મર્યાદિત configuration options આપે છે કારણ કે દરેક option ભવિષ્યમાં દલીલનું કારણ બની શકે છે. તેના defaults યોગ્ય છે. થોડા overrides પસંદ કરો, તેને એકવાર લખી લો અને આગળ વધો.

ESLint જો પોતાની રીતે કામ કરવા દેવામાં આવે, તો તે code quality અને formatting rules (જેમ કે semicolon usage અને indent size) બંનેને લાગુ કરવાનો પ્રયાસ કરશે. તેનાથી Prettier સાથે friction પેદા થાય છે કારણ કે બંને ટૂલ્સ એક જ characters ને edit કરવાનો પ્રયાસ કરશે. eslint-config-prettier પેકેજ Prettier સાથે સંઘર્ષ કરતા તમામ ESLint rules ને disable કરીને આ સમસ્યાનો ઉકેલ લાવે છે. આ કામની વહેંચણી અત્યંત મહત્વપૂર્ણ છે. Prettier દેખાવ (cosmetics) સંભાળે છે, જ્યારે ESLint logic સંભાળે છે.

માત્ર continuous integration માં ચેક ચલાવવા એ ઘણું મોડું થઈ જાય છે. જ્યારે CI fail થાય છે, ત્યાં સુધીમાં તમે પહેલેથી જ અસ્તવ્યસ્ત કોડ commit કરી દીધો હોય છે, બીજા કામમાં switch થઈ ગયા હોવ છો અને કદાચ pull request પણ ખોલી દીધી હોય છે. તેને સુધારવા માટે ફરીથી commit, ફરીથી push અને ફરીથી રાહ જોવાનો સમય લાગે છે. Husky આ feedback loop ને સેકન્ડોમાં ઘટાડી દે છે. Lint-staged દરેક commit પર આખા repository ને scan કરવાને બદલે ફક્ત તમે બદલેલા files પર જ ટૂલ્સ ચલાવીને તેને ઝડપી બનાવે છે.

સ્ટેપ બાય સ્ટેપ સેટઅપ કરવું

નીચેનું સેટઅપ આધુનિક JavaScript અથવા React પ્રોજેક્ટ માટે છે, પરંતુ થોડા ફેરફારો સાથે આ પેટર્ન TypeScript, Vue અથવા Node માં પણ લાગુ કરી શકાય છે. દરેક સ્ટેપ તમારા project root પરથી ચલાવો.

બધું dev dependencies તરીકે ઇન્સ્ટોલ કરીને શરૂઆત કરો:

npm install -D prettier eslint husky lint-staged eslint-config-prettier