Husky + lint-staged: ทำให้ Git Commit สะอาดขึ้นแบบอัตโนมัติ

10 May 2026 15:30a month ago

เวลาเราทำงานเป็นทีม ปัญหาที่เจอบ่อยมากคือ

มี code style ไม่เหมือนกัน
ลืม run formatter ก่อน commit
มีไฟล์ที่ lint ไม่ผ่านหลุดเข้า repository
commit แล้ว CI พังค่อยมาแก้ทีหลัง

เครื่องมืออย่าง Husky และ lint-staged ถูกสร้างมาเพื่อแก้ปัญหานี้โดยตรง

บทความนี้จะพาไปตั้งค่าแบบใช้งานจริง พร้อม optional setup สำหรับ formatter และ linting ด้วย Prettier และ Biome

Husky คืออะไร

Husky คือเครื่องมือสำหรับจัดการ Git Hooks

Git Hooks คือ script ที่จะทำงาน “ก่อน” หรือ “หลัง” event ต่าง ๆ ของ Git เช่น

ก่อน commit (pre-commit)
ก่อน push (pre-push)
หลัง merge (post-merge)

ตัวอย่างที่นิยมที่สุดคือ

ก่อน commit → run lint + format อัตโนมัติ

ทำให้ code ที่ push เข้า repository มีมาตรฐานมากขึ้น

lint-staged คืออะไร

ปัญหาของการ run lint ทั้ง project ทุกครั้งก่อน commit คือ “ช้า”

lint-staged แก้ปัญหานี้โดย:

✅ run เฉพาะไฟล์ที่ถูก staged
✅ ทำงานเร็วขึ้นมาก
✅ เหมาะกับ project ขนาดใหญ่

ตัวอย่าง:

1git add src/app.ts

lint-staged จะ run แค่ไฟล์นี้ ไม่ scan ทั้ง project

ทำไมควรใช้คู่กัน

ส่วนใหญ่จะใช้แบบนี้

Husky → Trigger Git Hook lint-staged → Handle staged files Prettier/Biome/ESLint → Format & Lint

Flow จริง:

1git commit
2↓
3Husky pre-commit
4↓
5lint-staged
6↓
7run prettier / biome / eslint
8↓
9commit สำเร็จ

ข้อดี

1. ป้องกัน code style ไม่ตรงกัน

ทุกคนในทีมใช้ format เดียวกัน

เช่น spacing, semicolon, quote style

2. ลด broken commit

กัน lint error หลุดเข้า main branch

3. ทำงานอัตโนมัติ

Developer ไม่ต้องจำว่า:

1npm run lint
2npm run format

4. CI เร็วขึ้น

เพราะหลาย error ถูกแก้ตั้งแต่ local แล้ว

5. เหมาะกับทีม

โดยเฉพาะ project ที่มีหลายคน commit พร้อมกัน

ข้อเสีย

1. Commit อาจช้าขึ้นเล็กน้อย

โดยเฉพาะ project ใหญ่

แต่ lint-staged ช่วยลดปัญหานี้เยอะมาก

2. Hook ที่หนักเกินไปจะน่ารำคาญ

ถ้า pre-commit run test ทั้งระบบทุกครั้ง อาจทำให้ workflow ช้า

คำแนะนำคือ:

✅ lint
✅ format
❌ full e2e test ทุก commit

3. Developer บางคนอาจ bypass ได้

เช่น

1git commit --no-verify

ดังนั้น CI ยังสำคัญอยู่

วิธีติดตั้ง

ตัวอย่างนี้ใช้ Node.js project

ติดตั้ง Husky + lint-staged

1npm install -D husky lint-staged

หรือ

1pnpm add -D husky lint-staged

หรือ

1yarn add -D husky lint-staged

หรือ

1bun add -D husky lint-staged

เปิดใช้งาน Husky

1. initialize husky

1npx husky init

จะได้โฟลเดอร์:

1.husky/

พร้อมไฟล์:

1.husky/pre-commit

2. เพิ่ม script ใน package.json

ปกติ Husky จะเพิ่มให้อัตโนมัติ

1{
2  "scripts": {
3    "prepare": "husky"
4  }
5}

script นี้จะช่วย setup husky ตอน install package

ตั้งค่า lint-staged

เพิ่มใน package.json

ใช้กับ Prettier

1{
2  "lint-staged": {
3    "*.{js,ts,tsx,json,md}": [
4      "prettier --write"
5    ]
6  }
7}

เชื่อม Husky กับ lint-staged

แก้ไฟล์:

1.husky/pre-commit

เป็น:

1npx lint-staged

เสร็จแล้ว 🎉

ทุกครั้งที่ commit:

git commit

ระบบจะ format file อัตโนมัติ

Optional: ใช้กับ Prettier

ติดตั้ง

1npm install -D prettier

สร้างไฟล์:

1.prettierrc

ตัวอย่าง:

1{
2  "semi": true,
3  "singleQuote": true
4}

Optional: ใช้กับ Biome

ช่วงหลังหลายทีมเริ่มย้ายจาก ESLint + Prettier มาใช้ Biome

เพราะ:

เร็วมาก
setup ง่าย
formatter + linter ในตัวเดียว
written in Rust

ติดตั้ง Biome

1npm install -D @biomejs/biome

initialize config

1npx @biomejs/biome init

จะได้:

1biome.json

ตัวอย่าง lint-staged กับ Biome

1{
2  "lint-staged": {
3    "*.{js,ts,tsx,json}": [
4      "biome check --write"
5    ]
6  }
7}

Biome จะ:

✅ lint
✅ format
✅ fix auto

ใน command เดียว

Prettier vs Biome

Feature	Prettier	Biome
Formatter	✅	✅
Linter	❌	✅
Speed	เร็ว	เร็วมาก
Config	แยก ESLint	ตัวเดียว
Written in	JS	Rust

ตัวอย่าง Setup จริงที่แนะนำ

แบบ Traditional

Husky
lint-staged
ESLint
Prettier

เหมาะกับ project เก่า

แบบ Modern

Husky
lint-staged
Biome

setup ง่ายกว่าเยอะ

ตัวอย่าง package.json แบบใช้งานจริง

ใช้ Biome

1{
2  "scripts": {
3    "prepare": "husky"
4  },
5  "lint-staged": {
6    "*.{js,ts,tsx,json}": [
7      "biome check --write"
8    ]
9  }
10}

Tips ที่ควรรู้

1. อย่า ignore

ควร commit เข้า git

❌ ไม่ต้องใส่

1.gitignore

เพราะทุกคนในทีมต้องใช้ hook เดียวกัน

2. ใช้ร่วมกับ CI เสมอ

ถึง local จะมี husky แล้ว

CI ก็ยังควร run:

1npm run lint

อีกรอบ

3. อย่า run เยอะเกินใน pre-commit

สิ่งที่เหมาะ:

lint
format
type-check เล็กน้อย

สิ่งที่ไม่ควร:

build ทั้งระบบ
e2e tests
docker compose up

สรุป

ถ้าคุณอยากให้ codebase:

✅ สะอาด
✅ มาตรฐานเดียวกัน
✅ ลด human error
✅ commit ได้มั่นใจขึ้น

การใช้ Husky + lint-staged ถือเป็นหนึ่งใน setup ที่ควรมีแทบทุก modern frontend/backend project

และถ้าอยากลดความซับซ้อนของ tooling:

👉 ลองใช้ Biome แทน ESLint + Prettier ก็เป็นทางเลือกที่น่าสนใจมากในปีนี้

huskylint-stagedgit-hooksprettierbiomeeslintjavascripttypescriptnodejsfrontendbackenddeveloper-toolscode-qualityweb-developmentnextjsdevops

Teekayu Poongkawabutr (Pon)(Creaml4tt3)

Developer ท่านหนึ่งที่ทำงานบ้าง ไม่ทำงานบ้าง ทำงานเป็น dev แต่จบ graphic ชีวิตสับสน website: creaml4tt3.me

Related Blogs

Next.js View Transitions ใช้ยังไง? พร้อมตัวอย่างจริง

03 May 2026 15:30a month ago

ทำให้ Next.js ของคุณลื่นเหมือน native app ด้วย View Transitions API พร้อมวิธีเปิดใช้งาน, ทำ global transition และทำ shared element animation สำหรับ blog image แบบ production-ready

Next.js SEO Checklist 2026: 12 เทคนิคเพิ่มอันดับ Google สำหรับเว็บไซต์ Next.js

01 Jun 2026 17:0014 days ago

รวม Next.js SEO Checklist 2026 ตั้งแต่ Metadata API, Open Graph, Sitemap, Robots.txt, JSON-LD และ Core Web Vitals เพื่อช่วยให้เว็บไซต์ติดอันดับ Google ได้ดีขึ้น

Latest Blogs

View all

Next.js SEO Checklist 2026: 12 เทคนิคเพิ่มอันดับ Google สำหรับเว็บไซต์ Next.js

01 Jun 2026 17:0014 days ago

ทำไม Gmail ถึงใช้ Undo แทน Confirm Dialog — และนี่คือ UX ระดับโลก

27 May 2026 18:0019 days ago

ทำไม Gmail ถึงเลือก “Undo Send” แทน Popup ถามยืนยัน? เจาะลึก UX Psychology, Human Error และ Design Pattern ที่ทำให้ Google ลดความน่ารำคาญ แต่ยังป้องกันความผิดพลาดได้

10 Poka Yoke Patterns ที่ทุกเว็บควรมี เพื่อลด User Error และเพิ่ม UX

24 May 2026 17:0022 days ago

เรียนรู้ Poka Yoke สำหรับ UX/UI และ Web Design พร้อม 10 Error Prevention Patterns ที่ช่วยลด User Error เพิ่ม Conversion และทำให้เว็บใช้งานง่ายขึ้น

Husky + lint-staged: ทำให้ Git Commit สะอาดขึ้นแบบอัตโนมัติ

10 May 2026 15:30a month ago

เวลาเราทำงานเป็นทีม ปัญหาที่เจอบ่อยมากคือ

มี code style ไม่เหมือนกัน
ลืม run formatter ก่อน commit
มีไฟล์ที่ lint ไม่ผ่านหลุดเข้า repository
commit แล้ว CI พังค่อยมาแก้ทีหลัง

เครื่องมืออย่าง Husky และ lint-staged ถูกสร้างมาเพื่อแก้ปัญหานี้โดยตรง

Husky คืออะไร

Husky คือเครื่องมือสำหรับจัดการ Git Hooks

Git Hooks คือ script ที่จะทำงาน “ก่อน” หรือ “หลัง” event ต่าง ๆ ของ Git เช่น

ก่อน commit (pre-commit)
ก่อน push (pre-push)
หลัง merge (post-merge)

ตัวอย่างที่นิยมที่สุดคือ

ก่อน commit → run lint + format อัตโนมัติ

ทำให้ code ที่ push เข้า repository มีมาตรฐานมากขึ้น

lint-staged คืออะไร

ปัญหาของการ run lint ทั้ง project ทุกครั้งก่อน commit คือ “ช้า”

lint-staged แก้ปัญหานี้โดย:

✅ run เฉพาะไฟล์ที่ถูก staged
✅ ทำงานเร็วขึ้นมาก
✅ เหมาะกับ project ขนาดใหญ่

ตัวอย่าง:

1git add src/app.ts

lint-staged จะ run แค่ไฟล์นี้ ไม่ scan ทั้ง project

ทำไมควรใช้คู่กัน

ส่วนใหญ่จะใช้แบบนี้

Husky → Trigger Git Hook lint-staged → Handle staged files Prettier/Biome/ESLint → Format & Lint

Flow จริง:

1git commit
2↓
3Husky pre-commit
4↓
5lint-staged
6↓
7run prettier / biome / eslint
8↓
9commit สำเร็จ

ข้อดี

1. ป้องกัน code style ไม่ตรงกัน

ทุกคนในทีมใช้ format เดียวกัน

เช่น spacing, semicolon, quote style

2. ลด broken commit

กัน lint error หลุดเข้า main branch

3. ทำงานอัตโนมัติ

Developer ไม่ต้องจำว่า:

1npm run lint
2npm run format

4. CI เร็วขึ้น

เพราะหลาย error ถูกแก้ตั้งแต่ local แล้ว

5. เหมาะกับทีม

โดยเฉพาะ project ที่มีหลายคน commit พร้อมกัน

ข้อเสีย

1. Commit อาจช้าขึ้นเล็กน้อย

โดยเฉพาะ project ใหญ่

แต่ lint-staged ช่วยลดปัญหานี้เยอะมาก

2. Hook ที่หนักเกินไปจะน่ารำคาญ

ถ้า pre-commit run test ทั้งระบบทุกครั้ง อาจทำให้ workflow ช้า

คำแนะนำคือ:

✅ lint
✅ format
❌ full e2e test ทุก commit

3. Developer บางคนอาจ bypass ได้

เช่น

1git commit --no-verify

ดังนั้น CI ยังสำคัญอยู่

วิธีติดตั้ง

ตัวอย่างนี้ใช้ Node.js project

ติดตั้ง Husky + lint-staged

1npm install -D husky lint-staged

หรือ

1pnpm add -D husky lint-staged

หรือ

1yarn add -D husky lint-staged

หรือ

1bun add -D husky lint-staged

เปิดใช้งาน Husky

1. initialize husky

1npx husky init

จะได้โฟลเดอร์:

1.husky/

พร้อมไฟล์:

1.husky/pre-commit

2. เพิ่ม script ใน package.json

ปกติ Husky จะเพิ่มให้อัตโนมัติ

1{
2  "scripts": {
3    "prepare": "husky"
4  }
5}

script นี้จะช่วย setup husky ตอน install package

ตั้งค่า lint-staged

เพิ่มใน package.json

ใช้กับ Prettier

1{
2  "lint-staged": {
3    "*.{js,ts,tsx,json,md}": [
4      "prettier --write"
5    ]
6  }
7}

เชื่อม Husky กับ lint-staged

แก้ไฟล์:

1.husky/pre-commit

เป็น:

1npx lint-staged

เสร็จแล้ว 🎉

ทุกครั้งที่ commit:

git commit

ระบบจะ format file อัตโนมัติ

Optional: ใช้กับ Prettier

ติดตั้ง

1npm install -D prettier

สร้างไฟล์:

1.prettierrc

ตัวอย่าง:

1{
2  "semi": true,
3  "singleQuote": true
4}

Optional: ใช้กับ Biome

ช่วงหลังหลายทีมเริ่มย้ายจาก ESLint + Prettier มาใช้ Biome

เพราะ:

เร็วมาก
setup ง่าย
formatter + linter ในตัวเดียว
written in Rust

ติดตั้ง Biome

1npm install -D @biomejs/biome

initialize config

1npx @biomejs/biome init

จะได้:

1biome.json

ตัวอย่าง lint-staged กับ Biome

1{
2  "lint-staged": {
3    "*.{js,ts,tsx,json}": [
4      "biome check --write"
5    ]
6  }
7}

Biome จะ:

✅ lint
✅ format
✅ fix auto

ใน command เดียว

Prettier vs Biome

Feature	Prettier	Biome
Formatter	✅	✅
Linter	❌	✅
Speed	เร็ว	เร็วมาก
Config	แยก ESLint	ตัวเดียว
Written in	JS	Rust

ตัวอย่าง Setup จริงที่แนะนำ

แบบ Traditional

Husky
lint-staged
ESLint
Prettier

เหมาะกับ project เก่า

แบบ Modern

Husky
lint-staged
Biome

setup ง่ายกว่าเยอะ

ตัวอย่าง package.json แบบใช้งานจริง

ใช้ Biome

1{
2  "scripts": {
3    "prepare": "husky"
4  },
5  "lint-staged": {
6    "*.{js,ts,tsx,json}": [
7      "biome check --write"
8    ]
9  }
10}

Tips ที่ควรรู้

1. อย่า ignore

ควร commit เข้า git

❌ ไม่ต้องใส่

1.gitignore

เพราะทุกคนในทีมต้องใช้ hook เดียวกัน

2. ใช้ร่วมกับ CI เสมอ

ถึง local จะมี husky แล้ว

CI ก็ยังควร run:

1npm run lint

อีกรอบ

3. อย่า run เยอะเกินใน pre-commit

สิ่งที่เหมาะ:

lint
format
type-check เล็กน้อย

สิ่งที่ไม่ควร:

build ทั้งระบบ
e2e tests
docker compose up

สรุป

ถ้าคุณอยากให้ codebase:

✅ สะอาด
✅ มาตรฐานเดียวกัน
✅ ลด human error
✅ commit ได้มั่นใจขึ้น

การใช้ Husky + lint-staged ถือเป็นหนึ่งใน setup ที่ควรมีแทบทุก modern frontend/backend project

และถ้าอยากลดความซับซ้อนของ tooling:

👉 ลองใช้ Biome แทน ESLint + Prettier ก็เป็นทางเลือกที่น่าสนใจมากในปีนี้

huskylint-stagedgit-hooksprettierbiomeeslintjavascripttypescriptnodejsfrontendbackenddeveloper-toolscode-qualityweb-developmentnextjsdevops

Teekayu Poongkawabutr (Pon)(Creaml4tt3)

Related Blogs

Next.js View Transitions ใช้ยังไง? พร้อมตัวอย่างจริง

03 May 2026 15:30a month ago

Next.js SEO Checklist 2026: 12 เทคนิคเพิ่มอันดับ Google สำหรับเว็บไซต์ Next.js

01 Jun 2026 17:0014 days ago

Latest Blogs

View all