ในบทความนี้เราจะพาเพื่อนๆมาตั้งค่า Project ให้ Format Code อัตโนมัติทุกครั้งที่ commit ด้วย Husky และ gts
ผู้เขียน Thapanon S.- BorntoDev Co., Ltd.
อย่างที่ทุกคนรู้นะครับว่าเวลาที่เราทำงานกันเป็นทีมหรือทำงานกับคนเยอะๆ วิธีการเขียน code ของแต่ละคนก็จะไม่หมือนกันทำให้เวลาที่ต้องเรามา maintenance code เนี่ยอาจจะอ่านยากและต้องใช้เวลาในการทำความเข้าใจใน algorithm ของ code แล้วยังต้องมางงกับวิธีการเขียนของคนก่อนหน้าอีก ในวันนี้เราก็จะมาทำระบบที่จะ Format Code ของ project อัตโนมัติทุกครั้งที่เรา git commit กัน โดย tools ที่เราจะใช้ก็มี Husky และ gts
แต่ก่อนอื่นเรามาทำตวามรู้จักกับ tools แบบคร่าวๆ กันดีกว่า
gts หรือ Google’s TypeScript style guide นั่นก็เป็น TypeScript style guide ที่ google นั้นแนะนำ
Husky เป็นเครื่องมือที่ช่วยให้เราสามารถจัดการกับ Git hooks และเรียกใช้สคริปต์ที่เราต้องการในขั้นตอนต่างๆ ได้อย่างง่ายดาย
เรามาเริ่มกันเลยยยยย
ก่อนอื่นก็ให้ทุกคนนั้นสร้าง Folder และ git init ให้เรียบร้อยและหลังจากนั้นก็ทำตามขั้นตอนด้านล่างเลยย
- Install Packages
npm install --save-dev husky gts
- ตั้งค่า gts
Run command ตามด้านล่างเพื่อ initialize gts เลยยยย
npx gts init
หลังจาก run เสร็จก็จะเห็นได้ว่าไฟล์ package.json ถูกแก้ไขและมีไฟล์อื่นๆ ถูกสร้างขึ้นมาเพิ่ม
-
- ตั้งค่า Husky
อันนี้ก็แค่เพิ่ม code ด้านล่างนี้ไปยัง package.json
{ /* other configurations */ "scripts": { /* other scripts */ "configure-husky": "npx husky install && npx husky add .husky/pre-commit \"npm run fix\"" }, }
- ตั้งค่า Husky
หลังจากที่ติดตั้งของทั้งหมดแล้วก็ run command
npm run configure-husky
เพื่อ install husky และ connect มันเข้ากับ pre-commit hook
เมื่อตั้งค่า Husky เรียบร้อยแล้วเราก็มาลองใช้กันดีกว่า ผมได้สร้าง file app.js มาแล้ว code ก็เขียนไปแบบด้านล่างเลย
function hello(word1, word2, word3, word4) { return word1 + word2 + word3 + word4; } hello( 'Charles', 'Fatima', 'Beatriz', 'Gabriel');
จะเห็นได้ว่า VS code มันกำลังด่าผมอยู่ว่าเขียนอะไรเนี่ยไม่ตรงตามที่ตกลงกันไว้นิ
ต่อไปเรามาลอง commit code กัน
จากรูปด้านล่างก็จะเห็นได้ว่า code ของเราถูก format เรียบร้อยแล้วหลัง commit
และทั้งหมดนี้ก็คือการ format code auto ทุกครั้งที่ commit ที่ผมเอามาแชร์กันในวันนี้นอกจากนี้ยังมีการนำ Husky ไปใช้ในอีกหลายๆ แบบอีกด้วย ยกตัวอย่างเช่น การ run test ก่อนที่จะ commit เป็นต้น