ตัวจัดรูปแบบ React: จัดรูปแบบโค้ด React และ JSX ออนไลน์ฟรี
ตัวจัดรูปแบบ React ใช้ Prettier จัดรูปแบบโค้ด React และ JSX ให้เค้าโครงที่อ่านง่ายขึ้นและเยื้องสม่ำเสมอ เลือกการเยื้องและกำหนดตัวเลือกเฉพาะ JSX ทั้งเครื่องหมายคำพูดเดี่ยวใน JSX และตัวเลือก bracket same line สำหรับอินพุต TSX เครื่องมือใช้ตัวจัดสวย TypeScript วางหรือลากโค้ด จัดรูปแบบ แล้วคัดลอกผลลัพธ์
ตัวจัดรูปแบบ React คือเครื่องมือในเบราว์เซอร์สำหรับจัดรูปแบบโค้ด React และ JSX ด้วย Prettier มันช่วยให้โค้ดอ่านและตรวจสอบง่ายขึ้นโดยใช้การจัดรูปแบบที่สม่ำเสมอ คุณสามารถวางหรือลากอินพุต เลือกการเยื้อง กำหนดตัวเลือกเฉพาะ JSX และคัดลอกผลลัพธ์ที่จัดรูปแบบแล้ว
ตัวเลือก JSX ที่มีมีเครื่องหมายคำพูดเดี่ยวใน JSX และ bracket same line การตั้งค่าเหล่านี้ให้คุณปรับว่า JSX นำเสนออย่างไร ส่วนตัวเลือกการเยื้องควบคุมเค้าโครงภาพของเอาต์พุต ตัวจัดรูปแบบยังรับ TSX ผ่านตัวจัดสวย TypeScript คุณจึงจัดรูปแบบอินพุต JSX ที่ใช้ TypeScript ได้ด้วย
โค้ด React และ JSX มักผสมนิพจน์ JavaScript กับไวยากรณ์คล้ายมาร์กอัป ส่วน TSX มีไวยากรณ์ TypeScript ควบคู่ JSX การจัดรูปแบบทำให้โค้ดนี้สแกนง่ายขึ้นและลดความต่างเฉพาะช่องว่างในรีวิวโค้ด นักพัฒนาอาจจัดรูปแบบข้อมูลย่อยก่อนแชร์ในรายงานบั๊กหรือตรวจว่าอินพุตพาร์สสะอาดหรือไม่เมื่อสืบปัญหา
ตัวจัดรูปแบบ React ทำงานในเบราว์เซอร์ของคุณทั้งหมด ไม่ส่งข้อมูลไปยังเซิร์ฟเวอร์ ไม่ต้องสมัครสมาชิก และเมื่อโหลดหน้าแล้วเครื่องมือจะทำงานออฟไลน์ ทำให้โค้ดที่คุณจัดรูปแบบอยู่บนอุปกรณ์ของคุณเองขณะใช้ตัวจัดรูปแบบ
เครื่องมือนี้มีประโยชน์สำหรับนักพัฒนาและวิศวกร DevOps ที่รีวิวโค้ด React ทำงานกับ JSX หรือ TSX เตรียมข้อมูลย่อยโค้ด หรือต้องการการเยื้องที่สม่ำเสมอ ไม่ว่าคุณกำลังตรวจสอบโค้ดที่ผู้อื่นเขียนหรือจัดระเบียบไฟล์ที่สร้างก่อนคอมมิต ตัวเลือกการจัดรูปแบบที่กำหนดได้ช่วยทำให้ผลลัพธ์ทำงานด้วยง่ายขึ้น
ขั้นตอนที่ 1: วางหรือลากโค้ด React หรือ JSX ของคุณลงในตัวจัดรูปแบบ สำหรับ JSX ที่ใช้ TypeScript คุณสามารถให้อินพุต TSX
ขั้นตอนที่ 2: เลือกการเยื้องที่ต้องการสำหรับเอาต์พุตที่จัดรูปแบบแล้ว การเยื้องที่สม่ำเสมอทำให้โค้ดตรวจสอบง่ายขึ้นได้
ขั้นตอนที่ 3: ตั้งค่าตัวเลือก JSX ที่ต้องการ ทั้งเครื่องหมายคำพูดเดี่ยวใน JSX และ bracket same line
ขั้นตอนที่ 4: จัดรูปแบบโค้ดแล้วตรวจสอบผลลัพธ์ ตัวจัดรูปแบบยังช่วยคุณตรวจว่าอินพุตพาร์สสะอาดหรือไม่
ขั้นตอนที่ 5: คัดลอกเอาต์พุตที่จัดรูปแบบแล้วแล้วใช้ในโปรเจกต์ รีวิวโค้ด หรือรายงานบั๊กของคุณ
กรณีการใช้งาน: ทำให้ไฟล์ React ที่เครื่องสร้างจนอ่านยากง่ายต่อการตรวจสอบก่อนคอมมิต
กรณีการใช้งาน: ตรวจสอบเอกสาร React ที่คุณไม่ได้เขียนเทียบกับแบบแผนการจัดรูปแบบที่ต้องปฏิบัติตาม
กรณีการใช้งาน: สร้างเอาต์พุตที่เยื้องสม่ำเสมอเพื่อให้ diff เน้นการเปลี่ยนแปลงโค้ดแทนสัญญาณรบกวนของช่องว่าง
กรณีการใช้งาน: จัดรูปแบบข้อมูลย่อยก่อนวางในรายงานบั๊กหรือรีวิวโค้ด
กรณีการใช้งาน: ตรวจสอบว่าอินพุต React พาร์สสะอาดหรือไม่และระบุบรรทัดที่เกิดปัญหา
กรณีการใช้งาน: จัดรูปแบบคอมโพเนนต์ TSX เมื่อต้องการเอาต์พุตที่อ่านง่ายสำหรับโค้ด React ที่ใช้ TypeScript
กรณีการใช้งาน: ใช้ตัวเลือกเครื่องหมายคำพูดเดี่ยวใน JSX หรือ bracket same line เมื่อต้องการเอาต์พุต JSX ปฏิบัติตามสไตล์ที่เลือก