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 ไม่ถูกต้อง หรือพิมพ์ผิด) หากข้อความแจ้งไม่ชัดเจน ให้ลองรันผ่านลินเตอร์ก่อน

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

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

ตัวสร้างการตั้งค่า Webpack

สร้างไฟล์ webpack.config.js สำหรับ webpack 5 จากแบบฟอร์มสั้นๆ ตั้งค่า entry, โฟลเดอร์ output และ mode จากนั้นเปิด TypeScript, Babel, CSS loader, HtmlWebpackPlugin และ dev server

ตัวแปลง Timestamp

แปลง timestamp ของ Unix ในหน่วยวินาทีหรือมิลลิวินาทีเป็นวันที่ที่อ่านง่ายในเขตเวลา UTC และเขตเวลาหลัก และแปลงวันที่กลับเป็นค่า epoch

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

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

เครื่องสุ่มที่อยู่

สร้างระเบียนคล้ายที่อยู่ 1–20 รายการสำหรับแบบจำลองและการทดสอบ ด้วยรูปแบบประเทศแบบย่อ

ตัวลดรูปพีชคณิตบูลีน

ประเมินนิพจน์บูลีนสำหรับทุกชุดอินพุตและดูตารางค่าความจริงที่สมบูรณ์ รองรับตัวแปรสูงสุดห้าตัวและตัวดำเนินการ &, |, !, ^

ตัวสร้างลูกศร CSS

สร้างลูกศร CSS ในเบราว์เซอร์ด้วยทิศทาง สี ขนาด และความหนาของเส้นขอบ แล้วคัดลอกกฎ.

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