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

อัปโหลด

0 ตัวอักษร

เครื่องมือจัดรูปแบบ JSX GeekFormat โดยอาศัยเครื่องยนต์ Prettier v3 Standalone เพื่อจัดรูปแบบอย่างมืออาชีพและทำให้โค้ดคอมโพเนนต์ React JSX/TSX สวยงาม รองรับการกำหนดค่าจัดรูปแบบ 12 อย่าง (ขนาดการเยื้อง อัฒภาค รูปแบบเครื่องหมายอัญประกาศ จุลภาคต่อท้าย ช่องว่างวงเล็บ วงเล็บฟังก์ชันลูกศร ความกว้างการพิมพ์ เครื่องหมายอัญประกาศเดี่ยว JSX วงเล็บ JSX แถวเดียว กลยุทธ์เครื่องหมายอัญประกาศคุณสมบัติ ฯลฯ) มีเครื่องยนต์บีบอัด Terser ในตัว ให้การสลับเจ็ดภาษา JavaScript/TypeScript/JSX/TSX/CSS/HTML/JSON เครื่องมือแก้ไขที่เน้นไวยากรณ์ CodeMirror 6 คอลัมน์ซ้าย-ขวาเปรียบเทียบกันแบบเรียลไทม์ รองรับการอัปโหลดและดาวน์โหลดไฟล์ ประวัติ การแชร์ URL การคัดลอกด้วยคลิกเดียว การประมวลผลทั้งหมดในฝั่งเบราว์เซอร์ โค้ดไม่อัปโหลดไปยังเซิร์ฟเวอร์

คำแนะนำที่เกี่ยวข้อง

บีบอัด JSX

จัดรูปแบบ TSX

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

จัดรูปแบบ CSS

จัดรูปแบบ JSON

เกี่ยวกับการจัดรูปแบบ JSX

JSX ย่อมาจาก JavaScript XML เป็นส่วนขยายไวยากรณ์ JavaScript ที่เฟรมเวิร์ก React แนะนำให้ใช้ ทำให้สามารถเขียนโครงสร้างแท็กที่คล้าย HTML โดยตรงในโค้ด JavaScript JSX เมื่อคอมไพล์จะถูกแปลงโดยเครื่องมือเช่น Babel หรือ TypeScript เป็นการเรียกฟังก์ชัน React.createElement() ทั่วไป JSX ทำให้โครงสร้างโค้ดคอมโพเนนต์เข้าใจง่ายขึ้น นักพัฒนาสามารถอธิบายโครงสร้าง UI เหมือนกับเขียน HTML ในขณะที่ได้รับความสามารถในการแสดงออกทั้งหมดของ JavaScript อย่างไรก็ตาม หากโค้ด JSX ขาดการจัดรูปแบบมาตรฐาน — ระดับการซ้อนของแท็กยุ่งเหยิง การจัดเรียงคุณสมบัติไม่เป็นระเบียบ การเยื้องไม่สม่ำเสมอ — จะส่งผลกระทบอย่างมากต่อความสามารถในการอ่านและประสิทธิภาพการบำรุงรักษา นี่คือคุณค่าของเครื่องมือจัดรูปแบบ JSX

Prettier เป็นเครื่องมือจัดรูปแบบโค้ดที่เป็นกระแสหลักที่สุดในระบบนิเวศ JavaScript/JSX ในปัจจุบัน ถูกสร้างโดย James Long ในปี 2017 และในปัจจุบันกลายเป็นมาตรฐานจริง แนวคิดหลักของ Prettier คือ "การจัดรูปแบบที่มีทัศนคติ" (opinionated formatter) — มันให้เพียงไม่กี่รายการที่สามารถกำหนดค่าได้ กฎที่เหลือถูกรวมในตัวไม่สามารถแก้ไขได้ ประโยชน์ของการทำเช่นนี้คือการขจัดการถกเถียงกันอย่างไม่มีที่สิ้นสุดระหว่างทีมเกี่ยวกับรูปแบบโค้ด Prettier รองรับภาษาและรูปแบบหลายอย่างเช่น JSX/TSX/JavaScript/TypeScript/JSON/CSS/HTML/Markdown ถูกนำไปใช้อย่างแพร่หลายโดยชุมชนเฟรมเวิร์กหลักอย่าง React, Vue, Angular โปรเจกต์ฟรอนต์เอนด์สมัยใหม่ส่วนใหญ่จะรวม Prettier ในท่อ CI/CD เพื่อให้แน่ใจว่ารูปแบบโค้ดสม่ำเสมอ

กฎหลักของการจัดรูปแบบ JSX รวมถึง: ประการแรก ระดับการเยื้อง — ทุกแท็ก JSX และนิพจน์ที่ซ้อนกันจะเพิ่มระดับการเยื้องหนึ่งระดับ สะท้อนโครงสร้างต้นไม้ DOM; ประการที่สอง การจัดเรียงคุณสมบัติ — เมื่อแท็กมีคุณสมบัติหลายอย่างและเกินความกว้างของบรรทัด แต่ละคุณสมบัติจะอยู่ในบรรทัดของตัวเองและถูกจัดแถว; ประการที่สาม การจัดการวงเล็บ — นิพจน์ JSX หลายบรรทัดมักถูกห่อด้วยวงเล็บกลม เพื่อป้องกันปัญหาการแทรกอัฒภาคอัตโนมัติ (ASI); ประการที่สี่ แท็กปิดเอง — คอมโพเนนต์ที่ไม่มีองค์ประกอบลูกใช้รูปแบบ <Component />; ประการที่ห้า เครื่องหมายอัญประกาศสตริง — คุณสมบัติ JSX เริ่มต้นใช้เครื่องหมายอัญประกาศคู่ (สอดคล้องกับ HTML) สตริง JavaScript เริ่มต้นใช้เครื่องหมายอัญประกาศเดี่ยว; ประการที่หก การจัดการช่องว่าง — สามารถกำหนดค่าได้ว่าจะเพิ่มช่องว่างทั้งสองข้างของวงเล็บปีกกา {} ในแท็กหรือไม่

การบีบอัด JSX (Minification) เป็นการดำเนินการที่ตรงข้ามกับการจัดรูปแบบ จุดประสงค์คือการแปลง JSX เป็นโค้ดที่สามารถเรียกใช้งานได้ที่มีขนาดเล็กที่สุด ใช้สำหรับการปรับใช้สภาพแวดล้อมการผลิตเพื่อลดปริมาณการส่งผ่านเครือข่ายและเร่งความเร็วในการโหลด การบีบอัด JSX มักรวมถึงขั้นตอนต่อไปนี้: ขั้นแรกใช้ Babel คอมไพล์ JSX เป็นการเรียก React.createElement (คือ JavaScript ทั่วไป) จากนั้นใช้เครื่องมือบีบอัด (เช่น Terser, UglifyJS) เพื่อดำเนินการ: ลบคำอธิบายและตัวอักษรช่องว่าง ย่อชื่อตัวแปรและชื่อฟังก์ชัน (mangling) กำจัดโค้ดที่ตายแล้ว (dead code elimination) ทำให้นิพจน์และคำสั่งเงื่อนไขเรียบง่ายขึ้น รวมการประกาศ ฟังก์ชันอินไลน์ ฯลฯ เครื่องมือสร้างสมัยใหม่ (Webpack, Vite, Rollup) ในโหมด production ทั้งหมดจะดำเนินการบีบอัดโค้ดโดยอัตโนมัติ

ทำไมการจัดรูปแบบโค้ดจึงสำคัญ? ในการทำงานร่วมกันของทีม รูปแบบโค้ดที่สม่ำเสมอสามารถเพิ่มความสามารถในการอ่านและประสิทธิภาพการตรวจทานได้อย่างมาก หากนักพัฒนาทุกคนจัดรูปแบบโค้ดตามความชอบของตนเอง Git diff จะเต็มไปด้วยการเปลี่ยนแปลงรูปแบบที่ไม่มีความหมาย ผู้ตรวจทานจะหาการเปลี่ยนแปลงตรรกะที่แท้จริงได้ยาก การวิจัยแสดงให้เห็นว่าเวลาที่นักพัฒนาใช้อ่านโค้ดมากกว่าเวลาที่ใช้เขียนโค้ดอย่างมาก รูปแบบการจัดรูปแบบที่สม่ำเสมอสามารถลดภาระความรู้เมื่ออ่านได้อย่างมาก บริษัท ใหญ่เช่น Google, Meta, Airbnb ทั้งหมดมีมาตรฐานรูปแบบโค้ดที่เข้มงวดและห่วงโซ่เครื่องมือจัดรูปแบบอัตโนมัติ นี่คือการสะท้อนของความเจริญรุ่งเรืองของวิศวกรรมซอฟต์แวร์

การแบ่งงานระหว่าง Prettier และ Linters (เช่น ESLint, TSLint) เป็นแนวปฏิบัติที่ดีที่สุดของวิศวกรรมฟรอนต์เอนด์สมัยใหม่: Prettier เชี่ยวชาญการจัดการรูปแบบ (formatting) — การขึ้นบรรทัดใหม่ การเยื้อง ช่องว่าง อัฒภาค เครื่องหมายอัญประกาศ จุลภาค และปัญหารูปแบบบริสุทธิ์อื่นๆ; ESLint เชี่ยวชาญการจัดการคุณภาพ (code quality) — ตัวแปรที่ไม่ได้ใช้ บั๊กที่อาจเกิดขึ้น ปัญหาความปลอดภัย แนวปฏิบัติที่ดีที่สุด และปัญหาตรรกะอื่นๆ เมื่อใช้ทั้งสองอย่างร่วมกัน จำเป็นต้องปิดกฎรูปแบบใน ESLint ที่ทับซ้อนกับ Prettier ผ่าน eslint-config-prettier เพื่อหลีกเลี่ยงความขัดแย้ง ทีมจำนวนมากยังกำหนดค่า hook pre-commit (ผ่าน husky + lint-staged) รัน Prettier และ ESLint โดยอัตโนมัติก่อนส่งโค้ด เพื่อให้แน่ใจว่าโค้ดที่เข้าสู่คลังทั้งหมดสอดคล้องกับมาตรฐาน

เมื่อเลือกเครื่องมือจัดรูปแบบ JSX จำเป็นต้องพิจารณาปัจจัยหลายประการ: ประการแรก การเลือกเครื่องยนต์ — ให้ความสำคัญกับการเลือก Prettier เป็นเครื่องยนต์ เนื่องจากเป็นมาตรฐานชุมชน ผลลัพธ์สามารถคาดเดาได้และสอดคล้องกับปลั๊กอิน IDE; ประการที่สอง ความสามารถในการกำหนดค่า — ตามความต้องการของทีมเลือกจำนวนพารามิเตอร์ที่สามารถปรับได้ ตัวเลือกมากเกินไปจะเพิ่มต้นทุนการตัดสินใจ; ประการที่สาม ความปลอดภัย — ตรวจสอบให้แน่ใจว่าเครื่องมือประมวลผลโค้ดในเครื่อง ไม่อัปโหลดไปยังเซิร์ฟเวอร์ หลีกเลี่ยงความเสี่ยงจากการรั่วไหลของโค้ดซอร์ส; ประการที่สี่ ฟังก์ชันเสริม — การบีบอัด การเน้นไวยากรณ์ ประวัติ การแชร์ และฟังก์ชันอื่นๆ สามารถเพิ่มประสิทธิภาพการใช้งาน; ประการที่ห้า การสนับสนุนหลายภาษา — หนึ่งเครื่องมือครอบคลุมหลายภาษาเช่น JS/TS/JSX/TSX/CSS/HTML/JSON สามารถลดต้นทุนการเปลี่ยนเครื่องมือ

ข้อควรระวังด้านความปลอดภัยเมื่อใช้เครื่องมือจัดรูปแบบโค้ดออนไลน์: ประการแรก ให้ความสำคัญกับการเลือกเครื่องมือที่ประมวลผลทั้งหมดในฝั่งเบราว์เซอร์ — เครื่องมือประเภทนี้ไม่ต้องการเซิร์ฟเวอร์ โค้ดรันเฉพาะในเครื่อง ความปลอดภัยสูงที่สุด; ประการที่สอง อย่าวางโค้ดที่มีข้อมูลที่ละเอียดอ่อน — เช่น รหัสผ่านฐานข้อมูล คีย์ API ตรรกะธุรกิจภายใน อัลกอริทึมที่มีกรรมสิทธิ์ ฯลฯ แม้ว่าเครื่องมือจะอ้างว่าไม่อัปโหลด ก็ควรรักษาสติเรื่องความปลอดภัยไว้; ประการที่สาม ตรวจสอบว่าเครื่องมือใช้ HTTPS หรือไม่ — ป้องกันการถูกดักฟังระหว่างการส่ง (แม้ว่าเครื่องมือที่ประมวลผลในเครื่องจะไม่ต้องการการส่ง แต่หน้าเว็บเองก็ต้องการโหลดที่ปลอดภัยเช่นกัน); ประการที่สี่ โค้ดที่สำคัญใช้เครื่องมือในเครื่อง — สำหรับโค้ดธุรกิจหลัก แนะนำให้ใช้ Prettier CLI หรือปลั๊กอิน IDE ที่ติดตั้งในเครื่อง ไม่พึ่งพาผลิตภัณฑ์ออนไลน์; ประการที่ห้า ตรวจสอบความน่าเชื่อถือของเครื่องมือเป็นประจำ — ตรวจสอบว่าเป็นโอเพ่นซอร์สหรือไม่ ชุมชนประเมินอย่างไร มีนโยบายความเป็นส่วนตัวหรือไม่ ฯลฯ

กรณีการใช้งาน

โค้ดคอมโพเนนต์ React ที่คัดลอกจากอินเทอร์เน็ตมีรูปแบบที่ยุ่งเหยิง จัดรูปแบบอย่างรวดเร็วเพื่อให้อ่านและเรียนรู้ได้ง่ายขึ้น
เมื่อรับผิดชอบโปรเจกต์เก่า จัดเรียงไฟล์คอมโพเนนต์ JSX ทำให้รูปแบบโค้ดสม่ำเสมอก่อนพัฒนาต่อ
จัดรูปแบบก่อนตรวจทานโค้ด กำจัด diff ที่ไม่มีความหมายจากความแตกต่างของรูปแบบ มุ่งเน้นไปที่การตรวจทานตรรกะ
จัดรูปแบบโค้ดการผลิต JSX ที่ถูกบีบอัดแล้วกลับมา อ่านโค้ดที่ถูกสับสนเมื่อแก้ไขปัญหาออนไลน์
ทำให้โค้ดตัวอย่าง JSX สวยงามก่อนเขียนบล็อกเทคนิคหรือเอกสาร เพิ่มความมืออาชีพของเนื้อหา
เปรียบเทียบผลของการกำหนดค่าจัดรูปแบบที่แตกต่างกัน ใช้เป็นข้อมูลอ้างอิงสำหรับการเลือกแผนการกำหนดค่า Prettier ของทีม
ในการสาธิตการสอน แสดงกระบวนการจัดเรียงโค้ด JSX จากยุ่งเหยิงไปเป็นมาตรฐาน
เมื่อแก้ไขข้อผิดพลาดส่วนย่อยโค้ด React ออนไลน์ จัดรูปแบบก่อนแล้วจึงวิเคราะห์โครงสร้างและค้นหาตำแหน่งบั๊ก
ในเอกสารไลบรารีคอมโพเนนต์ที่สร้างโค้ด JSX ตรวจสอบให้แน่ใจว่ารูปแบบโค้ดตัวอย่างสม่ำเสมอและสวยงาม
ก่อนสัมภาษณ์งาน จัดเรียงโค้ดโปรเจกต์ React ของคุณเอง ตรวจสอบให้แน่ใจว่าตัวอย่างโค้ดที่ส่งมีรูปแบบที่เป็นมาตรฐาน
จัดรูปแบบโค้ด JSX ที่ AI สร้างขึ้นก่อนนำเข้าโปรเจกต์ กำจัดปัญหาการไม่สม่ำเสมอของรูปแบบที่ AI สร้างออกมา
เมื่อพัฒนาโปรเจกต์ React Native หรือ Next.js จัดรูปแบบส่วนย่อยโค้ดคอมโพเนนต์ออนไลน์อย่างรวดเร็ว

วิธีการใช้งาน

วางโค้ด JSX/TSX ลงในเครื่องมือแก้ไขด้านซ้าย หรือคลิกปุ่มอัปโหลดเพื่อนำเข้าไฟล์ .jsx/.tsx หรือสามารถโหลดจากตัวอย่างโดยตรง
คลิกปุ่มการตั้งค่าเพื่อปรับพารามิเตอร์การจัดรูปแบบ: ขนาดการเยื้อง อัฒภาค เครื่องหมายอัญประกาศ จุลภาคต่อท้าย ความกว้างการพิมพ์ ตัวเลือก JSX ฯลฯ หรือรักษาการกำหนดค่าเริ่มต้น
คลิกปุ่มทำให้สวยงาม (หรือกดแป้นพิมพ์ลัด) เพื่อดำเนินการจัดรูปแบบ แผงด้านขวาจะแสดงผลลัพธ์การจัดรูปแบบทันที สามารถลากซ้าย-ขวาเพื่อปรับความกว้างของแผงได้
หากต้องการบีบอัด ให้คลิกปุ่มบีบอัดเพื่อสลับไปที่โหมดบีบอัด เครื่องยนต์ Terser จะส่งออกโค้ด JSX ที่ถูกย่อขนาด
คลิกปุ่มคัดลอกเพื่อคัดลอกผลลัพธ์ไปยังคลิปบอร์ด หรือคลิกดาวน์โหลดเพื่อบันทึกเป็นไฟล์ หรือสามารถส่งให้ผู้อื่นผ่านลิงก์แชร์ได้

คุณสมบัติ

เครื่องยนต์ Prettier v3: อาศัย Prettier v3 Standalone ที่เป็นที่นิยมที่สุดในอุตสาหกรรมเป็นเครื่องยนต์จัดรูปแบบ รวมกับตัวแยกวิเคราะห์ Babel ผลลัพธ์การจัดรูปแบบสอดคล้องกับปลั๊กอิน Prettier ใน VS Code รับประกันรูปแบบโค้ดของทีมที่สม่ำเสมอ
การกำหนดค่าจัดรูปแบบ 12 อย่าง: สามารถปรับขนาดการเยื้อง (2/4/8 ช่องว่างหรือ Tab) อัฒภาค เครื่องหมายอัญประกาศเดี่ยว/คู่ จุลภาคต่อท้าย (none/es5/all) ช่องว่างวงเล็บ วงเล็บฟังก์ชันลูกศร ความกว้างการพิมพ์ เครื่องหมายอัญประกาศเดี่ยว JSX วงเล็บ JSX แถวเดียว กลยุทธ์เครื่องหมายอัญประกาศคุณสมบัติ และพารามิเตอร์อื่นๆ อีก 12 อย่าง
เครื่องมือแก้ไขที่เน้นไวยากรณ์ JSX: เครื่องมือแก้ไขโค้ดมืออาชีพโดยอาศัย CodeMirror 6 รองรับการเน้นไวยากรณ์ JSX/TSX หมายเลขบรรทัด การจับคู่วงเล็บ อินพุตด้านซ้ายและผลลัพธ์ด้านขวาเปรียบเทียบกันแบบเรียลไทม์
ฟังก์ชันการบีบอัด JSX: มีเครื่องยนต์บีบอัด Terser ในตัว บีบอัดโค้ดคอมโพเนนต์ JSX ให้มีขนาดเล็กที่สุดด้วยคลิกเดียว รองรับการสับสนชื่อตัวแปร (mangle) การกำจัดโค้ดที่ตายแล้ว การทำความสะอาด console/debugger และตัวเลือกการบีบอัดขั้นสูงอื่นๆ
สลับระหว่าง 7 ภาษาได้อย่างอิสระ: รองรับเจ็ดภาษาฟรอนต์เอนด์ยอดนิยม ได้แก่ JavaScript, TypeScript, JSX, TSX, CSS, HTML, JSON หนึ่งเครื่องมือครอบคลุมความต้องการจัดรูปแบบฟูลสแต็ก
อัปโหลดและดาวน์โหลดไฟล์: รองรับการอัปโหลดไฟล์ .jsx/.tsx/.js/.ts/.css/.html/.json โดยตรงเพื่อจัดรูปแบบ หลังจากประมวลผลแล้วสามารถดาวน์โหลดและบันทึกลงในเครื่องได้
แผงประวัติ: บันทึกประวัติการจัดรูปแบบล่าสุดโดยอัตโนมัติ รองรับการย้อนกลับไปยังเวอร์ชันเก่า เปรียบเทียบผลการจัดรูปแบบภายใต้การกำหนดค่าที่แตกต่างกัน
คัดลอกผลลัพธ์ด้วยคลิกเดียว: โค้ดหลังจากจัดรูปแบบหรือบีบอัดสามารถคัดลอกไปยังคลิปบอร์ดด้วยคลิกเดียว วางโดยตรงลงใน IDE หรือโปรเจกต์เพื่อใช้งาน
ฟังก์ชันการแชร์ URL: ใช้ LZ-String บีบอัดโค้ดและการกำหนดค่าลงใน URL hash คัดลอกลิงก์เพื่อแชร์โค้ดที่สมบูรณ์และพารามิเตอร์การจัดรูปแบบ
การแจ้งเตือนข้อผิดพลาดไวยากรณ์ที่เป็นมิตร: เมื่อการจัดรูปแบบล้มเหลว จะแยกแยะข้อผิดพลาดไวยากรณ์จากข้อผิดพลาดอื่นๆ ให้คำแนะนำตำแหน่งเพื่อช่วยแก้ไขปัญหาโค้ดอย่างรวดเร็ว
คอลัมน์ที่สามารถลากได้: ความกว้างของแผงด้านซ้ายและขวาสามารถปรับได้อย่างอิสระโดยการลาก ปรับตัวให้เข้ากับขนาดหน้าจอและนิสัยการอ่านที่แตกต่างกัน
การประมวลผลในเครื่องเบราว์เซอร์: การจัดรูปแบบ การบีบอัด การวิเคราะห์ทั้งหมดเสร็จสิ้นใน JavaScript ของเบราว์เซอร์ เนื้อหาโค้ดจะไม่ถูกอัปโหลดไปยังเซิร์ฟเวอร์ใดๆ โค้ดซอร์สมีความปลอดภัย

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

หลักการของการจัดรูปแบบ JSX คืออะไร? มีความสัมพันธ์อย่างไรกับ Prettier?

เครื่องมือนี้ใช้เวอร์ชัน Prettier v3 Standalone เป็นเครื่องยนต์จัดรูปแบบในชั้นล่าง ผ่านตัวแยกวิเคราะห์ Babel เพื่อวิเคราะห์ไวยากรณ์ JSX จากนั้นส่งออกโค้ดที่มีการจัดวางเรียบร้อยตามกฎที่กำหนดค่า Prettier เป็นเครื่องมือจัดรูปแบบโค้ดที่เป็นที่นิยมที่สุดในระบบนิเวศฟรอนต์เอนด์ในปัจจุบัน ถูกนำไปใช้อย่างแพร่หลายในโปรเจกต์ React/Vue/Angular ฯลฯ ผลลัพธ์การจัดรูปแบบของเครื่องมือนี้โดยทั่วไปสอดคล้องกับผลลัพธ์เมื่อคุณติดตั้งปลั๊กอิน Prettier ใน VS Code เพื่อจัดรูปแบบไฟล์ JSX เหมาะสำหรับการจัดรูปแบบออนไลน์อย่างรวดเร็วโดยไม่ต้องเปิด IDE ในเครื่อง

รองรับตัวเลือกการจัดรูปแบบอะไรบ้าง? สามารถปรับแต่งการเยื้องและรูปแบบเครื่องหมายอัญประกาศได้ไหม?

รองรับการกำหนดค่าจัดรูปแบบ 12 อย่าง: 1) ขนาดการเยื้อง: 2 ช่องว่าง/4 ช่องว่าง/8 ช่องว่างหรือใช้ Tab; 2) ใช้อัฒภาคหรือไม่; 3) เครื่องหมายอัญประกาศเดี่ยวหรือคู่; 4) กลยุทธ์จุลภาคต่อท้าย: none (ไม่มี)/es5 (อาร์เรย์อ็อบเจกต์)/all (พารามิเตอร์ฟังก์ชันก็เพิ่มด้วย); 5) มีช่องว่างภายในวงเล็บปีกกาของอ็อบเจกต์หรือไม่; 6) พารามิเตอร์เดี่ยวของฟังก์ชันลูกศรเพิ่มวงเล็บหรือไม่; 7) ความกว้างการพิมพ์ (คือจำนวนตัวอักษรสูงสุดต่อบรรทัด); 8) คุณสมบัติ JSX ใช้เครื่องหมายอัญประกาศเดี่ยวหรือคู่; 9) เมื่อ JSX มีหลายบรรทัด วงเล็บปิดจะอยู่แถวเดียวกับเนื้อหาหรือไม่; 10) กลยุทธ์เครื่องหมายอัญประกาศคุณสมบัติอ็อบเจกต์: ตามความจำเป็น/รักษา/สม่ำเสมอ; 11) ความไวต่อช่องว่างของ HTML; 12) ใช้การเยื้อง Tab สามารถปรับได้อย่างอิสระในแผงการตั้งค่า

การจัดรูปแบบจะเปลี่ยนตรรกะของโค้ด JSX ไหม? ปลอดภัยไหม?

การจัดรูปแบบเพียงแค่ปรับตัวอักษรช่องว่าง (การขึ้นบรรทัดใหม่ การเยื้อง ช่องว่าง) และรูปแบบไวยากรณ์เช่น เครื่องหมายอัญประกาศ อัฒภาค จะไม่เปลี่ยนตรรกะโค้ดใดๆ เลย Prettier เป็นเครื่องมือที่ได้รับการตรวจสอบจากนักพัฒนาหลายล้านคนทั่วโลก โค้ดหลังจากจัดรูปแบบมีความสมมูลกับโค้ดเดิมทั้งหมดในทางความหมาย แต่จำเป็นต้องทราบ: หากโค้ดเดิมมีข้อผิดพลาดไวยากรณ์ (เช่น วงเล็บไม่ตรงกัน แท็กไม่ปิด) การจัดรูปแบบจะล้มเหลวและแจ้งข้อผิดพลาดไวยากรณ์ ในตอนนั้นจำเป็นต้องแก้ไขปัญหาโค้ดก่อนจึงจะจัดรูปแบบได้

ฟังก์ชันการบีบอัด JSX ถูกนำไปใช้อย่างไร? รองรับตัวเลือกการบีบอัดอะไรบ้าง?

การบีบอัด JSX ใช้เครื่องยนต์ Terser (หนึ่งในเครื่องมือบีบอัด JavaScript ที่เป็นที่นิยมที่สุดในอุตสาหกรรม) ดำเนินการในเครื่องเบราว์เซอร์ การบีบอัดรวมถึง: ลบคำอธิบายและช่องว่างที่เกินจริง ย่อและสับสนชื่อตัวแปร (mangle) กำจัดโค้ดที่ตายแล้ว (dead_code) ลบตัวแปรที่ไม่ได้ใช้งาน (unused) การปรับปรุงการยกฟังก์ชัน/ตัวแปร การทำให้สัญญาณเงื่อนไขเรียบง่ายขึ้น การปรับปรุงการวนซ้ำ ฯลฯ การบีบอัดจะคอมไพล์ JSX เป็น JavaScript ทั่วไปผ่าน Babel ก่อน จากนั้นจึงดำเนินการบีบอัดและปรับปรุง หมายเหตุ: โค้ดหลังจากบีบอัดมีความสามารถในการอ่านลดลงอย่างมาก เหมาะสำหรับการปรับใช้สภาพแวดล้อมการผลิต ไม่เหมาะสำหรับการแก้ไขข้อผิดพลาดในการพัฒนา

รองรับ TypeScript (TSX) ไหม? มีความแตกต่างอย่างไรกับ JSX?

รองรับ เครื่องมือเริ่มต้นคือภาษา JSX คุณสามารถสลับไปที่โหมด TSX ผ่านเมนูสลับภาษาที่มุมบนซ้าย โหมด TSX ใช้ตัวแยกวิเคราะห์ TypeScript สามารถรู้จำคำอธิบายประเภท TypeScript ได้อย่างถูกต้อง (interface, type, generic, การยืนยันประเภท ฯลฯ) จะไม่รายงานข้อผิดพลาดจากไวยากรณ์ประเภท โหมด JSX ใช้ตัวแยกวิเคราะห์ Babel เหมาะสำหรับคอมโพเนนต์ React JavaScript บริสุทธิ์ เมื่อบีบอัด TSX จะลบคำอธิบายประเภทออกโดยอัตโนมัติก่อนจึงจะดำเนินการบีบอัด Terser

โค้ด JSX ที่ป้อนจะถูกอัปโหลดไปยังเซิร์ฟเวอร์ไหม? ความเป็นส่วนตัวปลอดภัยไหม?

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

ประวัติถูกเก็บไว้ที่ไหน? จะหายไปไหม?

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

ฟังก์ชันการแชร์ URL จะส่งโค้ดไปยังเซิร์ฟเวอร์ไหม?

ไม่ใช่ ฟังก์ชันการแชร์ URL บีบอัดโค้ดและการกำหนดค่าด้วย LZ-String จากนั้นเข้ารหัสลงในส่วน hash ของ URL (เนื้อหาหลังเครื่องหมาย #) URL hash มีลักษณะสำคัญอย่างหนึ่ง: มันจะไม่ถูกส่งไปยังเซิร์ฟเวอร์พร้อมกับคำขอ HTTP เพียงแค่ถูกอ่านและวิเคราะห์โดย JavaScript ในเครื่องเบราว์เซอร์เท่านั้น เมื่อผู้รับเปิดลิงก์แชร์ เบราว์เซอร์จะวิเคราะห์ hash โดยตรงและแตกไฟล์เพื่อแสดงโค้ด กระบวนการทั้งหมดไม่ต้องการการมีส่วนร่วมของเซิร์ฟเวอร์ แต่โปรดทราบ: ลิงก์แชร์มีเนื้อหาโค้ดที่สมบูรณ์ หากโค้ดมีความละเอียดอ่อน อย่าแชร์ในช่องทางสาธารณะ

การจัดรูปแบบล้มเหลวแจ้งข้อผิดพลาดไวยากรณ์ ควรทำอย่างไร?

สาเหตุที่พบบ่อยที่สุดของการจัดรูปแบบล้มเหลวคือโค้ดเองมีข้อผิดพลาดไวยากรณ์: 1) แท็ก JSX ไม่ปิด — ตรวจสอบว่าแท็กทั้งหมดมีคู่กันไหม แท็กปิดเองถูกต้องไหม (<img /> ไม่ใช่ <img>); 2) วงเล็บไม่ตรงกัน — ตรวจสอบวงเล็บปีกกา {} วงเล็บกลม () วงเล็บเหลี่ยม [] มีคู่กันไหม; 3) เครื่องหมายอัญประกาศสตริงไม่ปิด — เครื่องหมายอัญประกาศของสตริงสมบูรณ์ไหม; 4) เขียนไวยากรณ์ผิด — เช่น ใช้ไวยากรณ์ที่ไม่ได้รับอนุญาตใน JSX สามารถตรวจสอบหมายเลขบรรทัดและข้อมูลข้อผิดพลาดในการแจ้งเตือนข้อผิดพลาดก่อนเพื่อค้นหาตำแหน่งปัญหา หรือสามารถทำให้โค้ดเรียบง่ายแล้วจึงตรวจสอบทีละขั้นตอน

ความกว้างการพิมพ์ (printWidth) หมายความว่าอะไร? ควรตั้งค่าเท่าไหร่?

ความกว้างการพิมพ์ (printWidth) เป็นหนึ่งในพารามิเตอร์หลักของ Prettier แสดงถึงจำนวนตัวอักษรสูงสุดต่อบรรทัดโค้ด เมื่อบรรทัดโค้ดหนึ่งเกินความกว้างนี้ Prettier จะตัดบรรทัดโดยอัตโนมัติ ค่าเริ่มต้นคือ 80 ตัวอักษร นี่เป็นธรรมเนียมการเขียนโปรแกรมที่มีประวัติยาวนาน (มาจากการ์ดเจาะรูและความกว้างของเทอร์มินัล) ค่าการตั้งค่าที่พบบ่อย: 80 (คลาสสิกรอบคอบ), 100 (พบบ่อยกว่า), 120 (เข้ากันได้กับหน้าจอกว้าง) การตั้งค่าน้อยเกินไปจะทำให้โค้ดตัดบรรทัดบ่อยๆ อ่านยากกว่าเดิม การตั้งค่าใหญ่เกินไปจะทำให้บรรทัดเดียวยาวเกินไปอ่านยากบนหน้าจอแคบ แนะนำให้เลือกค่าระหว่าง 80-120 ตามมาตรฐานของทีมและความกว้างของหน้าจอ

จุลภาคต่อท้าย (trailing comma) มีประโยชน์อย่างไร? ควรเลือกโหมดไหน?

จุลภาคต่อท้ายคือการเพิ่มจุลภาคหลังรายการสุดท้ายของโครงสร้างหลายบรรทัด เช่น อาร์เรย์ อ็อบเจกต์ พารามิเตอร์ฟังก์ชัน ฯลฯ ประโยชน์รวมถึง: 1) เมื่อเพิ่ม/ลบรายการเพียงแค่เปลี่ยนบรรทัดเดียว Git diff สะอาดกว่า; 2) หลีกเลี่ยงข้อผิดพลาดไวยากรณ์จากลืมเพิ่มจุลภาค; 3) ในบางกรณีการแยกวิเคราะห์มีเสถียรภาพมากขึ้น Prettier ให้สามโหมด: none (ไม่เพิ่มจุลภาคต่อท้าย กระชับที่สุด), es5 (เพิ่มเฉพาะที่ ES5 รองรับ คืออาร์เรย์และอ็อบเจกต์ เข้ากันได้ดีที่สุด), all (เพิ่มทุกที่ที่เป็นไปได้ รวมถึงพารามิเตอร์ฟังก์ชัน ต้องการการสนับสนุน ES2017+ หรือ Babel/TS) โปรเจกต์สมัยใหม่แนะนำให้ใช้โหมด 'all' รวมกับการคอมไพล์ Babel หรือ TypeScript ไม่มีปัญหาเลย

เครื่องหมายอัญประกาศเดี่ยว JSX และวงเล็บ JSX แถวเดี่ยวมีผลอย่างไรตามลำดับ?

เครื่องหมายอัญประกาศเดี่ยว JSX (jsxSingleQuote): ควบคุมว่าคุณสมบัติ JSX ใช้เครื่องหมายอัญประกาศเดี่ยวหรือคู่ เริ่มต้นปิด (เครื่องหมายอัญประกาศคู่) สิ่งนี้สอดคล้องกับธรรมเนียมคุณสมบัติ HTML เมื่อเปิดใช้งาน สตริงคุณสมบัติใน JSX จะใช้เครื่องหมายอัญประกาศเดี่ยว วงเล็บ JSX แถวเดี่ยว (jsxBracketSameLine): ควบคุมว่าวงเล็บมุมขวาขององค์ประกอบ JSX หลายบรรทัด (/> หรือ >) จะวางไว้ที่ท้ายบรรทัดสุดท้าย (แถวเดียว) หรือเริ่มบรรทัดใหม่ (ไม่แถวเดียว) เริ่มต้นปิด (เริ่มบรรทัดใหม่) เมื่อเปิดใช้งานวงเล็บขวาจะอยู่แถวเดียวกับคุณสมบัติสุดท้าย ทีมที่แตกต่างกันมีความชอบที่แตกต่างกัน เพียงแค่เลือกรูปแบบที่สอดคล้องกับโปรเจกต์

รองรับการจัดรูปแบบแบชหลายไฟล์ไหม?

ปัจจุบันเครื่องมือเวอร์ชันเว็บถูกออกแบบมาสำหรับสถานการณ์การจัดรูปแบบเร็วๆ ไฟล์เดียวเป็นหลัก รองรับการประมวลผลอัปโหลดไฟล์เดียวเท่านั้น หากคุณมีไฟล์ JSX/TSX จำนวนมากที่ต้องจัดรูปแบบแบบแบช แนะนำให้ติดตั้งเครื่องมือ Prettier CLI ในโปรเจกต์ ประมวลผลแบบแบชผ่านบรรทัดคำสั่ง (เช่น npx prettier --write "src/**/*.jsx") เครื่องยนต์ชั้นล่างของเครื่องมือนี้เหมือนกับ Prettier ทั้งหมด ผลลัพธ์การจัดรูปแบบเหมือนกัน เวอร์ชันถัดไปอาจจะพิจารณาเพิ่มฟังก์ชันการประมวลผลแบบแบช

สามารถใช้งานร่วมกับ ESLint ได้ไหม?

ได้ ในโปรเจกต์จริง แนะนำให้ใช้ Prettier รับผิดชอบรูปแบบโค้ด (การขึ้นบรรทัดใหม่ การเยื้อง ช่องว่าง เครื่องหมายอัญประกาศ ฯลฯ) ESLint รับผิดชอบคุณภาพโค้ด (ตัวแปรที่ไม่ได้ใช้ บั๊กที่อาจเกิดขึ้น แนวปฏิบัติที่ดีที่สุด ฯลฯ) แนวปฏิบัติที่ดีที่สุดเมื่อใช้ทั้งสองอย่างร่วมกันคือ: 1) ติดตั้ง eslint-config-prettier เพื่อปิดกฎรูปแบบใน ESLint ที่ขัดแย้งกับ Prettier; 2) รัน Prettier จัดรูปแบบก่อน จากนั้นรัน ESLint ตรวจสอบ เครื่องมือนี้มุ่งเน้นไปที่การจัดรูปแบบ (ส่วนที่ Prettier เก่ง) ไม่รวมฟังก์ชันการตรวจสอบโค้ดของ ESLint

สามารถใช้บนโทรศัพท์ได้ไหม? ประสบการณ์บนมือถือเป็นอย่างไร?

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

การแก้ไขปัญหา

การจัดรูปแบบล้มเหลวแจ้งข้อผิดพลาดไวยากรณ์ ควรทำอย่างไร?

ขั้นแรกตรวจสอบว่าโค้ดสมบูรณ์หรือไม่: คอมโพเนนต์ JSX มักจะต้องมี export หรืออย่างน้อยก็มีฟังก์ชันหนึ่งที่ส่งคืน JSX ข้อผิดพลาดไวยากรณ์ที่พบบ่อยรวมถึง: 1) แท็ก JSX ไม่ปิด — ตรวจสอบว่าแท็กเริ่มต้นแต่ละอันมีแท็กปิดที่ตรงกันหรือเครื่องหมายปิดเองหรือไม่; 2) วงเล็บปีกกาไม่ตรงกัน — วงเล็บของนิพจน์ {} ใน JSX มีคู่กันไหม; 3) เครื่องหมายอัญประกาศสตริงไม่ปิด — ตรวจสอบเครื่องหมายอัญประกาศเดี่ยว/เครื่องหมายอัญประกาศคู่/แบ็คทิกทั้งหมด; 4) ใช้คำสงวนใน JSX — เช่น class ต้องเขียนเป็น className for ต้องเขียนเป็น htmlFor; 5) องค์ประกอบรากหลายอัน — JSX อนุญาตให้มีองค์ประกอบรากเพียงหนึ่งเดียว องค์ประกอบหลายอันจำเป็นต้องถูกห่อด้วย <>...</> หรือ <div> ข้อมูลข้อผิดพลาดมักจะแจ้งหมายเลขบรรทัดและสาเหตุ สามารถอาศัยสิ่งนั้นเพื่อค้นหาตำแหน่ง

หลังจากอัปโหลดไฟล์แล้วไม่มีปฏิกิริยาหรือรูปแบบไม่ถูกต้อง?

ขั้นแรกตรวจสอบว่านามสกุลไฟล์ถูกต้องหรือไม่ — ไฟล์ .jsx/.tsx/.js/.ts/.css/.html/.json ทั้งหมดสามารถอัปโหลดได้ หากนามสกุลไฟล์ไม่เป็นมาตรฐาน เครื่องมืออาจไม่สามารถรู้จำรูปแบบภาษาได้อย่างถูกต้อง ทำให้ผลลัพธ์การจัดรูปแบบไม่เป็นไปตามที่คาดหวัง วิธีแก้ไข: 1) ตรวจสอบให้แน่ใจว่านามสกุลไฟล์เป็นรูปแบบมาตรฐาน; 2) หลังจากอัปโหลดแล้วตรวจสอบการเลือกภาษาที่มุมบนซ้ายว่าถูกต้องหรือไม่ หากไม่ถูกต้องสามารถสลับด้วยตัวเองได้; 3) ยืนยันว่าเนื้อหาไฟล์เป็นข้อความล้วนไม่ใช่ไฟล์ไบนารี; 4) ไฟล์ใหญ่เกินไป (เกิน 1MB) อาจทำให้เบราว์เซอร์ล่าช้า แนะนำให้ใช้เครื่องมือเดสก์ท็อปเพื่อประมวลผล

โค้ดหลังจากจัดรูปแบบแตกต่างจากผลลัพธ์ Prettier ในเครื่องของฉัน?

สาเหตุที่เป็นไปได้: 1) ความแตกต่างของเวอร์ชัน — เครื่องมือนี้ใช้ Prettier v3 หากโปรเจกต์ของคุณใช้เวอร์ชัน v2 รายละเอียดบางอย่างอาจแตกต่างกัน (เช่น การเปลี่ยนแปลงค่าเริ่มต้นของจุลภาคต่อท้าย); 2) การกำหนดค่าที่แตกต่างกัน — ตรวจสอบพารามิเตอร์เช่น ความกว้างการพิมพ์ การเยื้อง เครื่องหมายอัญประกาศ จุลภาคต่อท้าย สอดคล้องกับการกำหนดค่าของโปรเจกต์หรือไม่; 3) ตัวแยกวิเคราะห์ที่แตกต่างกัน — JSX ใช้ตัวแยกวิเคราะห์ Babel TSX ใช้ตัวแยกวิเคราะห์ TypeScript ยืนยันว่าได้เลือกที่ถูกต้องแล้ว; 4) ความแตกต่างของปลั๊กอิน — หาก Prettier ในเครื่องได้ติดตั้งปลั๊กอินเสริม (เช่น prettier-plugin-tailwindcss) เครื่องมือนี้ไม่รวมปลั๊กอินเหล่านั้น แนะนำให้ปรับการกำหนดค่าของเครื่องมือนี้ให้สอดคล้องกับ .prettierrc ของโปรเจกต์

หลังจากบีบอัด JSX แล้วโค้ดทำงานไม่ปกติ?

การบีบอัด JSX ใช้เครื่องยนต์ Terser มันจะคอมไพล์ JSX เป็น JavaScript ทั่วไปก่อนจากนั้นจึงดำเนินการบีบอัด หากโค้ดหลังจากบีบอัดไม่ทำงาน ให้ตรวจสอบ: 1) การกำหนดค่าการบีบอัดรุนแรงเกินไปหรือไม่ — เช่น การเปิดใช้งาน toplevel อาจเปลี่ยนแปลงพฤติกรรมของโมดูล; 2) โค้ดใช้ eval หรือการเข้าถึงคุณสมบัติแบบไดนามิกหรือไม่ — การสับสนตัวแปรอาจทำให้ชื่อไม่ตรงกัน; 3) มีการพึ่งพาชื่อฟังก์ชันหรือชื่อคลาสที่เฉพาะเจาะจงหรือไม่ — หากมี จำเป็นต้องเปิดใช้งานตัวเลือก keep_fnames หรือ keep_classnames การบีบอัดสภาพแวดล้อมการผลิตแนะนำให้เสร็จสิ้นด้วยเครื่องมือสร้างโปรเจกต์ (Vite/Webpack) พวกมันมีการกำหนดค่าและระบบนิเวศปลั๊กอินที่สมบูรณ์กว่า

อภิธานศัพท์

JSX: ย่อมาจาก JavaScript XML ส่วนขยายไวยากรณ์ JavaScript ที่ React แนะนำให้ใช้ ทำให้สามารถเขียนโครงสร้างแท็กที่คล้าย HTML ใน JS หลังจากคอมไพล์จะถูกแปลงเป็นการเรียก React.createElement()
Prettier: เครื่องมือจัดรูปแบบโค้ดที่มีทัศนคติ (opinionated) ที่เป็นที่นิยมที่สุดในปัจจุบัน รองรับ JS/TS/JSX/TSX/JSON/CSS/HTML/Markdown ฯลฯ กลายเป็นมาตรฐานจริงของการจัดรูปแบบโค้ดฟรอนต์เอนด์
Babel: คอมไพเลอร์ JavaScript สามารถแปลงไวยากรณ์ใหม่เช่น ES6+/JSX/TS เป็นโค้ด ES5 ที่เข้ากันได้กับเบราว์เซอร์รุ่นเก่า ในขณะเดียวกันก็ทำหน้าที่เป็นเครื่องยนต์ชั้นล่างของ Prettier สำหรับแยกวิเคราะห์ JSX
Terser: เครื่องมือบีบอัด (minifier) JavaScript/JSX ที่เป็นที่นิยมที่สุดในอุตสาหกรรม รองรับการสับสนตัวแปร การกำจัดโค้ดที่ตายแล้ว การบีบอัดโค้ด ฯลฯ เป็นเครื่องมือบีบอัดเริ่มต้นของเครื่องมือสร้างเช่น Webpack/Vite
Print Width（ความกว้างการพิมพ์）: หนึ่งในพารามิเตอร์หลักของ Prettier แสดงถึงจำนวนตัวอักษรสูงสุดต่อบรรทัดโค้ด เมื่อเกินความกว้างนี้จะตัดบรรทัดโดยอัตโนมัติ เริ่มต้น 80 ตัวอักษร การตั้งค่าที่พบบ่อยคือ 80/100/120
Trailing Comma（จุลภาคต่อท้าย）: การเพิ่มจุลภาคหลังรายการสุดท้ายของโครงสร้างหลายบรรทัด เช่น อาร์เรย์ อ็อบเจกต์ พารามิเตอร์ฟังก์ชัน ฯลฯ สามารถทำให้ Git diff สะอาดขึ้น หลีกเลี่ยงข้อผิดพลาดไวยากรณ์ Prettier รองรับสามโหมด none/es5/all
Mangle（การสับสนตัวแปร）: เทคนิคการย่อชื่อตัวแปร/ชื่อฟังก์ชันในการบีบอัดโค้ด แทนที่ชื่อตัวแปรยาวที่มีความหมายด้วยชื่อสั้นๆ เช่น a/b/c ลดขนาดโค้ด และยังเพิ่มความยากในการอ่านด้วย
Dead Code Elimination（การกำจัดโค้ดที่ตายแล้ว）: เทคนิคการปรับปรุงของเครื่องมือบีบอัด ลบโค้ดที่ไม่เคยถูกเรียกใช้ (เช่น โค้ดภายใต้เงื่อนไข false ตัวแปรและฟังก์ชันที่ไม่ได้ใช้งาน) ลดขนาดผลิตภัณฑ์
CodeMirror: ส่วนประกอบเครื่องมือแก้ไขโค้ดฝั่งเบราว์เซอร์ที่เครื่องมือนี้ใช้ (เวอร์ชัน 6) ให้ฟังก์ชันการแก้ไขมืออาชีพเช่น การเน้นไวยากรณ์ หมายเลขบรรทัด การจับคู่วงเล็บ ถูกนำไปใช้อย่างแพร่หลายใน IDE ออนไลน์ต่างๆ
LZ-String: อัลกอริทึมการบีบอัด LZ ที่นำไปใช้ด้วย JavaScript ใช้สำหรับบีบอัดและจัดเก็บเนื้อหาโค้ดอย่างมีประสิทธิภาพใน URL hash อัตราส่วนการบีบอัดสูงและความเร็วในการถอดรหัสเร็ว เหมาะสำหรับสถานการณ์การแชร์ลิงก์
localStorage: API จัดเก็บคู่คีย์-ค่าในเครื่องที่เบราว์เซอร์ให้ไว้ ความจุประมาณ 5-10MB ข้อมูลถูกจัดเก็บอย่างถาวร (เว้นแต่จะถูกลบโดยเจตนา) เครื่องมือนี้ใช้มันเพื่อจัดเก็บประวัติการจัดรูปแบบ
ESLint: เครื่องมือตรวจสอบสถิตโค้ด JavaScript/TypeScript (Linter) รับผิดชอบหลักคือคุณภาพโค้ดและแนวปฏิบัติที่ดีที่สุด มักถูกใช้ร่วมกับ Prettier (Prettier จัดการรูปแบบ ESLint จัดการคุณภาพ)

ภาษาและรูปแบบไฟล์ที่รองรับ

เครื่องมือรองรับ 7 ภาษาฟรอนต์เอนด์ยอดนิยม สามารถสลับได้อย่างอิสระผ่านเมนูที่มุมบนซ้าย:

ภาษา	นามสกุลไฟล์	เครื่องยนต์จัดรูปแบบ	เครื่องยนต์บีบอัด
JavaScript	`.js, .mjs, .cjs`	Prettier (Babel)	Terser
TypeScript	`.ts, .mts, .cts`	Prettier (TypeScript)	Terser (ลบประเภทก่อน)
JSX	`.jsx`	Prettier (Babel)	Terser
TSX	`.tsx`	Prettier (TypeScript)	Terser (ลบประเภทก่อน)
CSS	`.css`	Prettier (PostCSS)	CSSO
HTML	`.html, .htm`	Prettier (HTML)	การนำไปใช้แบบกำหนดเอง
JSON	`.json`	Prettier (JSON)	JSON.stringify

รายการกำหนดค่าจัดรูปแบบ

12 พารามิเตอร์การจัดรูปแบบที่สามารถกำหนดค่าได้และหน้าที่ของมัน:

รายการกำหนดค่า	ค่าที่เลือกได้	ค่าเริ่มต้น	คำอธิบาย
tabWidth ขนาดการเยื้อง	`2 / 4 / 8 / Tab`	`2 ช่องว่าง`	จำนวนช่องว่างที่ใช้สำหรับการเยื้องแต่ละระดับ หรือใช้ตัวอักษร Tab
semi อัฒภาค	`true / false`	`true`	เพิ่มอัฒภาคที่ท้ายคำสั่งหรือไม่
singleQuote เครื่องหมายอัญประกาศเดี่ยว	`true / false`	`false (เครื่องหมายอัญประกาศคู่)`	สตริง JS ใช้เครื่องหมายอัญประกาศเดี่ยวหรือคู่
trailingComma จุลภาคต่อท้าย	`none / es5 / all`	`es5`	เพิ่มจุลภาคต่อท้ายหลังรายการสุดท้ายของโครงสร้างหลายบรรทัดหรือไม่
bracketSpacing ช่องว่างวงเล็บ	`true / false`	`true`	เพิ่มช่องว่างภายในวงเล็บปีกกาของอ็อบเจกต์หรือไม่
arrowParens วงเล็บลูกศร	`always / avoid`	`always`	พารามิเตอร์เดี่ยวของฟังก์ชันลูกศรเพิ่มวงเล็บหรือไม่
printWidth ความกว้างการพิมพ์	`ตัวเลข (แนะนำ 80-120)`	`80`	จำนวนตัวอักษรสูงสุดต่อบรรทัด เมื่อเกินจะตัดบรรทัดโดยอัตโนมัติ
jsxSingleQuote เครื่องหมายอัญประกาศเดี่ยว JSX	`true / false`	`false`	คุณสมบัติ JSX ใช้เครื่องหมายอัญประกาศเดี่ยว (เริ่มต้นคู่)
jsxBracketSameLine วงเล็บ JSX แถวเดียว	`true / false`	`false`	วงเล็บขวาของ JSX หลายบรรทัดอยู่แถวเดียวกับคุณสมบัติสุดท้ายหรือไม่
quoteProps เครื่องหมายอัญประกาศคุณสมบัติ	`as-needed / preserve / consistent`	`as-needed`	เมื่อไหร่จึงจะเพิ่มเครื่องหมายอัญประกาศให้กับชื่อคุณสมบัติอ็อบเจกต์

เปรียบเทียบผลการบีบอัด JSX ก่อนและหลัง

ใช้คอมโพเนนต์ React ทั่วไปเป็นตัวอย่าง แสดงการเปลี่ยนแปลงขนาดก่อนและหลังการบีบอัด:

รายการเปรียบเทียบ	จัดรูปแบบ (พัฒนา)	บีบอัด (ผลิต)	อัตราส่วนบีบอัด
ขนาดโค้ด	ประมาณ 2.5 KB	ประมาณ 0.8 KB	`~68%`
จำนวนบรรทัด	ประมาณ 80 บรรทัด	1 บรรทัด	`~99%`
ชื่อตัวแปร	ชื่อที่มีความหมาย	ตัวอักษรเดี่ยว a/b/c/d	`—`
คำอธิบาย	เก็บคำอธิบายทั้งหมด	ลบทั้งหมด	`—`
ความสามารถในการอ่าน	สูง (สามารถอ่านแก้ไขข้อผิดพลาดได้)	ต่ำมาก (เครื่องเท่านั้นที่อ่านได้)	`—`
สถานการณ์ที่ใช้	พัฒนา แก้ไขข้อผิดพลาด ตรวจทาน	ปรับใช้ผลิต แจกจ่าย CDN	`—`

Privacy & Security

การดำเนินการทั้งหมดของเครื่องมือจัดรูปแบบ JSX นี้เสร็จสิ้นทั้งหมดในเครื่องเบราว์เซอร์: โค้ดที่คุณป้อนหรืออัปโหลดเพียงแค่ถูกจัดรูปแบบและประมวลผลบีบอัดใน JavaScript ของเบราว์เซอร์ จะไม่ถูกส่งผ่านเครือข่ายไปยังเซิร์ฟเวอร์ภายนอกใดๆ Prettier และ Terser ทั้งสองเป็นไลบรารี JavaScript ล้วน สามารถรันโดยตรงในฝั่งเบราว์เซอร์ ประวัติถูกเก็บไว้ใน localStorage (ที่จัดเก็บในเครื่อง) ของเบราว์เซอร์ มองเห็นได้เฉพาะในอุปกรณ์และเบราว์เซอร์ปัจจุบันเท่านั้น ฟังก์ชันการแชร์ URL บีบอัดโค้ดผ่าน LZ-String จากนั้นเข้ารหัสไว้ที่ส่วน hash ของ URL (เนื้อหาหลัง # ไม่ส่งไปยังเซิร์ฟเวอร์) หน้าเว็บไม่ใช้ Cookie สำหรับการติดตาม ไม่รวบรวมเนื้อหาโค้ดที่ผู้ใช้ป้อน คุณสามารถใช้เครื่องมือนี้ในสภาพที่ตัดการเชื่อมต่อเครือข่ายได้ ฟังก์ชันหลักยังทำงานปกติ

Authoritative References

prettier.ioเอกสารทางการ Prettier
terser.orgTerser - เครื่องมือบีบอัด JavaScript
react.devเอกสารทางการ React - แนะนำ JSX