प्रत्येक डेव्हलपमेंट टीमची अशीच एक गोष्ट असते. एक पुल रिक्वेस्ट (pull request) अर्धा दिवस उघडी राहते. लॉजिकमध्ये बिघाड असल्यामुळे किंवा API कॉन्ट्रॅक्ट बदलल्यामुळे नाही, तर ऑब्जेक्ट लिटरल्समध्ये (object literals) ट्रेलिंग कॉमा (trailing commas) हवेत की नाही, यावर दोन रिव्ह्यूअर्समध्ये मतभेद असल्यामुळे. चर्चा वाढत जाते. कोणीतरी स्टाईल गाईडची लिंक पोस्ट करते. दुसरे कोणीतरी वेगळ्या गाईडचा दाखला देते. तो कोड मर्ज होईपर्यंत, प्रत्यक्ष फिचरवर काम करणाऱ्या सर्वांचा त्या विषयाचा संदर्भ (context) सुटलेला असतो.

ही भांडणे महाग पडतात. यामुळे सिनियर इंजिनिअर्सचा कित्येक तास वाया जातो, सहकाऱ्यांमध्ये नाराजी निर्माण होते आणि ज्युनिअर डेव्हलपर्सना असे वाटते की सॉफ्टवेअर इंजिनिअरिंग म्हणजे प्रामुख्याने सेमीकोलनवरून (semicolons) वाद जिंकणे आहे. सर्वात वाईट गोष्ट काय? प्रॉडक्टला याने काही फरक पडत नाही. तुमच्या युजर्सना स्पेस आणि टॅबमधील फरक कधीच लक्षात येणार नाही. पण तुम्ही कोट मार्क्सवर (quote marks) वाद मिटवण्यात व्यस्त असल्यामुळे जो बग तुम्ही फिक्स केला नाही, तो नक्कीच लक्षात येईल.

सुसंगतता (Consistency) महत्त्वाची असते. ज्या कोडबेसवर असे वाटते की तो एकाच व्यक्तीने लिहिला आहे, तो वाचायला, रिव्ह्यू करायला आणि डीबग करायला सोपा असतो. चूक ही असते की ती सुसंगतता हाताने (manually) लागू करण्याचा प्रयत्न करणे.

कंटाळवाणी कामे ऑटोमेट करा

याचे उपाय सोपे आहेत. फॉरमॅटिंगमधून मानवी निर्णय पूर्णपणे काढून टाका. हे काम अशा टूल्सकडे सोपवा ज्यांना अहंकार नाही आणि जी थकत नाहीत.

तीन टूल्स हे काम चोखपणे हाताळतात.

Prettier तुमचा कोड घेते आणि तो आपोआप रिफॉर्मेट करते. ते परवानगी मागत नाही. तुम्ही लाईनची लांबी, कोट स्टाइल्स किंवा लांब फंक्शन सिग्नेचर (function signature) वेगवेगळ्या ओळींमध्ये कसे विभागले जावे, याबद्दल विचार करणे थांबवता. तुम्ही फाईल सेव्ह करता आणि Prettier ती सुसंगत बनवते.

ESLint अशा समस्या हाताळते ज्या Prettier स्पर्श करणार नाही. ते न वापरलेले व्हेरिएबल्स (unused variables), पोहोचता न येणारा कोड (unreachable code), React हुक्समधील गहाळ डिपेंडेंसीज (missing dependencies) आणि ऐतिहासिकदृष्ट्या बग्सना कारणीभूत ठरणारे पॅटर्न शोधते. योग्यरित्या कॉन्फिगर केल्यावर, ते फॉरमॅटिंगपासून दूर राहते आणि प्रत्यक्ष कोडच्या गुणवत्तेवर लक्ष केंद्रित करते.

Husky एक pre-commit hook इन्स्टॉल करते, जो ऑटोमेटेड चेक्स पास होईपर्यंत तुमच्या रिपॉझिटरीमध्ये काहीही प्रवेश करू देत नाही. ते तुमच्या Git पाइपलाइनला केवळ सूचना देणाऱ्या बॉक्सऐवजी एक गेटकीपर (gatekeeper) बनवते.

हे सर्व मिळून एक प्रभावी लूप तयार करतात. तुम्ही स्थानिक पातळीवर (locally) तुम्हाला हवा तसा कोड लिहिता. जेव्हा तुम्ही कमिट (commit) करता, तेव्हा ही टूल्स तो कोड स्वच्छ आणि तपासलेला (check) करतात. त्यानंतरच तो कोड तुमच्या मशीनवरून बाहेर जातो.

हे विशिष्ट स्टॅक का प्रभावी ठरते

तुम्ही ESLint रूल्स हाताने ट्यून करण्यासाठी आठवडे घालवू शकता. पण तसे करण्याची इच्छा रोखा. आमचे ध्येय स्टाईलवर वाद थांबवणे आहे, स्टाईल गाईड क्युरेटर म्हणून नवीन फुल-टाइम जॉब तयार करणे नाही.

Prettier मुद्दामहून 'opinionated' बनवले आहे. ते मर्यादित कॉन्फिगरेशन पर्याय देते कारण प्रत्येक पर्याय भविष्यातील वादाचे कारण ठरू शकतो. त्याचे डिफॉल्ट्स (defaults) योग्य आहेत. काही मोजके ओव्हरराइड्स (overrides) निवडा, ते एकदा लिहून ठेवा आणि पुढे चला.

ESLint ला जर स्वतंत्र सोडले, तर ते कोड क्वालिटी आणि फॉरमॅटिंग रूल्स (जसे की सेमीकोलनचा वापर आणि इंडेंट साईज) दोन्ही लागू करण्याचा प्रयत्न करेल. यामुळे Prettier सोबत संघर्ष निर्माण होतो कारण दोन्ही टूल्स एकाच कॅरेक्टर्सना एडिट करण्याचा प्रयत्न करतात. eslint-config-prettier हे पॅकेज Prettier सोबत संघर्ष करणारे सर्व ESLint रूल्स डिसेबल करून ही समस्या सोडवते. कामांची ही विभागणी अत्यंत महत्त्वाची आहे. Prettier सौंदर्यावर (cosmetics) लक्ष देते, तर ESLint लॉजिकवर लक्ष देते.

केवळ continuous integration मध्ये चेक्स चालवणे खूप उशिराचे आहे. CI फेल होईपर्यंत, तुम्ही आधीच विस्कळीत कोड कमिट केलेला असतो, दुसऱ्या कामाकडे वळलेले असता आणि कदाचित पुल रिक्वेस्ट देखील ओपन केलेली असते. ते फिक्स करण्यासाठी आणखी एक कमिट, आणखी एक पुश आणि पुन्हा वाट पाहण्याचा चक्र लागतो. Husky हा फीडबॅक लूप काही सेकंदात आणते. Lint-staged प्रत्येक कमिटवर संपूर्ण रिपॉझिटरी स्कॅन करण्याऐवजी, तुम्ही प्रत्यक्षात बदललेल्या फाईल्सवरच टूल्स चालवून हे काम जलद करते.

स्टेप बाय स्टेप सेटअप

खालील सेटअप आधुनिक JavaScript किंवा React प्रोजेक्टसाठी आहे, परंतु थोडे बदल करून हा पॅटर्न TypeScript, Vue किंवा Node साठी देखील वापरता येतो. प्रत्येक स्टेप तुमच्या प्रोजेक्ट रूटमधून (project root) रन करा.

सर्व गोष्टी dev dependencies म्हणून इन्स्टॉल करून सुरुवात करा:

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