Code Formatter · จัดรูปแบบโค้ด

Code Formatter คืออะไร?

Code Formatter จัดรูปแบบโค้ด HTML, CSS, JavaScript, TypeScript, JSON ด้วย Prettier และ SQL ด้วย sql-formatter พร้อมย่อโค้ด (Minify) ด้วย Terser และ Minifier แบบ tokenizer

ใช้ทำอะไรได้บ้าง

• จัดโค้ดที่ได้มาจากแหล่งอื่นให้อ่านง่าย
• ย่อโค้ดก่อนฝังในหน้าเว็บ
• จัด SQL query ยาว ๆ

เครื่องมือย่อยในหมวดนี้

• HTML Formatter
• CSS Formatter
• JavaScript Formatter
• TypeScript Formatter
• JSON Formatter
• SQL Formatter
• HTML Minifier
• CSS Minifier
• JavaScript Minifier

วิธีใช้งาน

1. เลือกภาษา
2. วางโค้ด ตั้งค่า indent
3. กด Format หรือ Minify (Ctrl/⌘+Enter)
4. คัดลอกหรือดาวน์โหลด

ตัวอย่าง Input / Output

function a(b){return b*2}

function a(b) {
  return b * 2;
}

เหมาะกับงานแบบไหน

• Code review
• ทำความสะอาดโค้ดตัวอย่าง
• เตรียมโค้ดสำหรับเอกสาร

ข้อจำกัดที่ควรรู้

• โค้ดที่มี Syntax ผิดจะจัดรูปแบบไม่ได้ ระบบจะแสดงตำแหน่งที่ Parser พบปัญหา
• HTML Minifier ใช้ DOMParser ของ Browser จึงอาจปรับโครงสร้าง HTML ที่ไม่ถูกต้องตามมาตรฐาน
• CSS Minifier ลบช่องว่าง/comment เท่านั้น ไม่รวม rule หรือย่อค่า

คำถามที่พบบ่อย (FAQ)