UTILS.
ทำงานในเบราว์เซอร์ 100%
🎨

ตัวจัดรูปแบบ JavaScript

จัดรูปแบบ JavaScript และ JSON ที่ถูกย่อหรือรกให้สวยงามด้วยการเยื้อง ระยะห่าง และการขึ้นบรรทัดที่สม่ำเสมอ — ตัวจัดรูปแบบที่เขียนด้วยมือทำงานเต็มรูปแบบในเบราว์เซอร์

— ผลลัพธ์จะแสดงที่นี่ —

เกี่ยวกับเครื่องมือนี้

ตัวจัดรูปแบบ JavaScript จัดรูปแบบ JavaScript และ JSON ที่ถูกย่อ อยู่บรรทัดเดียว หรือเยื้องไม่สม่ำเสมอ ให้เป็นซอร์สโค้ดที่สะอาดและอ่านง่ายด้วยการเยื้องและระยะห่างที่สม่ำเสมอ มีประโยชน์สำหรับการอ่านไลบรารีที่รวมมัด การจัดโค้ดที่คัดลอกมาให้เป็นระเบียบ หรือการตรวจสอบ JSON blob ทุกอย่างเกิดขึ้นในเบราว์เซอร์ของคุณ — โค้ดถูกจัดรูปแบบใหม่เป็นข้อความเท่านั้น ไม่เคยถูกรัน จึงไม่มี eval ไม่มี new Function และไม่มีการอัปโหลด

ตัวจัดรูปแบบเป็น tokenizer ที่เขียนด้วยมือ ไม่ใช่ regex แฮก: มันสแกนซอร์สเป็น token ในขณะที่ข้ามภายในของสตริง template literal นิพจน์ปกติ และคอมเมนต์แบบบรรทัด/บล็อกอย่างถูกต้อง ดังนั้นเครื่องหมายคำพูดและสแลชภายในสิ่งเหล่านั้นจึงไม่ถูกเข้าใจผิดว่าเป็นโครงสร้าง วิธี lookbehind แบบคลาสสิกแยกตัวดำเนินการหารออกจากลิเทอรัลนิพจน์ปกติ จากนั้นสตรีม token จะถูกปล่อยใหม่ด้วยการขึ้นบรรทัดใหม่หลัง '{', '[' และ ';' ลดการเยื้องบรรทัดก่อน '}' และ ']' หนึ่งรายการต่อบรรทัดภายในลิเทอรัล object และ array และเว้นวรรคหนึ่งช่องรอบตัวดำเนินการและหลังคีย์เวิร์ด

เลือกการเยื้องเป็น 2 ช่อง 4 ช่อง หรือแท็บ และสไตล์วงเล็บปีกกา: collapse เก็บวงเล็บเปิดไว้บรรทัดเดียวกัน (K&R / 1TBS) ขณะที่ expand ย้ายไปไว้บรรทัดของตัวเอง (Allman) เนื่องจากเครื่องมือรักษาเนื้อหาสตริงและ regex ทีละไบต์ โค้ดที่จัดรูปแบบใหม่จึงมีความหมายเหมือนกับอินพุตทุกประการ คัดลอกผลลัพธ์ตรงไปยังโปรแกรมแก้ไขของคุณได้เลย

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

มันรันหรือประเมินโค้ดของฉันไหม?
ไม่ ตัวจัดรูปแบบเพียงแยก token และปล่อยซอร์สของคุณใหม่เป็นข้อความ มันไม่เคยเรียก eval หรือ new Function และไม่เคยรันโค้ด ดังนั้นการวาง JavaScript ที่ไม่น่าเชื่อถือหรือเป็นกรรมสิทธิ์จึงปลอดภัย งานทั้งหมดอยู่ในเบราว์เซอร์ของคุณ
ใช้ได้กับ JSON ด้วยไหม?
ได้ JSON เป็นชุดย่อยของไวยากรณ์ JavaScript ดังนั้นการวาง object หรือ array ของ JSON ที่ถูกย่อจะจัดรูปแบบใหม่เป็นแบบเยื้อง หนึ่งคีย์ต่อบรรทัด สตริง ตัวเลข และโครงสร้างซ้อนจะถูกจัดรูปแบบเหมือนใน JavaScript
สไตล์วงเล็บปีกกาต่างกันอย่างไร?
Collapse (K&R / 1TBS) เก็บวงเล็บเปิดไว้บรรทัดเดียวกับคำสั่ง เช่น 'if (x) {' Expand (Allman) วางวงเล็บเปิดไว้บรรทัดของตัวเองใต้คำสั่ง ทั้งสองแบบให้โค้ดที่ถูกต้องเหมือนกัน — ต่างกันเพียงเลย์เอาต์
มันจะเปลี่ยนสิ่งที่โค้ดของฉันทำไหม?
ไม่ เปลี่ยนเฉพาะช่องว่าง การเยื้อง และการขึ้นบรรทัดเท่านั้น เนื้อหาของสตริง template literal และนิพจน์ปกติถูกรักษาไว้ทุกประการ ดังนั้นเอาต์พุตที่จัดรูปแบบใหม่จึงทำงานเหมือนกับซอร์สเดิม

เครื่องมือเพิ่มเติม