Biome Config Generator: สร้าง biome.json โดยไม่ต้องอ่านเอกสาร
สร้าง biome.json ของ Biome v2 พร้อม formatter, linter rules, assist actions และ VCS integration ผ่านฟอร์ม visual — output คัดลอกวางได้ ฟรีในเบราว์เซอร์
Table of Contents
ใครที่เคยเขียนไฟล์ biome.json ด้วยมือเปล่าคงรู้ดีว่ามันไม่สนุกเลย ต้องจำ key ใน schema ทั้งส่วน formatter อย่าง indent style, quote style และ semicolons ไปจนถึงส่วน linter rules และ VCS integration ยิ่งไปกว่านั้น เมื่อ Biome v2 ออกมาพร้อมกับการเปลี่ยน schema ของ config จากรุ่นก่อน config ตัวอย่างเก่า ๆ ที่คัดลอกมาจากบทความต่าง ๆ ก็อาจใช้ไม่ได้ทันทีอีกต่อไป
Biome Config Generator ถูกสร้างมาเพื่อจบปัญหานี้โดยเฉพาะ เปลี่ยนการเขียน config ให้กลายเป็นการกดเลือกบนฟอร์ม visual ธรรมดา เครื่องมือนี้ฟรี ทำงานใน browser 100% ไม่ต้องสมัครสมาชิกและไม่ต้องติดตั้งอะไรเพิ่ม เลือกตัวเลือกที่ต้องการเสร็จ ระบบจะสร้าง biome.json ของ Biome v2 ที่ถูกต้องออกมาให้ทันที พร้อมคัดลอกวางลงโปรเจกต์ได้ในไม่กี่วินาที บทความนี้จะพาไปดูว่าแต่ละส่วนของ config ทำอะไร และวิธีใช้เครื่องมือนี้ให้เกิดประโยชน์สูงสุด
ทำไมต้องใช้ Biome Config Generator?
- ไม่ต้องไล่อ่านเอกสาร — ตัวเลือกทุกตัวถูกแปลงเป็นฟอร์มที่มีป้ายกำกับชัดเจน ไม่ต้องจำชื่อ key ใน schema ว่าอยู่ระดับไหน
- ลดโอกาส config พัง — output ถูกสร้างตามโครงสร้างของ Biome v2 โดยตรง จึงไม่มี typo หรือ key ที่เลิกใช้แล้วหลุดเข้ามา
- เห็นภาพรวมครบในหน้าเดียว — formatter, linter rules, assist actions และ VCS integration รวมอยู่ในฟอร์มเดียว ปรับอะไรก็เห็นผลใน output ทันที
- เริ่มต้นง่ายสำหรับมือใหม่ — ไม่รู้จะตั้งอะไรดี เลือก preset recommended ของ linter แล้วปล่อยให้ค่า default ทำหน้าที่ของมัน
- ฟรีและเป็นส่วนตัว — สร้างใน browser ทั้งหมด การตั้งค่าของคุณไม่ถูกส่งไปเซิร์ฟเวอร์ใด ๆ
- คัดลอกวางได้ทันที — กดปุ่ม copy แล้วนำไปวางเป็น biome.json ที่รูทโปรเจกต์ได้เลย ไม่ต้องจัดรูป JSON เอง
ฟีเจอร์หลัก
| ฟีเจอร์ | ทำอะไร |
|---|---|
| ฟอร์ม visual สำหรับ formatter | เลือก indent style (space/tab), line width, quote style และ semicolons ได้ตามนิสัยของทีม |
| สวิตช์ linter rules | เปิด preset recommended หรือปรับกลุ่ม rule เฉพาะทางได้อย่างละเอียด |
| ตั้งค่า assist actions | เปิดใช้งาน assist ของ Biome v2 ที่ช่วยจัดการงานอัตโนมัติ เช่น การจัดเรียง import |
| VCS integration | เชื่อมต่อกับ git เพื่อให้ Biome เคารพไฟล์ที่ถูก ignore ไว้ |
| Output แบบเรียลไทม์ | biome.json อัปเดตทันทีที่เปลี่ยนตัวเลือก พร้อมปุ่มคัดลอกในตัว |
จุดเด่นที่สุดของเครื่องมือนี้คือความถูกต้อง ทุกตัวเลือกถูกแปลงเป็น key ที่ schema ของ Biome v2 รองรับจริง ไม่ใช่แค่ template สำเร็จรูปที่ค้นมาจากที่ไหนสักแห่ง อีกอย่างคือความเร็ว — ไม่มีขั้นตอนสมัคร ไม่มีการรอคิว server เปิดหน้าเว็บแล้วเริ่มตั้งค่าได้เลย
วิธีสร้าง biome.json
- เปิดเครื่องมือใน browser แล้วดูแผงตัวเลือกที่จัดแบ่งเป็นส่วน ๆ ให้เรียบร้อย
- ตั้งค่า formatter เริ่มจากเลือก indent style เป็น space หรือ tab กำหนด line width เลือก quote style แบบเดี่ยวหรือคู่ และตัดสินใจว่าจะเปิดหรือปิด semicolons
- ปรับส่วน linter เปิดสวิตช์ recommended เพื่อใช้ชุด rule ที่ทีม Biome แนะนำ หรือปิด rule เฉพาะตัวที่ไม่เหมาะกับโปรเจกต์ของคุณ
- เลือก assist actions ที่ต้องการ แล้วเปิด VCS integration ถ้าโปรเจกต์ใช้ git และมี .gitignore อยู่แล้ว
- กดปุ่มคัดลอก output นำไปวางเป็นไฟล์ biome.json ที่รูทโปรเจกต์ จากนั้นลองรัน biome check . เพื่อยืนยันว่าทุกอย่างทำงานถูกต้อง
อะไรอยู่ใน Config ของ Biome v2
ส่วน formatter กำหนดรูปหน้าตาของโค้ด ตัวเลือกหลักคือ indentStyle ระหว่าง "space" กับ "tab" โดยคู่กับ lineWidth ที่บอกว่าบรรทัดยาวสุดเท่าไรก่อนจะถูกตัด ส่วน quoteStyle เลือกได้ระหว่าง "double" กับ "single" และ semicolons เลือกได้ทั้ง "always" หรือ "asNeeded" แบบที่ไม่ใส่เครื่องหมายอัฒภาคเมื่อไม่จำเป็น
ส่วน linter rules ใน Biome v2 จัดกลุ่ม rule อย่างเป็นระเบียบ และวิธีเริ่มต้นที่ดีที่สุดคือเปิด "recommended": true เพื่อรับชุดตรวจที่ทีม Biome คัดสรรมาแล้วว่าสมดุลระหว่างความเข้มงวดกับเสียงรบกวน จากนั้นค่อย override เฉพาะ rule ที่จำเป็น
Assist actions เป็นโครงสร้างใหม่ที่แยกออกมาใน Biome v2 เช่น การจัดเรียง import ที่เดิมอยู่ในส่วน organizeImports ของ v1 การแยกส่วนนี้ทำให้งานจัดระเบียบโค้ดอัตโนมัติไม่ปนกับการตั้งค่า linter อีกต่อไป
VCS integration เปิดใช้แล้ว Biome จะอ่านไฟล์ที่ git ละเว้นผ่าน .gitignore ประโยชน์คือลด false positive และทำให้การ check เร็วขึ้นมาก เพราะไม่ต้องสแกน build output หรือ node_modules โดยใช่เหตุ
สำหรับคนที่ใช้ v1 อยู่ ข้อควรระวังคือ schema เปลี่ยนหลายจุด ทั้งการย้าย organizeImports ไป assist และการจัดโครงสร้าง rules ใหม่ วิธีย้ายที่ปลอดภัยที่สุดคือสร้าง config ใหม่จากเครื่องมือนี้ แล้วค่อยนำค่า override เดิมมาใส่เพิ่มทีละส่วน ตัวอย่าง output ที่ได้หน้าตาประมาณนี้
{
"$schema": "https://biomejs.dev/schemas/2.2.0/schema.json",
"formatter": { "indentStyle": "space", "lineWidth": 100, "semicolons": "asNeeded" },
"linter": { "enabled": true, "rules": { "recommended": true } },
"vcs": { "enabled": true, "clientKind": "git", "useIgnoreFile": true }
}
กรณีใช้งานจริง
เริ่มโปรเจกต์ใหม่
คุณเพิ่งสร้างโปรเจกต์ React หรือ Node.js ใหม่ และอยากได้ Biome ตั้งแต่วันแรก เปิดเครื่องมือ เลือก space 2 ช่อง, double quotes และเปิด semicolons แบบ asNeeded พร้อม recommended linter แล้วคัดลอกไปวาง จบภายในไม่ถึงนาที โดยไม่ต้องเปิดเอกสารแม้แต่หน้าเดียว
ย้ายจาก ESLint และ Prettier
โปรเจกต์เดิมใช้ทั้ง ESLint และ Prettier รวม ๆ แล้ว config ยาวหลายร้อยบรรทัด เวลาอัปเดตต้องดูสองไฟล์ ตอนนี้ Biome ทำงานทดแทนทั้งคู่ด้วยไฟล์เดียว ใช้เครื่องมือสร้าง config ที่คงนิสัยเดิมไว้ เช่น quote style และ indent แบบเดียวกับที่ Prettier ตั้งไว้ แล้วค่อยถอด dependency เก่าออกทีเดียวจบ
มาตรฐานสไตล์ทีม
ทีมห้าคน มีคนใช้ tab บ้าง space บ้าง quote เดี่ยวบ้างคู่บ้าง วิธีแก้ที่ตรงไปตรงมาคือประชุมเลือกมาตรฐานครั้งเดียว แล้วใช้ฟอร์ม visual สร้าง config ที่ตรงกันทุกตัวอักษร จากนั้น commit ไฟล์ biome.json เดียวเป็นมาตรฐานสำหรับทุก repo ของทีม ใครไม่เห็นด้วยก็ชวนมาแก้ที่ฟอร์มแล้วสร้างใหม่พร้อมกัน
ตั้งค่า lint ที่เข้ากับ CI
เมื่อรัน biome ci . ใน pipeline สิ่งที่ต้องการคือ config ที่ deterministic คือผลลัพธ์ต้องเหมือนกันทุกเครื่อง การสร้าง config จากเครื่องมือแล้ว commit ลง repo ทำให้ทั้ง local และ CI ใช้เกณฑ์เดียวกัน ไม่มีปัญหาที่ build ผ่านในเครื่องตัวเองแต่ล้มบน server
แนวทางปฏิบัติที่ดี
- Commit ไฟล์ biome.json เข้า git เสมอ เพื่อให้ทุกคนในทีมและทุก environment ใช้ config ชุดเดียวกัน
- เริ่มจาก preset recommended แล้วค่อยปิด rule ที่ชนกับโค้ดเดิมทีละตัว ดีกว่าเริ่มจาก config ว่างแล้วไล่เปิดเอง
- เก็บ $schema ไว้ในไฟล์ เพราะมันช่วยให้ editor ให้ autocomplete และตรวจ schema ให้ตอนแก้ config ในอนาคต
- เปิด VCS integration ทันทีที่มี .gitignore เพื่อให้การ check เร็วขึ้นและไม่เจอ error จากไฟล์ที่ไม่ควรตรวจ
- ให้ Biome เป็นผู้จัดฟอร์แมตตัวเดียว อย่าปล่อยให้ editor extension อื่นจัดโค้ดแยกทาง ไม่งั้นสองเครื่องมือจะตีกันเอง
- รัน biome check เป็นขั้นตอนบังคับใน CI เพื่อกันโค้ดที่ไม่ผ่านมาตรฐานจากการถูก merge เข้า main
พร้อมให้โปรเจกต์ของคุณมีมาตรฐานระดับ production โดยไม่ต้องอ่านเอกสารสักหน้าหรือยัง เปิด Biome Config Generator ตั้งค่าผ่านฟอร์มสักสองสามนาที แล้วคัดลอก biome.json ไปใช้ได้เลย ฟรีทั้งหมด ไม่ต้องสมัคร และทำงานใน browser 100%
เครื่องมือที่เกี่ยวข้องที่คุณอาจสนใจ:
- ESLint Config Generator — สำหรับทีมที่ยังใช้ ESLint อยู่และอยากสร้าง config ผ่านฟอร์มแบบเดียวกัน
- Gitignore Generator — สร้าง .gitignore ตาม stack ของโปรเจกต์ ใช้คู่กับ VCS integration ของ Biome ได้ลงตัว
- Markdown Linter — ตรวจความเรียบร้อยของไฟล์ Markdown อย่าง README และเอกสารใน repo
ขอให้จัดฟอร์แมตอย่างสนุก!
คำถามที่พบบ่อย
ถ: เครื่องมือนี้รองรับ Biome เวอร์ชันไหน?
ตอบ: สร้าง config ตาม schema ของ Biome v2 โดยเฉพาะ รวมถึงส่วน assist actions ที่เป็นโครงสร้างใหม่ใน v2 ถ้าโปรเจกต์ยังใช้ v1 อยู่ ควรอัปเกรด Biome ก่อนนำ config ที่ได้ไปใช้
ถ: ข้อมูลที่กรอกถูกส่งขึ้นเซิร์ฟเวอร์ไหม?
ตอบ: ไม่ เครื่องมือสร้าง config ใน browser ทั้งหมด ทำงานบนเครื่องของคุณล้วน ๆ แม้ตัดอินเทอร์เน็ตหลังโหลดหน้าเสร็จก็ยังใช้งานได้ตามปกติ
ถ: ต้องสมัครสมาชิกหรือเสียค่าใช้จ่ายอะไรไหม?
ตอบ: ไม่ต้อง เครื่องมือฟรี 100% ไม่มีการล็อกอิน ไม่มีข้อจำกัดจำนวนครั้ง จะสร้าง config กี่ชุดก็ได้ตามต้องการ
ถ: เอา output ไปใช้ตรงไหนได้บ้าง?
ตอบ: คัดลอกไปวางเป็นไฟล์ biome.json ที่รูทของโปรเจกต์ ใช้ได้กับโปรเจกต์ JavaScript, TypeScript, React หรือ Node.js ทุกประเภท และรองรับการรันผ่านคำสั่ง biome check หรือ biome ci ใน CI ด้วย
ถ: ปรับค่าเพิ่มเองหลังจากได้ output แล้วทำได้ไหม?
ตอบ: ได้ output ที่ได้เป็น JSON ธรรมดา แก้ค่าใด ๆ เพิ่มเองได้ตามใจ หรือจะกลับมาปรับที่ฟอร์มแล้วสร้างใหม่เมื่อความต้องการเปลี่ยนก็ย่อมได้