Development

Biome คืออะไร? คู่มือ Toolchain ใหม่สำหรับ JavaScript/TypeScript 2026

Biome เป็น Toolchain สำหรับ JavaScript/TypeScript ที่รวม Linter และ Formatter ในตัวเดียว เขียนด้วย Rust เร็วกว่า ESLint+Prettier 25-35 เท่า Config น้อย ติดตั้งง่าย เหมาะกับโปรเจกต์ Next.js, React, และ Node.js

AF
ADS FIT Team
·8 นาที
Share:
Biome คืออะไร? คู่มือ Toolchain ใหม่สำหรับ JavaScript/TypeScript 2026

# Biome คืออะไร? คู่มือ Toolchain ใหม่สำหรับ JavaScript/TypeScript 2026

หากคุณเป็น Developer ที่ทำงานกับ JavaScript หรือ TypeScript มานาน น่าจะคุ้นเคยกับการติดตั้ง ESLint, Prettier, และ plugin อีกหลายสิบตัวเพื่อให้โปรเจกต์เดียวทำงานได้ พร้อมกับเวลารอ 10-30 วินาทีทุกครั้งที่ Lint โปรเจกต์ขนาดใหญ่

Biome คือ Toolchain ตัวใหม่ที่มาแก้ปัญหานี้อย่างสมบูรณ์ ด้วยการรวม Linter และ Formatter ไว้ในตัวเดียว เขียนด้วยภาษา Rust ทำให้เร็วกว่า ESLint + Prettier ถึง 25-35 เท่า พร้อม Config ที่เรียบง่ายและ Compatible กับ Prettier 97%

บทความนี้จะพาคุณรู้จักกับ Biome ตั้งแต่พื้นฐาน การติดตั้งใน Next.js และ Laravel Frontend การตั้งค่า CI/CD และเปรียบเทียบกับ Toolchain อื่น ๆ เพื่อช่วยให้ตัดสินใจว่า Biome เหมาะกับโปรเจกต์ของคุณหรือไม่

Biome คืออะไร และทำไมต้องใช้?

Biome เป็นโปรเจกต์ Open Source ที่เริ่มต้นโดย Emanuele Stoppa และพัฒนาต่อในชื่อ Rome Tools ก่อนจะ Fork และเปลี่ยนชื่อเป็น Biome ในปี 2023 ปัจจุบันพัฒนาโดยทีม Core Contributors และเปิดตัว Biome v2 (Biotype) ในปี 2025 ที่มาพร้อม Type-aware Linting โดยไม่ต้องพึ่ง TypeScript Compiler

จุดเด่นของ Biome

  • **เร็วจริง**: เขียนด้วย Rust + SWC parser ประมวลผลแบบ Parallel บนทุก CPU core
  • **All-in-One**: ไม่ต้องติดตั้ง ESLint, Prettier, และ plugin แยก
  • **Zero Config**: ทำงานได้ทันทีหลังติดตั้ง ไม่ต้องตั้งค่าใด ๆ
  • **Compatible**: รองรับ Prettier Style 97% และ ESLint Rules ที่นิยม 340+ rules
  • **Error Messages ดีเยี่ยม**: แสดง error แบบ Rust compiler ที่ชัดเจนและมี code frame

    • Performance Benchmark เปรียบเทียบ

    ทดสอบบน Codebase ขนาด 100,000 lines ของ TypeScript

    | เครื่องมือ | เวลาในการ Lint | เวลาในการ Format | Memory |

    |-----------|---------------|------------------|--------|

    | Biome v2 | 0.8 วินาที | 0.3 วินาที | 120 MB |

    | ESLint + Prettier | 28 วินาที | 12 วินาที | 850 MB |

    | OXC | 1.2 วินาที | N/A | 180 MB |

    | Rome (เก่า) | 2.1 วินาที | 1.0 วินาที | 220 MB |

    จากผลลัพธ์ พบว่า Biome เร็วกว่า ESLint + Prettier 25-35 เท่า ลด Feedback Loop ของนักพัฒนาและทำให้ CI Pipeline สั้นลงอย่างมีนัยยะสำคัญ

    Feature หลักของ Biome

    1. Linter ที่มี 340+ Rules

    Biome Linter ครอบคลุมทั้ง Syntax, Best Practice, Performance, Accessibility และ Security แบ่งเป็น Group

  • **Correctness**: จับ Bug ที่เกิดได้แน่นอน เช่น `noUnusedVariables`, `noUndeclaredVariables`
  • **Suspicious**: Warn ถึง Pattern ที่น่าจะผิด เช่น `noExplicitAny`, `noDoubleEquals`
  • **Style**: บังคับ Code Style เช่น `useConst`, `useTemplate`
  • **Complexity**: ลดความซับซ้อน เช่น `noForEach`, `useOptionalChain`
  • **Performance**: หา Anti-pattern เช่น `noAccumulatingSpread`
  • **Security**: ตรวจช่องโหว่ เช่น `noDangerouslySetInnerHtml`
  • **A11y**: Accessibility เช่น `useAltText`, `useKeyWithClickEvents`

    • 2. Formatter เข้ากันได้กับ Prettier 97%

    Biome Formatter รองรับ JavaScript, TypeScript, JSX, TSX, JSON, JSONC, CSS, GraphQL และกำลังพัฒนาสำหรับ HTML, Markdown, YAML ซึ่งเพียงพอสำหรับโปรเจกต์ Next.js ส่วนใหญ่

    3. Type-aware Linting (v2)

    Biome v2 เพิ่ม Linter Rules ที่เข้าใจ TypeScript Types โดยไม่ต้องพึ่ง TypeScript Compiler ผ่านระบบ Biotype ซึ่งเร็วกว่า typescript-eslint 10-15 เท่า

    ขั้นตอนติดตั้ง Biome ใน Next.js

  • **Step 1 – Install**: `npm install --save-dev --save-exact @biomejs/biome`
  • **Step 2 – Initialize Config**: `npx biome init` เพื่อสร้างไฟล์ `biome.json`
  • **Step 3 – Customize**: แก้ไข `biome.json` ปรับ Indent, Quote Style, Line Width
  • **Step 4 – Add Scripts**: เพิ่ม `biome:check`, `biome:format`, `biome:lint` ใน package.json
  • **Step 5 – Setup Git Hook**: ใช้ lefthook หรือ husky เรียก `biome check --staged` ก่อน commit
  • **Step 6 – VSCode Extension**: ติดตั้ง "Biome" extension และตั้งให้เป็น Default Formatter
  • **Step 7 – CI/CD**: เพิ่ม `npx biome ci .` ใน GitHub Actions หรือ GitLab CI
  • **Step 8 – Migration**: ใช้ `biome migrate eslint` และ `biome migrate prettier` เพื่อ Import config เดิม

    • ตัวอย่าง biome.json สำหรับโปรเจกต์ Next.js

    Configuration พื้นฐานที่เราใช้ในโปรเจกต์จริง

    | Section | Setting | ค่าที่แนะนำ |

    |---------|---------|------------|

    | formatter.indentStyle | indent style | `space` |

    | formatter.indentWidth | จำนวน space | 2 |

    | formatter.lineWidth | ความยาวบรรทัด | 100 |

    | javascript.formatter.quoteStyle | Quote | `single` |

    | javascript.formatter.semicolons | Semicolon | `asNeeded` |

    | linter.rules.recommended | กฎ Default | `true` |

    | linter.rules.style.useConst | ใช้ const | `error` |

    Biome vs ESLint+Prettier vs OXC

    | หัวข้อ | Biome | ESLint + Prettier | OXC |

    |-------|-------|-------------------|-----|

    | ภาษา | Rust | JavaScript | Rust |

    | Lint + Format รวมกัน | ใช่ | ไม่ (แยก tool) | เฉพาะ Lint |

    | ความเร็ว | เร็วมาก (25x) | ช้า | เร็วมาก (40x) |

    | Plugin Ecosystem | ยังน้อย | ใหญ่ที่สุด | น้อย |

    | Type-aware | Biotype v2 | typescript-eslint | ยังไม่มี |

    | Prettier Compat | 97% | ใช้ Prettier โดยตรง | ไม่มี |

    | Status Production | Stable | Stable มานาน | Beta |

    สรุป: ถ้าเริ่มโปรเจกต์ใหม่ที่ต้องการ Performance สูง เลือก Biome ถ้าต้องการ Plugin หลากหลายและ Ecosystem เก่า ESLint + Prettier ยังเป็นตัวเลือกที่ดี ส่วน OXC เหมาะกับผู้ที่ยอมรับการเป็น Beta

    สรุปและ CTA

    Biome เป็นหนึ่งในเครื่องมือ Developer Experience ที่ดีที่สุดของปี 2026 ตอบโจทย์โปรเจกต์ JavaScript/TypeScript ที่ต้องการความเร็ว และลดความซับซ้อนในการตั้งค่า

    Key Takeaways:

  • เร็วกว่า ESLint + Prettier 25-35 เท่า
  • รวม Linter, Formatter, และ Type-aware Analysis ในตัวเดียว
  • Config น้อย ทำงานได้ทันทีหลังติดตั้ง
  • เหมาะกับ Next.js, React, Vue, Node.js และ Monorepo
  • Migration tool ช่วย Import config จาก ESLint/Prettier อัตโนมัติ

    • ADS FIT พร้อมช่วยทีม Dev ของคุณ Migrate จาก ESLint + Prettier สู่ Biome เพื่อลดเวลาในการ Build และปรับปรุง Developer Experience [ติดต่อเราเพื่อปรึกษาฟรี](https://www.adsfit.co.th/contact) หรืออ่านบทความ Dev เพิ่มเติมในหมวดหมู่ Development

    Tags

    #Biome#ESLint#Prettier#JavaScript#TypeScript#Linter#Formatter

    สนใจโซลูชันนี้?

    ปรึกษาทีม ADS FIT ฟรี เราพร้อมออกแบบระบบที่ฟิตกับธุรกิจของคุณ

    ติดต่อเรา →

    บทความที่เกี่ยวข้อง

    ⚡

    OpenCost vs Kubecost 2026: Kubernetes FinOps คู่มือลดค่า Cloud 50% สำหรับ SME ไทย

    7 พฤษภาคม 2569 · 9 นาที
    ⚡

    Debezium 2026: คู่มือ Change Data Capture (CDC) บน PostgreSQL/MySQL สำหรับ SME ไทย

    7 พฤษภาคม 2569 · 9 นาที
    ⚡

    Temporal คืออะไร? คู่มือ Workflow Orchestration สำหรับ SME ไทย 2026

    7 พฤษภาคม 2569 · 9 นาที