Skip to main content
เทคโนโลยี

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

By กรกฎาคม 14th, 2022No Comments

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

  1. Install Packages

    npm install --save-dev husky gts
  2. ตั้งค่า gts
    Run command ตามด้านล่างเพื่อ initialize gts เลยยยย

    npx gts init

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

    1. ตั้งค่า 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 เป็นต้น

หากคุณสนใจพัฒนา สตาร์ทอัพ แอปพลิเคชัน
และ เทคโนโลยีของตัวเอง ?

อย่ารอช้า ! เรียนรู้ทักษะด้านดิจิทัลเพื่ออัพเกรดความสามารถของคุณ
เริ่มตั้งแต่พื้นฐาน พร้อมปฏิบัติจริงในรูปแบบหลักสูตรออนไลน์วันนี้

เราใช้คุกกี้เพื่อพัฒนาประสิทธิภาพ และประสบการณ์ที่ดีในการใช้เว็บไซต์ของคุณ คุณสามารถศึกษารายละเอียดได้ที่ นโยบายความเป็นส่วนตัว และสามารถจัดการความเป็นส่วนตัวเองได้ของคุณได้เองโดยคลิกที่ ตั้งค่า

ตั้งค่าความเป็นส่วนตัว

คุณสามารถเลือกการตั้งค่าคุกกี้โดยเปิด/ปิด คุกกี้ในแต่ละประเภทได้ตามความต้องการ ยกเว้น คุกกี้ที่จำเป็น

ยอมรับทั้งหมด
จัดการความเป็นส่วนตัว
  • คุกกี้ที่จำเป็น
    เปิดใช้งานตลอด

    ประเภทของคุกกี้มีความจำเป็นสำหรับการทำงานของเว็บไซต์ เพื่อให้คุณสามารถใช้ได้อย่างเป็นปกติ และเข้าชมเว็บไซต์ คุณไม่สามารถปิดการทำงานของคุกกี้นี้ในระบบเว็บไซต์ของเราได้
    รายละเอียดคุกกี้

  • คุกกี้สำหรับการติดตามทางการตลาด

    ประเภทของคุกกี้ที่มีความจำเป็นในการใช้งานเพื่อการวิเคราะห์ และ นำเสนอโปรโมชัน สินค้า รวมถึงหลักสูตรฟรี และ สิทธิพิเศษต่าง ๆ คุณสามารถเลือกปิดคุกกี้ประเภทนี้ได้โดยไม่ส่งผลต่อการทำงานหลัก เว้นแต่การนำเสนอโปรโมชันที่อาจไม่ตรงกับความต้องการ
    รายละเอียดคุกกี้

บันทึกการตั้งค่า