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

10 May 2026 15:3012 days 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

Latest Blogs

View all

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

03 May 2026 15:3019 days ago

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

ลาออกครั้งแรกโดยไม่มีงานใหม่: ประสบการณ์จริงของ Junior Developer

21 Apr 2026 17:00a month ago

ประสบการณ์จริงของการลาออกครั้งแรกโดยยังไม่มีงานใหม่รองรับ จากเด็กจบสาย Graphic ที่ผันตัวมาเป็น Junior Developer ต้องเผชิญความไม่มั่นใจ การหางานสุดกดดัน และบทเรียนชีวิตที่ไม่มีในห้องเรียน

ตั้งค่า Rclone ใช้งานร่วมกับ Cloudflare R2 อย่างง่ายในไม่กี่ขั้นตอน

02 Jun 2025 11:00a year ago

เรียนรู้วิธีเชื่อมต่อ Rclone กับ Cloudflare R2 (Object Storage แบบ S3-compatible) พร้อมตัวอย่างการตั้งค่า การสำรองข้อมูลอย่างง่ายในไม่กี่ขั้นตอน

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

10 May 2026 15:3012 days 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)

Latest Blogs

View all