ಪ್ರತಿಯೊಂದು ಡೆವಲಪ್‌ಮೆಂಟ್ ತಂಡಕ್ಕೂ ಇಂತಹ ಕಥೆ ಇರುತ್ತದೆ. ಒಂದು পুল ರಕ್ವೆಸ್ಟ್ (pull request) ಅರ್ಧ ದಿನದವರೆಗೆ ತೆರೆದೆಯೇ ಇರುತ್ತದೆ. ತರ್ಕವು (logic) ತಪ್ಪಾಗಿರುವುದರಿಂದ ಅಥವಾ API ಒಪ್ಪಂದವು ಬದಲಾಗಿರುವುದರಿಂದ ಅಲ್ಲ, ಬದಲಾಗಿ ಆಬ್ಜೆಕ್ಟ್ ಲಿಟರಲ್‌ಗಳಿಗೆ (object literals) ಟ್ರೈಲಿಂಗ್ ಕಾಮಾ (trailing commas) ಬೇಕೇ ಅಥವಾ ಬೇಡವೇ ಎಂಬ ಬಗ್ಗೆ ಇಬ್ಬರು ರಿವ್ಯೂಯರ್‌ಗಳು ಭಿನ್ನಾಭಿಪ್ರಾಯ ಹೊಂದಿದ್ದರಿಂದ. ಚರ್ಚೆಯ ಸರಮಾಲೆ ಬೆಳೆಯುತ್ತದೆ. ಯಾರೋ ಒಬ್ಬರು ಸ್ಟೈಲ್ ಗೈಡ್ ಲಿಂಕ್ ಅನ್ನು ಪೋಸ್ಟ್ ಮಾಡುತ್ತಾರೆ. ಇನ್ನೊಬ್ಬರು ಬೇರೆ ಗೈಡ್ ಅನ್ನು ತೋರಿಸುತ್ತಾರೆ. ಕೋಡ್ ಮರ್ಜ್ ಆಗುವ ಹೊತ್ತಿಗೆ, ಅದರಲ್ಲಿ ಭಾಗಿಯಾಗಿರುವ ಪ್ರತಿಯೊಬ್ಬರೂ ತಾವು ವಾಸ್ತವವಾಗಿ ನಿರ್ಮಿಸುತ್ತಿದ್ದ ಫೀಚರ್‌ಗಳ ಬಗ್ಗೆನೂ ನೆನಪಿಟ್ಟುಕೊಳ್ಳಲು ಸಾಧ್ಯವಾಗದ ಸ್ಥಿತಿಗೆ ತಲುಪುತ್ತಾರೆ.

ಈ ಜಗಳಗಳು ದುಬಾರಿ. ಇವು ಹಿರಿಯ ಎಂಜಿನಿಯರ್‌ಗಳ ಸಮಯವನ್ನು ವ್ಯರ್ಥ ಮಾಡುತ್ತವೆ, ಸಹೋದ್ಯೋಗಿಗಳ ನಡುವೆ ಅಸಮಾಧಾನವನ್ನು ಸೃಷ್ಟಿಸುತ್ತವೆ ಮತ್ತು ಸಾಫ್ಟ್‌ವೇರ್ ಎಂಜಿನಿಯರಿಂಗ್ ಎಂದರೆ ಹೆಚ್ಚಾಗಿ ಸೆಮಿಕೋಲನ್‌ಗಳ ಬಗ್ಗೆ ವಾದ ಮಾಡುವುದು ಎಂದು ಜೂನಿಯರ್ ಡೆವಲಪರ್‌ಗಳಿಗೆ ತಪ್ಪು ಕಲ್ಪನೆ ನೀಡುತ್ತವೆ. ಅತ್ಯಂತ ಕೆಟ್ಟ ವಿಷಯವೇನು? ಉತ್ಪನ್ನಕ್ಕೆ (product) ಇದರಿಂದ ಕಿಂಚಿತ್ತೂ ವ್ಯತ್ಯಾಸವಿಲ್ಲ. ನಿಮ್ಮ ಬಳಕೆದಾರರು ಸ್ಪೇಸ್ (space) ಮತ್ತು ಟ್ಯಾಬ್ (tab) ನಡುವಿನ ವ್ಯತ್ಯಾಸವನ್ನು ಎಂದಿಗೂ ಗಮನಿಸುವುದಿಲ್ಲ. ಬದಲಾಗಿ, ನೀವು ಕೊಟೇಶನ್ ಮಾರ್ಕ್ಸ್ (quote marks) ಬಗ್ಗೆ ವಾದ ಮಾಡುತ್ತಾ ಬಿಟ್ಟುಬಿಟ್ಟ ಬಗ್ (bug) ಅನ್ನು ಅವರು ಗಮನಿಸುತ್ತಾರೆ.

ಸ್ಥಿರತೆ (Consistency) ಮುಖ್ಯವಾಗುತ್ತದೆ. ಒಬ್ಬನೇ ವ್ಯಕ್ತಿ ಬರೆದಂತೆ ಕಾಣುವ ಕೋಡ್ ಬೇಸ್ ಅನ್ನು ಓದುವುದು, ರಿವ್ಯೂ ಮಾಡುವುದು ಮತ್ತು ಡಿಬಗ್ ಮಾಡುವುದು ಸುಲಭ. ಆದರೆ ಆ ಸ್ಥಿರತೆಯನ್ನು ಕೈಯಿಂದ (manually) ಜಾರಿಗೊಳಿಸಲು ಪ್ರಯತ್ನಿಸುವುದು ತಪ್ಪು.

ಬೇಸರದ ಕೆಲಸಗಳನ್ನು ಸ್ವಯಂಚಾಲಿತಗೊಳಿಸಿ

ಇದಕ್ಕೆ ಪರಿಹಾರ ಸರಳವಾಗಿದೆ. ಫಾರ್ಮ್ಯಾಟಿಂಗ್‌ನಿಂದ ಮಾನವ ನಿರ್ಧಾರವನ್ನು ಸಂಪೂರ್ಣವಾಗಿ ತೆಗೆದುಹಾಕಿ. ಅಹಂಕಾರವಿಲ್ಲದ ಮತ್ತು ಸುಸ್ತಾಗದ ಟೂಲ್‌ಗಳಿಗೆ (tools) ಅದನ್ನು ವಹಿಸಿಕೊಡಿ.

ಮೂರು ಟೂಲ್‌ಗಳು ಇದನ್ನು ಸುಲಭವಾಗಿ ನಿರ್ವಹಿಸುತ್ತವೆ.

Prettier ನಿಮ್ಮ ಕೋಡ್ ಅನ್ನು ತೆಗೆದುಕೊಳ್ಳುತ್ತದೆ ಮತ್ತು ಅದನ್ನು ಸ್ವಯಂಚಾಲಿತವಾಗಿ ಮರುರೂಪಿಸುತ್ತದೆ (reformats). ಇದು ಅನುಮತಿ ಕೇಳುವುದಿಲ್ಲ. ನೀವು ಲೈನ್ ಉದ್ದ (line lengths), ಕೊಟೇಶನ್ ಶೈಲಿಗಳು ಅಥವಾ ಉದ್ದವಾದ ಫಂಕ್ಷನ್ ಸಿಗ್ನೇಚರ್ ಅನ್ನು ಹೇಗೆ ವಿಂಗಡಿಸಬೇಕು ಎಂಬ ಬಗ್ಗೆ ಯೋಚಿಸುವುದನ್ನು ನಿಲ್ಲಿಸಬಹುದು. ನೀವು ಫೈಲ್ ಅನ್ನು ಸೇವ್ ಮಾಡಿದರೆ ಸಾಕು, Prettier ಅದನ್ನು ಸ್ಥಿರವಾಗಿಸುತ್ತದೆ.

ESLint Prettier ಮುಟ್ಟದ ಸಮಸ್ಯೆಗಳನ್ನು ನಿರ್ವಹಿಸುತ್ತದೆ. ಇದು ಬಳಕೆಯಾಗದ ವೇರಿಯೇಬಲ್‌ಗಳು (unused variables), ತಲುಪಲಾಗದ ಕೋಡ್ (unreachable code), React hooks ನಲ್ಲಿ ಕಾಣದ ಅವಲಂಬನೆಗಳು (missing dependencies) ಮತ್ತು ಹಿಂದೆ ಬಗ್‌ಗಳಿಗೆ ಕಾರಣವಾಗಿದ್ದ ಪ್ಯಾಟರ್ನ್‌ಗಳನ್ನು ಪತ್ತೆಹಚ್ಚುತ್ತದೆ. ಸರಿಯಾಗಿ ಕಾನ್ಫಿಗರ್ ಮಾಡಿದಾಗ, ಇದು ಫಾರ್ಮ್ಯಾಟಿಂಗ್‌ನಿಂದ ದೂರವಿದ್ದು ಕೇವಲ ಕೋಡ್ ಗುಣಮಟ್ಟದ ಮೇಲೆ ಗಮನ ಹರಿಸುತ್ತದೆ.

Husky ಒಂದು pre-commit hook ಅನ್ನು ಇನ್‌ಸ್ಟಾಲ್ ಮಾಡುತ್ತದೆ, ಇದು ಸ್ವಯಂಚಾಲಿತ ಪರಿசோதனೆಗಳು ಪಾಸಾಗುವವರೆಗೆ ಯಾವುದೇ ವಿಷಯವು ನಿಮ್ಮ ರೆಪೊಸಿಟರಿಗೆ (repository) ಪ್ರವೇಶಿಸದಂತೆ ತಡೆಯುತ್ತದೆ. ಇದು ನಿಮ್ಮ Git ಪೈಪ್‌ಲೈನ್ ಅನ್ನು ಕೇವಲ ಸಲಹೆ ನೀಡುವ ಬಾಕ್ಸ್ ಬದಲಿಗೆ, ಕಾವಲುಗಾರನನ್ನಾಗಿ (gatekeeper) ಬದಲಾಯಿಸುತ್ತದೆ.

ಇವೆಲ್ಲವೂ ಒಟ್ಟಾಗಿ ಒಂದು ಪರಿಣಾಮಕಾರಿ ಲೂಪ್ ಅನ್ನು ರೂಪಿಸುತ್ತವೆ. ನೀವು ಸ್ಥಳೀಯವಾಗಿ (locally) ನಿಮಗೆ ಬೇಕಾದಂತೆ ಕೋಡ್ ಬರೆಯಬಹುದು. ನೀವು ಕಮಿಟ್ ಮಾಡಿದಾಗ, ಈ ಟೂಲ್‌ಗಳು ಅದನ್ನು ಸ್ವಚ್ಛಗೊಳಿಸಿ ಪರಿಶೀಲಿಸುತ್ತವೆ. ಅದರ ನಂತರವಷ್ಟೇ ಕೋಡ್ ನಿಮ್ಮ ಯಂತ್ರದಿಂದ ಹೊರಬರುತ್ತದೆ.

ಈ ನಿರ್ದಿಷ್ಟ ಸ್ಟ್ಯಾಕ್ ಏಕೆ ಕೆಲಸ ಮಾಡುತ್ತದೆ

ನೀವು ವಾರಗಟ್ಟಲೆ ESLint ನಿಯಮಗಳನ್ನು ಕೈಯಿಂದ ಟ್ಯೂನ್ ಮಾಡಲು ಸಮಯ ವ್ಯರ್ಥ ಮಾಡಬಹುದು. ಅಂತಹ ಆಸೆಯನ್ನು ತಡೆಯಿರಿ. ಇಲ್ಲಿನ ಗುರಿ ಸ್ಟೈಲ್ ಬಗ್ಗೆ ವಾದ ಮಾಡುವುದನ್ನು ನಿಲ್ಲಿಸುವುದು, ಸ್ಟೈಲ್ ಗೈಡ್ ಕ್ಯುರೇಟರ್ ಆಗಿ ಹೊಸ ಪೂರ್ಣಾವಧಿ ಕೆಲಸವನ್ನು ಮಾಡುವುದಲ್ಲ.

Prettier ಉದ್ದೇಶಪೂರ್ವಕವಾಗಿ ನಿರ್ದಿಷ್ಟ ನಿಯಮಗಳನ್ನು ಹೊಂದಿದೆ (opinionated). ಇದು ಸೀಮಿತ ಕಾನ್ಫಿಗರೇಶನ್ ಆಯ್ಕೆಗಳನ್ನು ನೀಡುತ್ತದೆ ಏಕೆಂದರೆ ಪ್ರತಿಯೊಂದು ಆಯ್ಕೆಯೂ ಭವಿಷ್ಯದಲ್ಲಿ ವಾದಕ್ಕೆ ಕಾರಣವಾಗಬಹುದು. ಇದರ ಡಿಫಾಲ್ಟ್ (defaults) ಸೆಟ್ಟಿಂಗ್‌ಗಳು ಉತ್ತಮವಾಗಿವೆ. ಕೆಲವು ಸಣ್ಣ ಬದಲಾವಣೆಗಳನ್ನು (overrides) ಮಾಡಿಕೊಳ್ಳಿ, ಅವುಗಳನ್ನು ಒಮ್ಮೆ ಬರೆದಿಡಿ ಮತ್ತು ಮುಂದೆ ಸಾಗಿ.

ESLint ಅನ್ನು ಹಾಗೆಯೇ ಬಿಟ್ಟರೆ, ಅದು ಕೋಡ್ ಗುಣಮಟ್ಟ ಮತ್ತು ಸೆಮಿಕೋಲನ್ ಬಳಕೆ ಹಾಗೂ ಇಂಡೆಂಟ್ ಸೈಜ್‌ನಂತಹ ಫಾರ್ಮ್ಯಾಟಿಂಗ್ ನಿಯಮಗಳೆರಡನ್ನೂ ಜಾರಿಗೊಳಿಸಲು ಪ್ರಯತ್ನಿಸುತ್ತದೆ. ಇದು Prettier ನೊಂದಿಗೆ ಘರ್ಷಣೆಯನ್ನು ಉಂಟುಮಾಡುತ್ತದೆ ಏಕೆಂದರೆ ಎರಡೂ ಟೂಲ್‌ಗಳು ಒಂದೇ ಅಕ್ಷರಗಳನ್ನು ಎಡಿಟ್ ಮಾಡಲು ಪ್ರಯತ್ನಿಸುತ್ತವೆ. eslint-config-prettier ಪ್ಯಾಕೇಜ್ Prettier ನೊಂದಿಗೆ ಸಂಘರ್ಷ ಹೊಂದಿರುವ ಎಲ್ಲಾ ESLint ನಿಯಮಗಳನ್ನು ಅಸಕ್ರಿಯಗೊಳಿಸುವ ಮೂಲಕ ಇದನ್ನು ಪರಿಹರಿಸುತ್ತದೆ. ಈ ಜವಾಬ್ದಾರಿಗಳ ವಿಭಜನೆಯು ಬಹಳ ಮುಖ್ಯವಾಗಿದೆ. Prettier ಸೌಂದರ್ಯದ ಬಗ್ಗೆ ಗಮನಹರಿಸುತ್ತದೆ. ESLint ತರ್ಕದ (logic) ಬಗ್ಗೆ ಗಮನಹರಿಸುತ್ತದೆ.

ಕೇವಲ ಕಂಟಿನ್ಯೂಯಸ್ ಇಂಟಿಗ್ರೇಶನ್ (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