Softonic

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

ขั้นตอน 1 / 3
ถัดไป

วางโค้ด JavaScript ที่ถูกย่อขนาดหรือเยื้องอย่างไม่เป็นระเบียบลงไป แล้วรับโค้ดที่สะอาดและอ่านง่ายกลับมา จัดรูปแบบด้วยกฎเดียวกับที่โปรแกรมแก้ไขโค้ดใช้ เลือกได้ว่าจะใช้แท็บหรือเว้นวรรค เครื่องหมายคำพูดเดี่ยวหรือคู่ ใส่เซมิโคลอนหรือไม่ ใส่จุลภาคปิดท้ายแบบ ES5 หรือทุกจุด รองรับไวยากรณ์สมัยใหม่ ไม่ว่าจะเป็น optional chaining, nullish coalescing, JSX, TypeScript และ await ระดับบนสุด

วิธีจัดรูปแบบ JavaScript

  1. 1

    วางซอร์สโค้ด

    โค้ด JS, JSX หรือ TypeScript ที่ถูกต้องแบบใดก็ได้ ตัวแยกวิเคราะห์จะระบุภาษาจากไวยากรณ์ของโค้ดเอง

  2. 2

    ตั้งค่าตามที่คุณต้องการ

    ขนาดการเยื้อง แท็บหรือเว้นวรรค รูปแบบเครื่องหมายคำพูด เซมิโคลอน ความกว้างการพิมพ์ และจุลภาคปิดท้าย

  3. 3

    จัดรูปแบบ

    เครื่องมือนี้ประมวลผลแบบที่เข้ากันได้กับ Prettier และแสดงผลลัพธ์ที่จัดรูปแบบแล้วออกมา

  4. 4

    คัดลอกผลลัพธ์

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

ตัวเลือกรูปแบบ

ตัวเลือก ค่า ค่าเริ่มต้น
การเยื้อง tab, 2, 4 เว้นวรรค 2 ช่อง
รูปแบบเครื่องหมายคำพูด single, double คู่
เซมิโคลอน always, never เสมอ
ความกว้างการพิมพ์ 60 - 120 80
จุลภาคปิดท้าย none, es5, all es5
วงเล็บฟังก์ชันลูกศร always, avoid เสมอ
การเว้นวรรคในวงเล็บ true, false true
เครื่องหมายคำพูดเดี่ยวใน JSX true, false false

ทำไมการจัดรูปแบบจึงสำคัญ

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

  • การถกเถียงเรื่องหยุมหยิม จะจบลงทันทีที่โปรเจกต์เลือกใช้ตัวจัดรูปแบบ git diff จะแสดงการเปลี่ยนแปลงที่แท้จริง ไม่ใช่ข้อโต้แย้งเรื่องการเยื้อง
  • ฮุกก่อนคอมมิต (ด้วยเครื่องมืออย่าง Husky และ lint-staged) จะจัดรูปแบบไฟล์ที่เตรียมไว้โดยอัตโนมัติก่อนคอมมิต
  • การผสานกับโปรแกรมแก้ไข (VS Code, WebStorm) จะใช้กฎเดียวกันเมื่อบันทึกไฟล์

สิ่งที่การจัดรูปแบบไม่ได้ทำ

  • ไม่ได้ตรวจสอบโค้ด (lint) กฎด้านสไตล์ (no-unused-vars, eqeqeq) เป็นหน้าที่ของ ESLint ตัวจัดรูปแบบเพียงจัดเรียงช่องว่างและเครื่องหมายวรรคตอนใหม่เท่านั้น จะไม่ปฏิเสธโค้ดเพราะปัญหาเชิงตรรกะ
  • ไม่ได้แก้ไขข้อผิดพลาดทางไวยากรณ์ หากอินพุตเป็น JS ที่ไม่ถูกต้อง ตัวจัดรูปแบบจะแจ้งข้อผิดพลาด ใช้เป็นการตรวจสอบเบื้องต้นว่าโค้ดของคุณอย่างน้อยก็แยกวิเคราะห์ได้
  • ไม่ได้บังคับใช้แนวทางการตั้งชื่อ การเลือกระหว่าง camelCase กับ snake_case เป็นกฎของ lint ไม่ใช่ของตัวจัดรูปแบบ

ข้อผิดพลาดที่พบบ่อย

  • ฝืนสู้กับตัวจัดรูปแบบ หากคุณยังคอยจัดรูปแบบเองซ้ำหลังจากมันทำงานเสร็จ ก็เท่ากับเสียเวลาทั้งคู่ ให้ตั้งค่าตัวเลือกให้เหมาะ หรือยอมรับการตั้งค่าของโปรเจกต์
  • จัดรูปแบบไฟล์ที่ถูกสร้างขึ้น ผลลัพธ์จาก bundler โค้ดที่ผ่านการทรานสไพล์ หรือ .min.js ล้วนไม่ได้ประโยชน์อะไร จงจัดรูปแบบซอร์สโค้ด ไม่ใช่ไฟล์ผลผลิต
  • จัดรูปแบบโดยไม่แยกวิเคราะห์ การ “จัดให้สวย” ด้วย regex จะทำให้เทมเพลตลิเทอรัล regex ลิเทอรัล และ JSX เสียหาย ให้ใช้ตัวจัดรูปแบบที่อิงโครงสร้าง AST เสมอ (อย่างเช่นเครื่องมือนี้)

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

ได้ ตัวแยกวิเคราะห์จะตรวจจับไวยากรณ์ของ TypeScript (ชนิดข้อมูล อินเทอร์เฟซ เจเนอริก และเดคอเรเตอร์) แล้วจัดรูปแบบให้สอดคล้องกัน อีกทั้งยังรองรับ JSX ในไฟล์ .tsx / .jsx ด้วย

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

ตัวจัดรูปแบบต้องการ JavaScript ที่ถูกต้องและแยกวิเคราะห์ได้ หากเกิดข้อผิดพลาด โค้ดน่าจะมีปัญหาทางไวยากรณ์ (วงเล็บไม่ปิด JSX ไม่ถูกต้อง หรือพิมพ์ผิด) หากข้อความแจ้งไม่ชัดเจน ให้ลองรันผ่านลินเตอร์ก่อน

เก็บไว้ ทั้งคอมเมนต์บรรทัดเดียว (//) และคอมเมนต์แบบบล็อก (/* */) จะยังคงอยู่ในผลลัพธ์ โดยวางไว้ใกล้กับตำแหน่งเดิมในซอร์สโค้ด

เครื่องมือที่เกี่ยวข้อง

ตารางอ้างอิง ASCII

ตาราง ASCII ครบตั้งแต่ 0 ถึง 127 พร้อมค่าเลขฐานสิบ ฐานสิบหก ฐานแปด ฐานสอง และรูปแบบการอ้างอิงอักขระแบบตัวเลขของ HTML รวม NUL, LF และ DEL

อ้างอิงตัวอักษร HTML

รายการที่สามารถค้นหาได้ขององค์ประกอบ HTML พร้อมรหัสชื่อและรหัสตัวเลข รวมถึงฟังก์ชันสำเนาด้วยคลิกเดียวสำหรับตัวอักษรพิเศษและสัญลักษณ์ต่างๆ

ตารางอ้างอิงแป้นพิมพ์ลัด

ค้นหาแป้นพิมพ์ลัดเริ่มต้นตามเอกสารของ VS Code, Chrome และ Bash ที่ใช้ GNU Readline บน macOS, Windows และ Linux

ตัวตรวจสอบอีเมล

ตรวจสอบที่อยู่อีเมล: ตรวจไวยากรณ์ RFC 5322 ค้นหา MX เรกคอร์ดแบบเรียลไทม์ พร้อมรายละเอียดส่วนท้องถิ่น โดเมน และความยาว ไม่มีการส่งอีเมลใด ๆ

เครื่องสร้างตัวอักษรสุ่ม

สร้างตัวอักษร A-Z แบบสุ่ม เลือกจำนวน ตัวพิมพ์ใหญ่ ตัวพิมพ์เล็ก หรือแบบผสม แล้วใช้กับเกม โจทย์ หรือกิจกรรมในห้องเรียน

เครื่องมือสร้าง EditorConfig

สร้างไฟล์ .editorconfig ด้วยกฎสไตล์และขนาดการเยื้อง การจบบรรทัด ชุดอักขระ และช่องว่างของคุณ เพื่อให้การจัดรูปแบบสอดคล้องกันในทุก IDE และโปรแกรมแก้ไข

เครื่องมือนี้มีให้บริการในภาษาอื่น