เครื่องมือจัดรูปแบบโค้ดฟรี: ทำให้โค้ด JavaScript, Python, HTML และอื่นๆ สวยงาม

จัดรูปแบบโค้ดรกๆ ให้เป็นระเบียบด้วยการเยื้องและระยะห่างที่เหมาะสมทันที รองรับ 12+ ภาษา รวมถึง JavaScript, Python, HTML, CSS และ Java ใช้งานผ่านเบราว์เซอร์ ปลอดภัย และฟรี ไม่ต้องสมัครสมาชิก

เครื่องมือจัดรูปแบบโค้ด

จัดรูปแบบโค้ดของคุณด้วยการคลิกเพียงครั้งเดียว เลือกภาษา วางโค้ด และรับโค้ดที่จัดรูปแบบอย่างถูกต้อง

เลือกภาษา

ป้อนโค้ด

โค้ดที่จัดรูปแบบ

วิธีใช้:

เลือกภาษาโปรแกรมมิ่งจากเมนูแบบดึงลง
วางโค้ดที่ยังไม่ได้จัดรูปแบบในพื้นที่ป้อนข้อมูล
คลิกปุ่ม 'จัดรูปแบบโค้ด'
คัดลอกผลลัพธ์ที่จัดรูปแบบจากพื้นที่ส่งออก

เครื่องคำนวณโหลด...

📚

เอกสารประกอบการใช้งาน

เครื่องมือจัดรูปแบบโค้ดคืออะไร?

เครื่องมือจัดรูปแบบโค้ดเป็นเครื่องมือที่เขียนโค้ดต้นฉบับใหม่โดยจัดการเยื้องบรรทัด การขึ้นบรรทัดใหม่ และช่องว่างให้สม่ำเสมอ โดยไม่เปลี่ยนการทำงานของโค้ด เครื่องมือนี้ทำงานในเว็บเบราว์เซอร์ และรองรับภาษาโปรแกรม 12 ภาษา รวมถึง JavaScript, Python, HTML และ CSS

เครื่องมือจัดรูปแบบโค้ดนี้ทำงานอย่างไร

เครื่องมือนี้ใช้ชุดกฎที่แตกต่างกันสำหรับแต่ละภาษา ไม่มีภาษาใดสร้างต้นไม้การแยกวิเคราะห์แบบเต็มของโค้ด ยกเว้น JSON

JSON จะถูกแยกวิเคราะห์ด้วยตัวแยกวิเคราะห์ JSON ในตัวของเบราว์เซอร์ จากนั้นพิมพ์ผลลัพธ์กลับโดยใช้การเยื้องบรรทัดสองช่องว่าง หาก JSON ไม่ถูกต้อง เครื่องมือจะแจ้งข้อผิดพลาดและไม่แสดงผลลัพธ์
JavaScript, TypeScript, Java, C, C++ และ C# ใช้เครื่องมือจัดรูปแบบเดียวกัน เครื่องมือจะสแกนโค้ดทีละอักขระ พร้อมติดตามวงเล็บปีกกา วงเล็บ และอัฒภาค { แต่ละตัวจะเริ่มบล็อกใหม่ที่เยื้องเข้าไป ส่วน } หรือ ; แต่ละตัวจะจบบรรทัด ความคิดเห็นและสตริงในเครื่องหมายคำพูดจะถูกคัดลอกโดยไม่เปลี่ยนแปลง เครื่องมือนี้จะไม่เพิ่มช่องว่างรอบตัวดำเนินการหรือหลังเครื่องหมายจุลภาคที่โค้ดเดิมไม่มี แต่จะจัดการเฉพาะการขึ้นบรรทัดใหม่และการเยื้องบรรทัด
Python จะอ่านการเยื้องบรรทัดที่มีอยู่ของแต่ละบรรทัด แล้วสร้างใหม่โดยใช้สี่ช่องว่างต่อหนึ่งระดับ ตามกฎการซ้อนระดับเดียวกับที่ภาษา Python ใช้เอง เครื่องมือนี้จะไม่แบ่งบรรทัดยาว ไม่เพิ่มบรรทัดว่าง หรือเพิ่มช่องว่างรอบตัวดำเนินการ แต่จะปรับความลึกของการเยื้องแต่ละบรรทัดให้เป็นมาตรฐานเท่านั้น
CSS จะลบการขึ้นบรรทัดใหม่และช่องว่างส่วนเกิน จากนั้นเพิ่มการขึ้นบรรทัดใหม่หลัง { และ ; แต่ละตัว รวมถึงก่อน } แต่ละตัว
HTML และ XML จะเพิ่มการขึ้นบรรทัดใหม่และการเยื้องสองช่องว่างสำหรับแท็กที่ซ้อนกันแต่ละระดับ โดยรู้จักแท็กปิดตัวเองมาตรฐาน เช่น <br>, <img> และ <input>
SQL จะเปลี่ยนชุดคำสำคัญที่กำหนดไว้ เช่น SELECT, FROM, WHERE, JOIN และ ORDER BY ให้เป็นตัวพิมพ์ใหญ่ และเริ่มบรรทัดใหม่ก่อนแต่ละอนุประโยคหลัก

เนื่องจากมีเพียงเส้นทาง JSON เท่านั้นที่แยกวิเคราะห์ข้อมูลนำเข้าได้ เครื่องมือจัดรูปแบบอื่นจึงไม่ตรวจพบข้อผิดพลาดทางไวยากรณ์ เช่น วงเล็บหายไปหรือสตริงไม่ปิด เครื่องมือเหล่านั้นจะจัดรูปแบบข้อความใด ๆ ที่ได้รับ แม้ข้อความนั้นจะไม่สามารถทำงานได้

ภาษาที่รองรับ

ภาษา	นามสกุลไฟล์ทั่วไป	ความกว้างการเยื้อง
JavaScript	.js	2 ช่องว่าง
TypeScript	.ts	2 ช่องว่าง
HTML	.html	2 ช่องว่าง
CSS	.css	2 ช่องว่าง
Python	.py	4 ช่องว่าง
Java	.java	4 ช่องว่าง
C	.c	4 ช่องว่าง
C++	.cpp	4 ช่องว่าง
C#	.cs	4 ช่องว่าง
SQL	.sql	การขึ้นบรรทัดใหม่ตามอนุประโยค
JSON	.json	2 ช่องว่าง
XML	.xml	2 ช่องว่าง

วิธีจัดรูปแบบโค้ด

เลือกภาษาโปรแกรมจากเมนูแบบเลื่อนลง
วางโค้ดที่ยังไม่ได้จัดรูปแบบลงในช่องป้อนข้อมูล
เลือก "จัดรูปแบบโค้ด"
คัดลอกผลลัพธ์ที่จัดรูปแบบแล้วจากช่องผลลัพธ์

การจัดรูปแบบทั้งหมดเกิดขึ้นภายในเบราว์เซอร์ โค้ดจะไม่ถูกส่งไปยังเซิร์ฟเวอร์

ตัวอย่างการจัดรูปแบบ JavaScript

ก่อนจัดรูปแบบ:

1function add(a, b) {
2    if (a > 0) { return a + b; }
3    return 0;
4}
5

หลังจัดรูปแบบ:

1function add(a, b) {
2  if (a > 0) {
3    return a + b;
4  }
5  return 0;
6}
7

เครื่องมือจัดรูปแบบย้ายโค้ดภายใน { } ไปไว้ในบรรทัดที่เยื้องแยกต่างหาก และปรับการเยื้องให้เป็นสองช่องว่างต่อหนึ่งระดับ โดยคงช่องว่างรอบ a > 0 และ a + b ไว้เหมือนเดิมทุกประการ เพราะช่องว่างเหล่านั้นมีอยู่แล้ว

ตัวอย่างการจัดรูปแบบ Python

ก่อนจัดรูปแบบ:

1def calculate_average(numbers):
2  if len(numbers) == 0:
3    return 0
4  total = sum(numbers)
5  return total / len(numbers)
6

หลังจัดรูปแบบ:

1def calculate_average(numbers):
2    if len(numbers) == 0:
3        return 0
4    total = sum(numbers)
5    return total / len(numbers)
6

โค้ดเดิมใช้การเยื้องสองช่องว่างต่อหนึ่งระดับ เครื่องมือจัดรูปแบบสร้างการเยื้องของแต่ละบรรทัดใหม่โดยใช้สี่ช่องว่างต่อหนึ่งระดับ ซึ่งตรงกับรูปแบบที่อธิบายไว้ใน PEP 8 ซึ่งเป็นคู่มือรูปแบบอย่างเป็นทางการของ Python เครื่องมือคงลำดับของทุกบรรทัดไว้เหมือนเดิม และไม่เปลี่ยนช่องว่างภายในบรรทัด

เหตุใดการจัดรูปแบบโค้ดจึงสำคัญ

การเยื้องที่ไม่สม่ำเสมอทำให้มองได้ยากว่าฟังก์ชัน ลูป หรือเงื่อนไขสิ้นสุดตรงไหน โค้ดที่ผ่านการแก้ไขโดยหลายคนมักลงเอยด้วยการใช้แท็บและช่องว่างปะปนกัน หรือมีบรรทัดที่ไม่ตรงกับบล็อกที่สังกัดอยู่ การนำโค้ดผ่านเครื่องมือจัดรูปแบบจะทำให้ทุกไฟล์มีโครงสร้างทางภาพเหมือนกัน จึงตรวจดูได้เร็วขึ้นและพบวงเล็บที่วางผิดตำแหน่งได้ง่ายขึ้น

ข้อจำกัด

ขนาดข้อมูลนำเข้า: เครื่องมือรองรับโค้ดได้สูงสุด 50,000 อักขระ หากยาวกว่านั้น ระบบจะปฏิเสธพร้อมข้อความแสดงข้อผิดพลาดก่อนเริ่มจัดรูปแบบ
ภาษาส่วนใหญ่ไม่มีการตรวจสอบไวยากรณ์: มีเพียงข้อมูลนำเข้าแบบ JSON เท่านั้นที่ถูกแยกวิเคราะห์และตรวจสอบความถูกต้อง โค้ดในภาษาอื่นอีก 11 ภาษาจะถูกจัดรูปแบบตามที่มีอยู่ แม้จะมีวงเล็บหายไปหรือสตริงไม่ปิดก็ตาม ในกรณีนั้นผลลัพธ์อาจเยื้องผิดแทนที่จะแจ้งข้อผิดพลาด
ไม่มีการเปลี่ยนช่องว่างรอบตัวดำเนินการ: เครื่องมือจัดรูปแบบ JavaScript, TypeScript และตระกูลภาษา C จะจัดเรียงเฉพาะการขึ้นบรรทัดใหม่และการเยื้องบรรทัดเท่านั้น เครื่องมือจะไม่แทรกช่องว่างรอบ +, =, !== หรือหลังเครื่องหมายจุลภาค หากเดิมไม่มีช่องว่างอยู่แล้ว
ไม่รองรับ PHP: การเลือกภาษาที่ไม่รองรับจะส่งคืนโค้ดโดยไม่เปลี่ยนแปลง

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

เครื่องมือนี้ตรวจสอบข้อผิดพลาดทางไวยากรณ์ของโค้ดหรือไม่ ตรวจสอบเฉพาะ JSON เท่านั้น ข้อมูลนำเข้าแบบ JSON จะถูกแยกวิเคราะห์ ดังนั้น JSON ที่ไม่ถูกต้องจึงทำให้เกิดข้อความแสดงข้อผิดพลาด ส่วนโค้ดในภาษาอื่นที่รองรับจะถูกจัดรูปแบบโดยไม่ตรวจสอบว่าไวยากรณ์ถูกต้องหรือไม่

เครื่องมือนี้ส่งโค้ดของฉันไปยังเซิร์ฟเวอร์หรือไม่ ไม่ การจัดรูปแบบทำงานทั้งหมดในเบราว์เซอร์โดยใช้ JavaScript โค้ดจะไม่ถูกอัปโหลดหรือจัดเก็บไว้ที่ใด

เครื่องมือนี้จัดรูปแบบโค้ดได้มากที่สุดเท่าไร 50,000 อักขระ การวางโค้ดที่มีความยาวเกินกว่านั้นจะทำให้เกิดข้อผิดพลาดก่อนเริ่มจัดรูปแบบ

เครื่องมือจะเพิ่มช่องว่างที่ขาดไปรอบตัวดำเนินการหรือหลังเครื่องหมายจุลภาคหรือไม่ ไม่ สำหรับ JavaScript, TypeScript, Java, C, C++ และ C# เครื่องมือเหล่านั้นจะสร้างการเยื้องและการขึ้นบรรทัดใหม่รอบวงเล็บปีกกาและอัฒภาคเท่านั้น ส่วนที่เหลือของแต่ละบรรทัดจะถูกคัดลอกตามที่เขียนไว้

เครื่องมือนี้ใช้การเยื้องแบบใด สองช่องว่างสำหรับ JavaScript, TypeScript, HTML, CSS, JSON และ XML สี่ช่องว่างสำหรับ Python, Java, C, C++ และ C#

เหตุใดโค้ดของฉันจึงดูแทบเหมือนเดิมหลังจัดรูปแบบ หากข้อมูลนำเข้าใช้ช่องว่างอย่างสม่ำเสมอและใช้รูปแบบวงเล็บเพียงแบบเดียว เครื่องมือจะปรับหลัก ๆ เฉพาะการเยื้องบรรทัด ดังนั้นการเปลี่ยนแปลงอาจมีเพียงเล็กน้อย เครื่องมือนี้มีประโยชน์มากที่สุดกับโค้ดที่มีการเยื้องปะปนกัน หรือโค้ดที่ถูกย่อให้เหลือเพียงไม่กี่บรรทัด

เครื่องมือจัดรูปแบบโค้ดฟรี: ทำให้โค้ด JavaScript, Python, HTML และอื่นๆ สวยงาม