Why Biome

Biome เป็นเครื่องมือสำหรับจัดรูปแบบ (format) และตรวจสอบ (lint) ไฟล์ JavaScript/TypeScript, JSON และ CSS ที่ทำงานเร็วมาก โดยรวมความสามารถ:

คุณสมบัติ	Biome	ESLint
ความเร็ว	⚡ เร็วมาก	⏳ ช้ากว่า
การจัดรูปแบบไฟล์	✅ มีในตัว	❌ ต้องใช้ Prettier
การตรวจสอบโค้ด	✅ มีในตัว	✅ มีในตัว
การจัดเรียง import	✅ มีในตัว	❌ ต้องใช้ plugin
ภาษา supported	JS/TS, JSON, CSS	JS/TS เท่านั้น
Config	ไฟล์เดียว	หลายไฟล์

ประโยชน์หลัก:

• ⚡ ความเร็วสูง
• 🛠️ เครื่องมือเดียวแทนหลายอย่าง
• 🔌 ใช้งานกับ editor ต่างๆ ได้

Get started

1. ติดตั้ง Biome:

bun

bun add -D @biomejs/biome

npm

npm install -D @biomejs/biome

pnpm

pnpm add -D @biomejs/biome

yarn

yarn add -D @biomejs/biome

เพิ่มสคริปต์ใน package.json:

{
  "scripts": {
    // ตรวจสอบข้อผิดพลาดในโค้ด
    "lint": "biome check .",
    // จัดรูปแบบโค้ดทั้งหมด
    "format": "biome format .",
    // ตรวจสอบและแก้ไขโค้ดอัตโนมัติเมื่อติดตั้ง dependencies (เหมาะสำหรับ git hooks)
    "prepare": "biome check --write ."
  }
}

2. สร้างไฟล์กำหนดค่า:

npx @biomejs/biome init

3. ใช้งานกับโปรเจคของคุณ:

npm run lint   # ตรวจสอบโค้ด
npm run format # จัดรูปแบบไฟล์

Config

ไฟล์กำหนดค่า biome.json จะถูกสร้างเมื่อรันคำสั่ง npx @biomejs/biome init

ตัวอย่างการตั้งค่าพื้นฐาน:

{
  "$schema": "https://biomejs.dev/schemas/1.5.3/schema.json",
  "organizeImports": {
    "enabled": true
  },
  "linter": {
    "enabled": true,
    "rules": {
      "recommended": true
    }
  },
  "formatter": {
    "enabled": true,
    "formatWithErrors": false,
    "indentStyle": "space",
    "indentWidth": 2
  }
}

สามารถปรับแต่งเพิ่มเติมตามต้องการ เช่น:

• กฎการตรวจสอบโค้ด (linter rules)
• รูปแบบการจัดวาง (formatter options)
• การจัดเรียง import (organizeImports)