จัดระเบียบ code ของเราก่อน push ขี้น Git กันเถอะ

อย่างที่ทุกคนรู้นะครับว่าเวลาที่เราทำงานกันเป็นทีมหรือทำงานกับคนเยอะๆ วิธีการเขียน 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 ให้เรียบร้อยและหลังจากนั้นก็ทำตามขั้นตอนด้านล่างเลยย

1. Install Packages
   

   npm install --save-dev husky gts

2. ตั้งค่า gts
   Run command ตามด้านล่างเพื่อ initialize gts เลยยยย
   

   npx gts init

หลังจาก run เสร็จก็จะเห็นได้ว่าไฟล์ package.json ถูกแก้ไขและมีไฟล์อื่นๆ ถูกสร้างขึ้นมาเพิ่ม

3. 3. ตั้งค่า Husky
      อันนี้ก็แค่เพิ่ม code ด้านล่างนี้ไปยัง package.json
      

      {
        /* other configurations */
        "scripts": {
          /* other scripts */
          "configure-husky": "npx husky install && npx husky add .husky/pre-commit \"npm run fix\""
        },
      }

หลังจากที่ติดตั้งของทั้งหมดแล้วก็ 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 เป็นต้น