จัดรูปแบบโค้ด (Beautify)
วางโค้ดที่ถูกย่อหรือจัดหน้าไม่เป็นระเบียบ แล้วได้โค้ดที่อ่านง่ายกลับมา
ผลลัพธ์จะแสดงที่นี่จัดรูปแบบในเบราว์เซอร์ของคุณทั้งหมด โค้ดไม่ถูกส่งขึ้นเซิร์ฟเวอร์
เกี่ยวกับเครื่องมือนี้
เครื่องมือ จัดรูปแบบโค้ด (Beautify) เปลี่ยนโค้ดที่ถูกย่อหรือจัดหน้ามั่ว ๆ ให้กลับมาอ่านง่าย รองรับ JavaScript, CSS, HTML, JSON, XML และ SQL โดยเดาภาษาให้อัตโนมัติจากสิ่งที่คุณวางลงไป
งานที่คนใช้บ่อยที่สุดคือ อ่านไฟล์ที่ถูก minify มาแล้ว เช่น ไฟล์ .js หรือ .css จากเว็บอื่นที่รวมทุกอย่างไว้ในบรรทัดเดียว หรือโค้ดที่คัดลอกมาจากอีเมลหรือแชตแล้วการเยื้องหายหมด
จุดสำคัญคือเครื่องมือนี้ใช้ ตัวอ่านไวยากรณ์จริง ไม่ใช่การนับวงเล็บปีกกา เพราะโค้ดอย่าง const a = "}" หรือ /[{}]/ มีวงเล็บอยู่ในข้อความ ตัวจัดรูปแบบที่ใช้ regular expression จะนับผิดและทำให้การเยื้องพังทั้งไฟล์
โหมด JSON ทำงานด้วยการอ่านและเขียนใหม่ จึง ตรวจความถูกต้องไปในตัว ถ้ามีจุลภาคเกินหรือคีย์ไม่ได้ครอบด้วยเครื่องหมายคำพูด ก็จะบอกทันทีแทนที่จะจัดรูปแบบไฟล์ที่ใช้งานไม่ได้ให้สวยงาม ทุกอย่างทำงานในเบราว์เซอร์ โค้ดของคุณไม่ถูกส่งออก
วิธีใช้งาน
- 1วางโค้ดที่ถูกย่อหรือจัดหน้าไม่เป็นระเบียบลงในช่องป้อนข้อมูล
- 2ระบบจะเดาภาษาให้อัตโนมัติ หรือเลือกเองได้จากรายการ
- 3ปรับจำนวนช่องว่างของการย่อหน้าตามที่ทีมคุณใช้
- 4กดคัดลอกหรือดาวน์โหลดโค้ดที่จัดรูปแบบแล้ว
คำถามที่พบบ่อย
- รองรับภาษาอะไรบ้าง
- JavaScript, CSS, HTML, JSON, XML และ SQL โดยแต่ละภาษาใช้ตัวจัดรูปแบบที่เข้าใจไวยากรณ์ของภาษานั้นจริง ไม่ใช่การเดาจากวงเล็บปีกกา
- จะทำให้โค้ดของฉันเสียหายไหม
- การจัดรูปแบบเปลี่ยนแค่ช่องว่างและการขึ้นบรรทัด ไม่เปลี่ยนความหมายของโค้ด และเพราะใช้ตัวอ่านไวยากรณ์จริง วงเล็บปีกกาที่อยู่ในข้อความหรือใน regular expression จึงไม่ทำให้การเยื้องเพี้ยน
- ต่างจากการกด format ใน editor อย่างไร
- ได้ผลใกล้เคียงกัน แต่เครื่องมือนี้ใช้ได้ทันทีบนเบราว์เซอร์ เหมาะกับตอนที่ต้องอ่านโค้ดจากที่อื่น เช่น ดูไฟล์ที่ถูก minify ของเว็บอื่น หรืออ่านโค้ดบนเครื่องที่ไม่มี editor ติดตั้ง
- ทำไมเลือก JSON แล้วขึ้นว่าผิดพลาด
- เพราะโหมด JSON จะตรวจความถูกต้องไปด้วย ถ้าไฟล์มีคอมเมนต์ มีจุลภาคเกิน หรือใช้คีย์ที่ไม่มีเครื่องหมายคำพูด จะถือว่าไม่ใช่ JSON ที่ถูกต้อง ให้เลือกโหมด JavaScript แทนถ้าต้องการแค่จัดรูปแบบ
- โค้ดของฉันถูกส่งขึ้นเซิร์ฟเวอร์ไหม
- ไม่ การจัดรูปแบบทั้งหมดทำในเบราว์เซอร์ของคุณ โค้ดไม่ถูกส่งออกไปที่ใด