จัดรูปแบบและย่อโค้ด - JS, TS, CSS, HTML, SQL

ทำไมต้องจัดรูปแบบและย่อโค้ด?

การจัดรูปแบบคือการเขียนโค้ดใหม่ให้การเยื้อง การขึ้นบรรทัด และช่องว่างสม่ำเสมอ ทำให้อ่าน รีวิว และเปรียบเทียบได้ง่าย มีประโยชน์มากกับโค้ดที่ถูกย่อ SQL ที่สร้างอัตโนมัติ หรือไฟล์ตั้งค่าที่คัดลอกมา ส่วนการย่อขนาดทำตรงกันข้าม คือลบช่องว่างและคอมเมนต์ (สำหรับ JavaScript ยังย่อชื่อตัวแปรภายในด้วย Terser) เพื่อลดขนาดไฟล์ เครื่องมือนี้ใช้ Prettier ซึ่งโปรเจกต์ JavaScript ส่วนใหญ่ใช้อยู่แล้ว และ sql-formatter ที่รู้จักไวยากรณ์ของ MySQL, PostgreSQL, SQL Server, Oracle PL/SQL, BigQuery และอื่น ๆ

คุณสมบัติ

• 11 ภาษา: JavaScript, TypeScript, JSON, CSS, SCSS, Less, HTML, SQL, YAML, Markdown, GraphQL
• SQL 13 ภาษาถิ่น พร้อมตัวเลือกตัวพิมพ์ของคีย์เวิร์ด
• ย่อขนาด JS (Terser), CSS, HTML, JSON และ SQL พร้อมแสดงขนาดที่ลดลง
• ตั้งค่าการเยื้องหรือแท็บ ความกว้างบรรทัด เครื่องหมายคำพูด และเซมิโคลอน
• คัดลอกหรือดาวน์โหลดผลลัพธ์ พร้อมข้อความแจ้งข้อผิดพลาดที่ชัดเจน

โค้ดของคุณอยู่ในเครื่อง

การจัดรูปแบบและย่อขนาดทำงานในเบราว์เซอร์ทั้งหมด คีย์ API คำสั่งภายใน หรือโค้ดลับที่คุณวางจะไม่ถูกอัปโหลด

Prettier + sql-formatter ทำงานฝั่งไคลเอนต์ 100%

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

1
เลือกแท็บภาษา ได้แก่ JavaScript, TypeScript, JSON, CSS, SCSS, Less, HTML, SQL, YAML, Markdown หรือ GraphQL กดตัวอย่างเพื่อโหลดโค้ดตัวอย่าง
2
วางโค้ดในช่องอินพุตแล้วตั้งค่า เช่น ขนาดย่อหน้าหรือแท็บ ความกว้างบรรทัด เครื่องหมายคำพูด และเซมิโคลอน ส่วน SQL เลือกภาษาถิ่นและตัวพิมพ์ของคีย์เวิร์ด
3
กดจัดรูปแบบเพื่อจัดโค้ดด้วย Prettier หรือ sql-formatter หรือกดย่อขนาดเพื่อลดขนาด JavaScript, CSS, HTML, JSON หรือ SQL ขนาดที่ลดลงจะแสดงเหนือผลลัพธ์
4
คัดลอกผลลัพธ์หรือดาวน์โหลดเป็นไฟล์ หากมีข้อผิดพลาดทางไวยากรณ์ ข้อความจะบอกบรรทัดและคอลัมน์

ตัวอย่างการใช้งานจริง

อ่านโค้ดที่ถูกย่อ

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

จัด SQL จาก log

ORM บันทึกคำสั่งไว้ในบรรทัดเดียว การจัดรูปแบบด้วยภาษาถิ่น PostgreSQL หรือ MySQL จะแยก SELECT, JOIN และ WHERE เป็นบรรทัด ทำให้รีวิวและปรับแต่งได้ง่าย

สไตล์ที่สม่ำเสมอก่อน commit

จัดรูปแบบด้วยกฎ Prettier เดียวกับโปรเจกต์ (2 ช่องว่าง 80 คอลัมน์ เครื่องหมายคำพูดคู่) ทำให้ diff เล็กเมื่อวางโค้ดที่ได้จากแชท

ย่อขนาดอย่างรวดเร็ว

ย่อสคริปต์หรือสไตล์ชีตเล็ก ๆ สำหรับเทมเพลตอีเมล ช่องกรอกของ CMS หรือแท็ก <script> แบบอินไลน์ โดยไม่ต้องตั้งค่าเครื่องมือ build

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

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

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

ทำไมย่อขนาดใช้ไม่ได้กับบางภาษา?+

การย่อ YAML, Markdown, TypeScript หรือ GraphQL แทบไม่มีประโยชน์หรือทำให้ความหมายเปลี่ยน (YAML ขึ้นกับการย่อหน้า) โดยปกติ TypeScript จะถูกคอมไพล์เป็น JavaScript ก่อนแล้วจึงย่อ

ควรเลือกภาษาถิ่น SQL ใด?+

เลือกฐานข้อมูลที่คุณใช้ ภาษาถิ่นต่างกันที่เครื่องหมายคำพูด ฟังก์ชัน และคีย์เวิร์ด เช่น backtick ใน MySQL หรือการแปลงชนิดด้วย :: ใน PostgreSQL การเลือกให้ถูกช่วยเลี่ยงข้อผิดพลาด

โค้ดของฉันถูกส่งไปยังเซิร์ฟเวอร์หรือไม่?+

ไม่ Prettier, sql-formatter และ Terser ทำงานในเบราว์เซอร์และโหลดเฉพาะเมื่อคุณกดปุ่ม โค้ดลับและข้อมูลรับรองจึงอยู่ในเครื่องของคุณ