จัดรูปแบบโค้ด

ทำอะไรได้

ตัวจัดรูปแบบโค้ดรับโค้ดที่อัดแน่น ถูกย่อ (minify) หรือย่อหน้าไม่สม่ำเสมอ แล้วพิมพ์ออกมาใหม่ในสไตล์ที่สะอาดและสม่ำเสมอ รองรับภาษาที่เจอบ่อยที่สุดในงานเว็บ ได้แก่ HTML, CSS, SCSS, Less, JavaScript, TypeScript, JSON, XML, Markdown, YAML และ GraphQL

เบื้องหลังใช้ Prettier ซึ่งเป็นตัวจัดรูปแบบที่ใช้ในโปรเจกต์นับล้าน ผลลัพธ์จึงหน้าตาเหมือนโค้ดที่จัดรูปแบบใน VS Code หรือโดย pre-commit hook ทุกประการ parser ของแต่ละภาษาจะโหลดเมื่อคุณเลือกภาษานั้นเท่านั้น หน้าเว็บจึงยังเร็วอยู่

วิธีใช้งาน

1. เลือก ภาษา ของโค้ด
2. วางโค้ด หรือเปิดไฟล์
3. เลือกรูปแบบ ย่อหน้า (2 ช่องว่าง, 4 ช่องว่าง หรือแท็บ) และ ความกว้างบรรทัด บรรทัดที่ยาวเกินความกว้างจะถูกตัดขึ้นบรรทัดใหม่ในจุดที่ภาษาอนุญาต
4. สำหรับ JavaScript และ TypeScript เลือกว่าจะให้คำสั่งลงท้ายด้วย เครื่องหมายอัฒภาค (;) หรือไม่ สำหรับสคริปต์และสไตล์ชีต เลือก เครื่องหมายคำพูดเดี่ยว หากโปรเจกต์ของคุณนิยมแบบนั้น
5. คัดลอกผลลัพธ์หรือดาวน์โหลด

ตัวอย่าง

ตัวอย่างเป็นหน้า HTML บรรทัดเดียวที่มี CSS และ JavaScript แบบ inline หลังจัดรูปแบบ แต่ละ element จะอยู่บรรทัดของตัวเอง กฎ CSS ถูกขยายเป็นหนึ่ง declaration ต่อบรรทัด และ arrow function ในสคริปต์จะได้วงเล็บและเครื่องหมายอัฒภาค:

<script>
  const items = [1, 2, 3];
  items.forEach((i) => console.log(i));
</script>

เคล็ดลับ

• การจัดรูปแบบยังเป็นการตรวจ syntax แบบรวดเร็วด้วย หาก Prettier parse อินพุตไม่ได้ ข้อความแสดงข้อผิดพลาดจะบอกบรรทัดและคอลัมน์ ให้คุณกระโดดไปที่จุดผิดได้ทันที
• XML ถูกจัดรูปแบบโดยถือว่าช่องว่างไม่มีความหมาย แท็กที่ซ้อนกันจึงถูกย่อหน้า หากเอกสารของคุณต้องพึ่งช่องว่างภายใน element แบบเป๊ะ ๆ ให้ตรวจผลลัพธ์ก่อนนำไปใช้
• ต้องการทำกลับกัน? ใช้ตัวย่อ JavaScript และ CSS เพื่อลดขนาดโค้ดสำหรับ production หรือใช้ตัวจัดรูปแบบ JSON สำหรับตรวจสอบและย่อ JSON