N

Nokfa Docs

ไม่มีชื่อบทความ

คู่มือการปรับแต่ง Commitizen และ Commitlint

🔍 ทำไมต้องปรับแต่ง?

โดยปกติ commitizen และ commitlint จะใช้มาตรฐานกลางที่เรียกว่า Conventional Commit ซึ่งจะกำหนดรูปแบบ commit message อย่างชัดเจน เช่น:

feat(auth): เพิ่มระบบล็อกอิน

แต่บางครั้ง ทีมของเราก็อาจต้องการขยายหรือกำหนดมาตรฐานให้เหมาะสมกับโครงสร้างของโปรเจกต์ที่เรากำลังทำอยู่ เช่น โปรเจกต์ของเรามีหลาย packages และ apps การกำหนด scope เฉพาะจะช่วยให้ commit message ชัดเจนและเข้าใจง่ายขึ้น

🎯 ประโยชน์ที่ได้จากการปรับแต่ง

  • Commit message ชัดเจนขึ้น: ทำให้ทีมอ่านและเข้าใจงานที่ทำได้ง่าย
  • ลดความผิดพลาดในการพิมพ์: การเลือกจากตัวเลือกที่มีอยู่แล้วจะลดการสะกดผิด
  • จัดหมวดหมู่ commit ได้ดีขึ้น: ช่วยให้การดูประวัติหรือการ generate changelog มีประสิทธิภาพมากขึ้น

🛠 ไฟล์ที่ต้องรู้จัก

1. .cz-config.cjs

ไฟล์นี้ใช้กำหนดรูปแบบการ prompt ของ Commitizen เวลารันคำสั่ง pnpm cz โดยจะถามเราเกี่ยวกับ:

  • type: ประเภทของงานที่ commit
  • scope: ส่วนของโปรเจกต์ที่ commit นั้นๆ เกี่ยวข้อง
  • description: คำอธิบายสั้นๆ ของ commit นั้น

ตัวอย่างไฟล์:

module.exports = {
  types: [
    { value: 'feat',     name: 'feat:     เพิ่มฟีเจอร์ใหม่' },
    { value: 'fix',      name: 'fix:      แก้บั๊ก' },
    { value: 'docs',     name: 'docs:     แก้หรือเพิ่มเอกสาร' },
    { value: 'style',    name: 'style:    แก้ฟอร์แมต / lint / CSS' },
    { value: 'refactor', name: 'refactor: ปรับโค้ดโดยไม่เพิ่มฟีเจอร์' },
    { value: 'perf',     name: 'perf:     ปรับปรุงประสิทธิภาพ' },
    { value: 'test',     name: 'test:     เพิ่มหรือแก้เทส' },
    { value: 'build',    name: 'build:    แก้ build system หรือ dependency' },
    { value: 'ci',       name: 'ci:       แก้ pipeline หรือ workflow' },
    { value: 'chore',    name: 'chore:    งานเบ็ดเตล็ด ไม่กระทบ code' },
    { value: 'revert',   name: 'revert:   ย้อน commit ก่อนหน้า' }
  ],
  scopes: [
    { name: 'apps/gohig' },
    { name: 'apps/hrmock' },
    { name: 'apps/nfdocs' },
    { name: 'apps/nokfa' },
    { name: 'apps/nfbuild' },
    { name: 'packages/ui' },
    { name: 'packages/config' },
    { name: 'packages/lib-posts' },
    { name: 'scripts' },
    { name: 'root' }
  ],
  allowCustomScopes: true,
  allowBreakingChanges: ['feat', 'fix', 'refactor'],
};
  • types: ประเภทงานที่อนุญาต
  • scopes: ส่วนต่างๆ ของโปรเจกต์ที่เกี่ยวข้อง
  • allowCustomScopes: อนุญาตให้พิมพ์ scope เองได้ถ้านอกเหนือจากรายการ
  • allowBreakingChanges: อนุญาตให้บางประเภทมีการเปลี่ยนแปลงครั้งใหญ่ (breaking changes)

2. commitlint.config.cjs

ไฟล์นี้ใช้สำหรับตรวจสอบ commit message ที่ถูกส่งเข้ามาเพื่อให้แน่ใจว่าตรงกับรูปแบบที่ทีมกำหนดไว้

ตัวอย่างไฟล์:

module.exports = {
  extends: ['@commitlint/config-conventional'],
  rules: {
    'header-max-length': [2, 'always', 72],
    'scope-enum': [
      2,
      'always',
      [
        'apps/gohig',
        'apps/hrmock',
        'apps/nfdocs',
        'apps/nokfa',
        'apps/nfbuild',
        'packages/ui',
        'packages/config',
        'packages/lib-posts',
        'scripts',
        'root'
      ],
    ],
  },
};
  • extends: ใช้กฎมาตรฐานจาก Conventional Commit
  • header-max-length: จำกัดความยาวของข้อความ commit header ไม่เกิน 72 ตัวอักษร
  • scope-enum: จำกัดให้ใช้เฉพาะ scopes ที่กำหนดไว้เท่านั้น

⚙️ แนวทางการปรับแต่งเพิ่มเติม

  1. เพิ่มหรือลดประเภทของ commit (types): ปรับตามประเภทงานของทีม
  2. เพิ่ม scope ใหม่ เมื่อมีส่วนเพิ่มเติมในโปรเจกต์
  3. ปรับ header-max-length หากต้องการข้อความ commit ที่สั้นหรือยาวขึ้น
  4. เพิ่มหรือปิด allowCustomScopes หากต้องการควบคุมการกรอก scope ให้เข้มงวดขึ้น

🚀 ผลที่ได้หลังปรับแต่ง

  • ทีมมีรูปแบบการเขียน commit ที่ชัดเจนและเข้าใจตรงกัน
  • ลดปัญหาการ commit message ไม่ตรงตามมาตรฐาน
  • สร้าง changelog อัตโนมัติได้ง่ายและแม่นยำขึ้น

เคล็ดลับ: ทุกครั้งที่มีการเปลี่ยนแปลง ให้แจ้งทีมเพื่ออัปเดตให้ทุกคนรับทราบ และอย่าลืมอัปเดตเอกสารนี้ให้เป็นปัจจุบันเสมอ