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

อัปโหลด

0 ตัวอักษร

เครื่องมือจัดรูปแบบโค้ด JavaScript/TypeScript/JSX/TSX/CSS/HTML/JSON บนเบราว์เซอร์ รองรับการกำหนดค่าสไตล์ Prettier อย่างละเอียด การบีบอัด-ทำให้งงงวยด้วย Terser มีตัวแก้ไข CodeMirror ในตัว ดูตัวอย่างเรียลไทม์ คีย์ลัด อัปโหลด/ดาวน์โหลดไฟล์

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

บีบอัด JS

CSS Formatter

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

เครื่องสร้าง QR Code/บาร์โค้ด

ตัวแปลง cURL เป็นโค้ด

ทำให้โค้ด JS อ่านยาก (Obfuscate)

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

ในระหว่างการพัฒนาฟรอนต์เอนด์ วางโค้ด JS ของบุคคลที่สามที่ถูกบีบอัดแล้ว จัดแต่งรูปแบบอย่างรวดเร็วเพื่ออ่านและดีบัก
ก่อนการตรวจสอบโค้ดของทีม จัดรูปแบบโค้ด JavaScript/TypeScript ให้เป็นหนึ่งเดียว ขจัดความแตกต่างของสไตล์ เช่น เยื้อง อัญประกาศ เซมิโคลอน มุ่งเน้นไปที่การตรวจสอบตรรกะ
เมื่อรับโปรเจกต์เก่า จัดรูปแบบโค้ด JS เก่าที่เรียงไม่เป็นระเบียบในคลิกเดียว ทำความเข้าใจโครงสร้างโค้ดและลำดับชั้นตรรกะอย่างรวดเร็ว
ก่อนปรับใช้งานจริง ใช้ Terser บีบอัดและทำให้โค้ด JavaScript งงงวย ลดขนาดไฟล์และเพิ่มความเร็วในการโหลดหน้าเว็บ
เมื่อเขียน JS/JSX demo ออนไลน์ จัดรูปแบบแบบเรียลไทม์เพื่อให้โค้ดสะอาด ง่ายต่อการแชร์กับเพื่อนร่วมงานหรือชุมชน
เมื่อเรียนรู้ผลของตัวเลือกการกำหนดค่า Prettier ต่างๆ ปรับตัวเลือกเพื่อดูผลลัพธ์การจัดรูปแบบทันที ทำความเข้าใจการทำงานของพารามิเตอร์ เช่น tabWidth, trailingComma
เมื่อประมวลผลส่วนย่อยโค้ดที่คัดลอกจากแพลตฟอร์ม เช่น Stack Overflow, GitHub แก้ไขปัญหาการเยื้องและการขึ้นบรรทัดใหม่อัตโนมัติ
เมื่อเขียนไฟล์คอนฟิก JSON จัดรูปแบบการเยื้องและการขึ้นบรรทัดใหม่อัตโนมัติ หลีกเลี่ยงความล้มเหลวในการแยกวิเคราะห์ที่เกิดจากคอม่าหรือวงเล็บผิด
ในระหว่างการพัฒนาหน้า CSS/HTML จัดรูปแบบโค้ด JS+CSS+HTML ในโปรเจกต์เดียวกันในที่เดียว รักษาสไตล์ให้เป็นหนึ่งเดียว
ก่อนสัมภาษณ์หรือสอบเขียน จัดระเบียบโค้ด JS สำหรับโจทย์อัลกอริทึมอย่างรวดเร็ว จัดรูปแบบมาตรฐานเพื่อเพิ่มความสวยงามของโค้ด

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

เปิดหน้าเครื่องมือจัดรูปแบบ JavaScript สามารถวางโค้ดลงในพื้นที่แก้ไขด้านซ้ายโดยตรง หรือคลิกปุ่มอัปโหลดเพื่อเลือกไฟล์ในเครื่อง (รองรับรูปแบบ .js/.ts/.jsx/.tsx/.css/.html/.json)
เลือกประเภทภาษาที่สอดคล้องกัน: โดยปกติเครื่องมือจะจดจำอัตโนมัติ หากการจดจำไม่ถูกต้องสามารถเลือก JavaScript/TypeScript/JSX/TSX/CSS/HTML/JSON ด้วยตนเองในดรอปดาวน์ภาษา
กำหนดค่าตัวเลือกการจัดรูปแบบ: สามารถเลือกสไตล์ด่วนที่ตั้งไว้ (default/modern/classic) หรือปรับตัวเลือก Prettier ด้วยตนเอง (ความกว้างเยื้อง, แท็บ/ช่องว่าง, ความกว้างบรรทัด, เซมิโคลอน, อัญประกาศ, คอม่าท้าย, วงเล็บลูกศร)
หากต้องการบีบอัดโค้ด สลับไปที่โหมดบีบอัด กำหนดค่าตัวเลือกการบีบอัด Terser (เปิดใช้ compress หรือไม่, mangle ชื่อตัวแปรหรือไม่, บีบอัดตัวแปรระดับบนหรือไม่), ระดับการเพิ่มประสิทธิภาพ CSS, ตัวเลือกการบีบอัด HTML
เครื่องมือประมวลผลโค้ดแบบเรียลไทม์ พื้นที่แก้ไขด้านขวาแสดงผลลัพธ์ที่จัดรูปแบบหรือบีบอัดทันที แถบสถานะด้านล่างแสดงสถิติจำนวนอักขระ จำนวนไบต์ และอัตราส่วนการบีบอัดแบบเรียลไทม์
ใช้คีย์ลัดเพื่อเพิ่มประสิทธิภาพ: Ctrl+Shift+B เรียกใช้การจัดรูปแบบ, Ctrl+Shift+M สลับโหมดบีบอัด, Ctrl+Shift+O เปิดไฟล์, Ctrl+Shift+D ดาวน์โหลดผลลัพธ์, Ctrl+Shift+K ล้างตัวแก้ไข
เมื่อพอใจแล้วคลิกปุ่มคัดลอกเพื่อคัดลอกผลลัพธ์ไปยังคลิปบอร์ด หรือคลิกปุ่มดาวน์โหลดเพื่อบันทึกเป็นไฟล์ในเครื่อง; สามารถคลิกปุ่มแชร์เพื่อสร้างลิงก์ URL ที่มีโค้ดและการกำหนดค่าเพื่อแชร์กับผู้อื่นได้

คุณสมบัติ

รองรับหลายภาษา: รองรับการจัดรูปแบบ JavaScript, TypeScript, JSX, TSX, CSS, HTML, JSON รวม 7 ภาษาที่ใช้บ่อยในฟรอนต์เอนด์ ประมวลผลโค้ดฟรอนต์เอนด์ครบในที่เดียว
กำหนดค่าสไตล์ Prettier อย่างละเอียด: รองรับตัวเลือกครบถ้วน เช่น tabWidth ความกว้างเยื้อง (2/4/8 ช่องว่าง), useTabs แท็บเทียบกับช่องว่าง, printWidth ความกว้างบรรทัด, semi เซมิโคลอน, singleQuote อัญประกาศเดี่ยว/คู่, trailingComma คอม่าท้าย, arrowParens วงเล็บฟังก์ชันลูกศร
ฟีเจอร์บีบอัดโค้ด: ผสานรวมเอนจินบีบอัด Terser รองรับตัวเลือกการบีบอัดระดับโปรดักชัน เช่น compress การบีบอัดโค้ด, mangle การทำให้ชื่อตัวแปรงงงวย, toplevel การบีบอัดตัวแปรระดับบน
การเพิ่มประสิทธิภาพ CSS เฉพาะทาง: มีการกำหนดค่าระดับการเพิ่มประสิทธิภาพ CSS รองรับการประมวลผลเฉพาะทาง เช่น บีบอัด CSS ลบคอมเมนต์ ลบช่องว่าง
ตัวเลือกบีบอัด HTML: รองรับการกำหนดค่า HTML minify สามารถยุบช่องว่าง ลบคอมเมนต์ ลบอัญประกาศคุณสมบัติ ฯลฯ
ประมวลผลแบบเรียลไทม์: จัดรูปแบบและดูตัวอย่างทันทีหลังจากป้อนโค้ด ไม่ต้องคลิกปุ่มก็เห็นผลลัพธ์การจัดเรียง
ตัวแก้ไข CodeMirror: มีตัวแก้ไข CodeMirror มืออาชีพในตัว ให้ประสบการณ์การแก้ไขระดับมืออาชีพ เช่น เน้นไวยากรณ์ แสดงหมายเลขบรรทัด จับคู่วงเล็บ พับโค้ด
อัปโหลด/ดาวน์โหลดไฟล์: รองรับการอัปโหลดไฟล์ .js/.ts/.jsx/.tsx/.css/.html/.json ในเครื่องโดยตรง หลังจัดรูปแบบสามารถดาวน์โหลดไฟล์ที่ประมวลผลแล้วได้ในคลิกเดียว
ลิงก์แชร์: บันทึกโค้ดและการกำหนดค่าผ่าน URL hash สร้างลิงก์แชร์ส่งให้เพื่อนร่วมงานเพื่อจำลองสถานการณ์การจัดรูปแบบปัจจุบัน
ประวัติ: บันทึกประวัติการจัดรูปแบบอัตโนมัติใน localStorage ย้อนกลับไปยังเวอร์ชันโค้ดและการกำหนดค่าก่อนหน้าได้ตลอดเวลา
คีย์ลัด: รองรับการทำงานด้วยคีย์ลัด เช่น Ctrl+Shift+B จัดรูปแบบ, Ctrl+Shift+M บีบอัด, Ctrl+Shift+O เปิดไฟล์, Ctrl+Shift+D ดาวน์โหลด, Ctrl+Shift+K ล้าง
ค่าที่ตั้งไว้ด่วน: มีค่าที่ตั้งไว้ด่วน 3 แบบ ได้แก่ default, modern, classic สลับสไตล์ที่ใช้บ่อยในคลิกเดียว
สถิติอักขระ: แสดงจำนวนอักขระ จำนวนไบต์ และอัตราส่วนการบีบอัดของโค้ดต้นฉบับและโค้ดที่ประมวลผลแล้วแบบเรียลไทม์
โค้ดตัวอย่าง: มีโค้ดตัวอย่างสำหรับภาษาต่างๆ ในตัว คลิกเพื่อโหลดทันทีเพื่อทดลองใช้ฟีเจอร์

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

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

ไม่ใช่ การจัดรูปแบบเพียงปรับเนื้อหาที่เกี่ยวข้องกับ "การจัดเรียง" เช่น ช่องว่าง การเยื้อง การขึ้นบรรทัดใหม่ ตำแหน่งวงเล็บ สไตล์อัญประกาศ ฯลฯ ซึ่งอาศัยการแปลง AST (แผนผังไวยากรณ์นามธรรม) โครงสร้าง AST ของโค้ดก่อนและหลังการจัดรูปแบบเหมือนกันอย่างสมบูรณ์ ตรรกะการทำงานเหมือนกัน 100% ตราบใดที่โค้ดเองมีไวยากรณ์ที่ถูกต้องและสามารถแยกวิเคราะห์ได้ตามปกติ การจัดรูปแบบจะไม่เปลี่ยนพฤติกรรมการทำงานใดๆ สามารถใช้งานได้อย่างมั่นใจ แต่การบีบอัด (mangle) แม้ว่าจะไม่เปลี่ยนตรรกะเช่นกัน แต่ต้องระมัดระวังสถานการณ์พิเศษ เช่น eval, การส่งออกตัวแปรโกลบอล หลีกเลี่ยงการกำหนดค่าที่ไม่เหมาะสม

จะทำอย่างไรหากผลลัพธ์การจัดรูปแบบของเครื่องมือจัดรูปแบบกับ VS Code/Prettier ในเครื่องของฉันแตกต่างกัน?

ตรรกะการจัดรูปแบบของเครื่องมือนี้พยายามรักษาให้สอดคล้องกับพฤติกรรมทางการของ Prettier มากที่สุด หากผลลัพธ์แตกต่างกัน โปรดตรวจสอบรายการกำหนดค่า: tabWidth, useTabs, semi, singleQuote, trailingComma, arrowParens - ตัวเลือกหลักเหล่านี้เหมือนกันทั้งสองด้านหรือไม่ นอกจากนี้ให้สังเกตความแตกต่างของเวอร์ชัน Prettier - การกำหนดค่าเริ่มต้นของ Prettier 2/3 มีความแตกต่างเล็กน้อย (v3 ค่าเริ่มต้น trailingComma: all, v2 ค่าเริ่มต้น es5; ตั้งแต่ v2 arrowParens ค่าเริ่มต้นเป็น always) หากโปรเจกต์ในเครื่องของคุณมีไฟล์คอนฟิก .prettierrc ให้ปรับตัวเลือกให้สอดคล้องกันบนหน้าเว็บ ผลลัพธ์การจัดรูปแบบจะเหมือนกัน

โค้ดที่ถูกบีบอัดสามารถกู้คืนได้หรือไม่? ชื่อตัวแปรที่ถูก mangle สามารถกู้คืนได้หรือไม่?

โค้ดที่ถูกจัดรูปแบบสามารถย้อนกลับได้อย่างสมบูรณ์ - เนื่องจากเพียงแค่การจัดเรียงเปลี่ยนไป ตัวระบุและตรรกะทั้งหมดยังคงอยู่ครบถ้วน จัดรูปแบบอีกครั้งก็จะกลับมา แต่โค้ดที่ถูกบีบอัด: ส่วนที่เพียงลบช่องว่างและคอมเมนต์สามารถจัดรูปแบบใหม่เพื่อกู้คืนเลย์เอาต์ได้ แต่ mangle (การทำให้ชื่อตัวแปรงงงวย) ไม่สามารถย้อนกลับได้ - ชื่อตัวแปรที่มีความหมายเดิม userName กลายเป็น a กระบวนการนี้เป็นทางเดียว ไม่สามารถกู้คืนชื่อเดิมอัตโนมัติได้ หากต้องการดีบักโค้ดที่ถูกบีบอัดในสภาพแวดล้อมการผลิต ควรสร้างไฟล์ Source Map และแมปกลับไปยังตำแหน่งซอร์สโค้ดผ่าน Source Map ดังนั้นก่อนบีบอัดโปรดเก็บซอร์สโค้ดเดิมที่ไม่ได้บีบอัดไว้เสมอ!

รองรับเบราว์เซอร์ใดบ้าง? ใช้บนโทรศัพท์มือถือได้หรือไม่?

เครื่องมือนี้รองรับเบราว์เซอร์สมัยใหม่ทั้งหมด: Chrome, Firefox, Safari, Edge รุ่นล่าสุดสามารถใช้งานได้ตามปกติ ไม่รองรับเบราว์เซอร์ IE (ปัจจุบันไม่มีใครใช้ IE พัฒนาแล้ว) เลย์เอาต์ตอบสนองปรับให้เข้ากับหน้าจอมือถือ แต่การแก้ไขโค้ดบนหน้าจอเล็กมีประสบการณ์ปานกลาง แนะนำให้ใช้บนเบราว์เซอร์เดสก์ท็อปจะมีประสิทธิภาพมากขึ้นบนหน้าจอใหญ่ การคำนวณการจัดรูปแบบและการบีบอัดทั้งหมดทำงานบนเบราว์เซอร์ในเครื่อง ไม่จำเป็นต้องอัปโหลดโค้ดไปยังเซิร์ฟเวอร์ โค้ดจะไม่ออกจากเบราว์เซอร์ของคุณ ปลอดภัยและเชื่อถือได้

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

เครื่องมือจัดรูปแบบต้องแยกวิเคราะห์โค้ดเป็น AST ก่อนจึงจะทำงานได้ หากโค้ดมีข้อผิดพลาดไวยากรณ์ (วงเล็บไม่ตรงกัน สตริงไม่ปิด คีย์เวิร์ดเขียนผิด มีคอม่าเกิน ฯลฯ) ตัวแยกวิเคราะห์ไม่เข้าใจโครงสร้างโค้ดและจะให้ข้อผิดพลาด โปรดตรวจสอบข้อผิดพลาดไวยากรณ์ของโค้ดเองก่อน: ดูว่ามีข้อความแสดงข้อผิดพลาดในคอนโซลหรือไม่ เอดิเตอร์มีเส้นหยักสีแดงระบุตำแหน่งข้อผิดพลาดหรือไม่ หลังจากแก้ไขข้อผิดพลาดไวยากรณ์แล้วจะสามารถจัดรูปแบบได้ตามปกติ นอกจากนี้ให้แน่ใจว่าเลือกโหมดภาษาที่ถูกต้อง อย่าเลือก JS ทั่วไปสำหรับโค้ด JSX/TSX

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

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

สามารถจัดรูปแบบคอมโพเนนต์ไฟล์เดียว Vue (ไฟล์ .vue) ได้หรือไม่? แล้ว Svelte ล่ะ?

ปัจจุบันการรองรับหลายภาษาของเครื่องมือนี้รวมถึง JS/TS/JSX/TSX/CSS/HTML/JSON ไฟล์เดี่ยว <template>/<script>/<style> ของ Vue (SFC) และคอมโพเนนต์ Svelte ปัจจุบันยังไม่รองรับการจัดรูปแบบทั้งหมดโดยตรง แต่คุณสามารถคัดลอกส่วน script (JS/TS), ส่วน style (CSS), ส่วน template (HTML) ออกมาแยกกัน เลือกภาษาที่สอดคล้องกันเพื่อจัดรูปแบบแยกกันได้ ในอนาคตจะพิจารณาเพิ่มการรองรับการจัดรูปแบบ Vue/Svelte SFC

จะตั้งค่าข้อกำหนดการจัดรูปแบบรวมของทีมได้อย่างไร?

สำหรับข้อกำหนดรวมของทีม แนะนำให้รวมกันในสามระดับ: ①วาง .editorconfig ในไดเรกทอรีรากของโปรเจกต์ รวมการตั้งค่าพื้นฐานของเอดิเตอร์ (การเยื้อง ตัวแบ่งบรรทัด การเข้ารหัส); ②ใช้ Prettier และวางไฟล์คอนฟิก .prettierrc ในโปรเจกต์ ทุกคนและ CI จัดรูปแบบด้วยคอนฟิกนี้ เครื่องมือนี้ก็สามารถเลือกตัวเลือกที่สอดคล้องกันเพื่อให้ตรงกับคอนฟิก; ③ใช้ ESLint + eslint-config-prettier เพื่อปิดกฎสไตล์ของ ESLint ตรวจสอบเฉพาะคุณภาพโค้ด กำหนดค่าเอดิเตอร์ให้จัดรูปแบบอัตโนมัติเมื่อบันทึก (ติดตั้งส่วนขยาย Prettier ใน VS Code ตั้งค่า editor.formatOnSave: true) เพิ่มขั้นตอน lint ใน CI เพื่อตรวจสอบรูปแบบ ให้แน่ใจว่าโค้ดที่ส่งมานั้นสอดคล้องกับข้อกำหนด

ประโยชน์ของคอม่าท้าย (trailingComma) คืออะไร? ควรเปิดใช้หรือไม่?

แนะนำอย่างยิ่งให้เปิดใช้คอม่าท้าย (อย่างน้อยระดับ es5 แนะนำระดับ all) ประโยชน์ของคอม่าท้ายคือ: ①Git diff สะอาดขึ้น: เมื่อเพิ่มองค์ประกอบสุดท้ายไม่จำเป็นต้องเพิ่มคอม่าในบรรทัดก่อนหน้า มีเฉพาะ diff ของบรรทัดใหม่ การเพิ่มคอม่าจะไม่ทำให้ diff ของบรรทัดก่อนหน้าเสียหาย; ②สะดวกขึ้นเมื่อจัดลำดับองค์ประกอบใหม่ ไม่ต้องจัดการปัญหาคอม่าท้าย; ③เบราว์เซอร์สมัยใหม่และ Node.js รองรับคอม่าท้ายอย่างสมบูรณ์ IE เก่าไม่รองรับแต่ตอนนี้ไม่จำเป็นต้องพิจารณา IE แล้ว ข้อเสียเพียงอย่างเดียวคือมีคอม่ามากขึ้นหนึ่งตัว แต่เมื่อเปรียบเทียบกับความสะดวกที่ได้รับ ก็คุ้มค่าอย่างสมบูรณ์ Prettier v3 ค่าเริ่มต้นเป็น all

เมื่อบีบอัดควรเปิด mangle หรือไม่? compress และ mangle แตกต่างกันอย่างไร?

สำหรับการบีบอัดสภาพแวดล้อมการผลิต แนะนำให้เปิดทั้ง compress และ mangle ซึ่งเป็นตัวเลือกการบีบอัดอิสระสองตัว: compress คือการเพิ่มประสิทธิภาพโค้ด (ค่าคงที่พับ, ลบโค้ดที่ไม่สามารถเข้าถึงได้, ลดรูปนิพจน์ ฯลฯ) แก้ไขโครงสร้างโค้ดเฉพาะเมื่อสามารถลดรูปได้ ไม่เปลี่ยนชื่อตัวแปร; mangle คือการย่อชื่อตัวแปรโลคัล เปลี่ยนชื่อตัวแปรที่ยาวให้เป็นอักขระเดี่ยว ซึ่งเป็นหนึ่งในแหล่งลดขนาดที่ใหญ่ที่สุด ตราบใดที่โค้ดของคุณไม่ได้ถูกเรียกจากภายนอกโดยตรงด้วยชื่อตัวแปรในรูปแบบไลบรารี หรือไม่ได้เข้าถึงชื่อตัวแปรแบบไดนามิกด้วย eval mangle ก็ปลอดภัยและสามารถลดขนาดได้อย่างมาก หากไลบรารีโอเพ่นซอร์สจำเป็นต้องรักษาชื่อ API สามารถกำหนดค่า mangle.reserved เพื่อสงวนชื่อที่ส่งออกได้

ทำไมอักขระบางตัวถูก escape อัตโนมัติเมื่อจัดรูปแบบ JSON?

ข้อกำหนด JSON มีไวยากรณ์ที่เข้มงวด: สตริงต้องเป็นอัญประกาศคู่ ห้ามมีคอม่าท้าย อักขระพิเศษต้องถูก escape (ขึ้นบรรทัดใหม่→\n, อัญประกาศ→\", แบ็กสแลช→\\, Tab→\t ฯลฯ) หากสตริง JSON ของคุณมีอักขระพิเศษที่ไม่ได้ escape จะถูก escape อัตโนมัติตามข้อกำหนด JSON ในระหว่างการจัดรูปแบบ ซึ่งเป็นพฤติกรรมที่ถูกต้อง ทราบ: JSON ไม่ใช่ JavaScript ไม่สามารถเขียนคอมเมนต์ใน JSON ได้ ห้ามใช้อัญประกาศเดี่ยว ห้ามมี undefined สิ่งเหล่านี้ทั้งหมดจะทำให้การแยกวิเคราะห์ JSON ล้มเหลว

จะให้วงเล็บอยู่เสมอในพารามิเตอร์ฟังก์ชันลูกศรได้อย่างไร? หรือไม่ต้องการวงเล็บ?

ปรับตัวเลือก arrowParens: always คือให้วงเล็บเสมอ ((x) => x) ซึ่งเป็นค่าเริ่มต้นของ Prettier v2+ ข้อดีคือเมื่อเพิ่ม/ลบพารามิเตอร์ไม่จำเป็นต้องเพิ่ม/ลบวงเล็บ diff สะอาดขึ้น; avoid คือละเว้นวงเล็บเมื่อมีพารามิเตอร์เดี่ยว (x => x) โค้ดกระชับขึ้น เลือกตามสไตล์ของทีม ทั้งสองสไตล์ไม่มีถูกผิด เพียงแค่ต้องเป็นหนึ่งเดียว ทราบ: พารามิเตอร์ที่มีคำอธิบายประเภท พารามิเตอร์เริ่มต้น พารามิเตอร์ดีสตรัคเชอร์จะมีวงเล็บไม่ว่าจะกำหนดค่าอย่างไร

การจัดรูปแบบสามารถแก้ไขปัญหาสไตล์ที่ ESLint ชี้ให้เห็นโดยอัตโนมัติได้หรือไม่?

เครื่องมือนี้เป็นการจัดรูปแบบสไตล์ Prettier สามารถแก้ไขได้เฉพาะปัญหาสไตล์ที่ Prettier จัดการ (การเยื้อง อัญประกาศ เซมิโคลอน คอม่าท้าย ความกว้างบรรทัด ช่องว่าง ฯลฯ) ปัญหาคุณภาพโค้ดที่ ESLint ชี้ให้เห็น (เช่น ตัวแปรที่ไม่ได้ใช้ ขาด return ปัญหา ===) เป็นปัญหาตรรกะ เครื่องมือจัดรูปแบบไม่สามารถแก้ไขอัตโนมัติได้ ต้องแก้ไขด้วยตนเอง หาก ESLint ของคุณกำหนดค่า eslint-config-prettier แล้ว หลังจากจัดรูปแบบด้วย Prettier ESLint จะไม่ให้ข้อผิดพลาดที่เกี่ยวข้องกับสไตล์ ปัญหาคุณภาพที่เหลือให้แก้ไขด้วยตนเอง

รองรับไฟล์โค้ดขนาดใหญ่สุดเท่าไหร่? การจัดรูปแบบไฟล์ใหญ่จะล่าช้าหรือไม่?

เนื่องจากการจัดรูปแบบทำงานบนเบราว์เซอร์ในเครื่อง ขนาดไฟล์ที่รองรับขึ้นอยู่กับประสิทธิภาพของอุปกรณ์ของคุณ โดยทั่วไปไฟล์ JS ขนาดหลายสิบ KB ถึงหลาย MB สามารถประมวลผลได้ตามปกติ ไฟล์ JS เดี่ยวของโปรเจกต์ทั่วไปเพียงพออย่างสมบูรณ์ หากเป็นไฟล์ JS ที่ถูกแพ็กขนาดใหญ่พิเศษ (หลายสิบ MB) อาจล่าช้าหรือหน่วยความจำไม่เพียงพอ สำหรับไฟล์ขนาดใหญ่เช่นนี้แนะนำให้ประมวลผลในเครื่องด้วยบรรทัดคำสั่ง Node.js+Prettier/Terser ในการพัฒนาประจำวัน ขนาดไฟล์ซอร์สส่วนบุคคลมักอยู่ในช่วงการประมวลผล

ทำไมเมื่อกดคีย์ลัด Ctrl+Shift+B ใน Chrome จึงเปิดตัวจัดการบุ๊กมาร์ก?

นี่คือความขัดแย้งของคีย์ลัดเริ่มต้นของเบราว์เซอร์ Chrome: Ctrl+Shift+B เป็นคีย์ลัดของ Chrome สำหรับแสดง/ซ่อนแถบบุ๊กมาร์ก คีย์ลัดของเบราว์เซอร์มีลำดับความสำคัญสูงกว่าคีย์ลัด JS บนหน้าเว็บ ดังนั้นจึงถูก Chrome ดักจับ วิธีแก้ไข: ①คลิกปุ่มจัดรูปแบบเพื่อทำงาน; ②หากคุณเป็นผู้ใช้ Mac Cmd+Shift+B จะไม่ขัดแย้งกับ Chrome; ③สามารถแก้ไขคีย์ลัดของเบราว์เซอร์ในการตั้งค่า Chrome; ④สามารถโฟกัสภายในตัวแก้ไขก่อน ในบางสถานการณ์โฟกัสของตัวแก้ไขสามารถจับคีย์ลัดได้ หากมีคีย์ลัดขัดแย้งในเบราว์เซอร์อื่นๆ ก็สามารถใช้ปุ่มทำงานได้

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

เมื่อจัดรูปแบบแสดง "ข้อผิดพลาดในการแยกวิเคราะห์ไวยากรณ์" ไม่สามารถจัดรูปแบบได้

โค้ดมีข้อผิดพลาดไวยากรณ์เอง: วงเล็บไม่ตรงกัน สตริงไม่ปิด ขาดคีย์เวิร์ด มีคอม่าเกิน ฯลฯ ข้อผิดพลาดไวยากรณ์ทำให้การแยกวิเคราะห์ AST ล้มเหลวและไม่สามารถจัดรูปแบบได้ โปรดแก้ไขข้อผิดพลาดไวยากรณ์ก่อน เลือกโหมดภาษาผิด: เช่น เลือก JavaScript สำหรับโค้ด JSX/TSX ไวยากรณ์เจนเนอริกถูกเข้าใจผิดว่าเป็นแท็ก JSX หรือในทางกลับกัน โปรดเลือกประเภทภาษาที่ถูกต้องด้วยตนเอง มีไวยากรณ์ทดลอง: โค้ดใช้ข้อเสนอไวยากรณ์ JavaScript ใหม่ล่าสุดที่ยังไม่เป็นมาตรฐาน (เช่น decorator, Pipeline operator) ตัวแยกวิเคราะห์ไม่รองรับ ไฟล์มี BOM header: สามไบต์ UTF-8 BOM (EF BB BF) ที่จุดเริ่มต้น ตัวแยกวิเคราะห์บางตัวอาจจัดการไม่ได้ ลองบันทึกเป็น UTF-8 โดยไม่มี BOM ปนโค้ดภาษาอื่น: เช่น ภาษาเทมเพลตที่ฝังใน HTML (EJS, Handlebars, คำสั่งเทมเพลต Vue) ไม่ใช่ JS/HTML บริสุทธิ์ ตัวแยกวิเคราะห์ไม่สามารถจดจำได้ มีบล็อกคอมเมนต์ที่ไม่ปิดในโค้ด: /* ไม่มี */ ที่สอดคล้องกัน คอมเมนต์ไม่ปิดทำให้โค้ดทั้งหมดหลังจากนั้นถูกมองว่าเป็นคอมเมนต์ ความกำกวมของนิพจน์ regex: บางตำแหน่งที่ดูเหมือนตัวดำเนินการหาร/ตัวดำเนินการ แต่จริงๆ แล้วเป็น regex literal ตัวแยกวิเคราะห์ตัดสินใจผิด สามารถเพิ่มเซมิโคลอนก่อน regex เพื่อกำจัดความกำกวม

เกิดข้อผิดพลาดเมื่อบีบอัด (Minify) ไม่สามารถบีบอัดได้

ข้อผิดพลาดไวยากรณ์ของโค้ด: เช่นเดียวกับการจัดรูปแบบ การบีบอัดก็อาศัย AST เช่นกัน โค้ดต้องมีไวยากรณ์ที่ถูกต้องจึงจะบีบอัดได้ แก้ไขข้อผิดพลาดไวยากรณ์ก่อน ใช้ import/export ของ ES Module แต่ไม่ได้ทำเครื่องหมายประเภทโมดูลอย่างถูกต้อง หรือการกำหนดค่าการบีบอัดไม่ตรงกับประเภทโมดูล เกิดปัญหาเมื่อ mangle ชื่อคุณสมบัติ: หากเปิดใช้ mangle ชื่อคุณสมบัติ (ปิดโดยค่าเริ่มต้น) การเข้าถึงคุณสมบัติแบบไดนามิก obj['key'] จะทำให้ไม่พบคุณสมบัติ อย่าเปิด mangle คุณสมบัติโดยไม่ระมัดระวัง โค้ดมีคำสั่ง eval() หรือ with: เมื่อ Terser พบ eval/with mangle อาจผิดพลาด เนื่องจาก eval สามารถเข้าถึงชื่อตัวแปรในสโคปแบบไดนามิก หลีกเลี่ยงการใช้ eval ในโค้ดการผลิต ข้อผิดพลาดในการกำหนดค่าชื่อที่สงวน: หากกำหนดค่า mangle.reserved แต่สะกดผิดหรือลืมชื่อที่ต้องสงวน (เช่น jQuery, $ ไลบรารีโกลบอล) อาจทำให้เกิดข้อผิดพลาดขณะรันไทม์ ปัญหาการกำหนดค่าการบีบอัด toplevel: หากโค้ดของคุณรันในสโคปโกลบอลแทนที่จะถูกแพ็กใน IIFE/โมดูล การเปิด compress.toplevel: true อาจทำลายการอ้างอิงตัวแปรโกลบอล การกำหนดค่าเวอร์ชันเบราว์เซอร์เป้าหมายเก่าเกินไป: Terser อาจใช้ไวยากรณ์ที่เบราว์เซอร์เป้าหมายไม่รองรับในระหว่างการบีบอัด สามารถกำหนดค่าเวอร์ชัน ecma เพื่อระบุเวอร์ชันไวยากรณ์ JS เอาต์พุต

เมื่อจัดรูปแบบภาษาจีน/คอมเมนต์ภาษาจีนแสดงอักขระเพี้ยน

การเข้ารหัสไฟล์ไม่ใช่ UTF-8: ไฟล์ในเครื่องที่อัปโหลดเป็นการเข้ารหัสจีน เช่น GBK/GB2312 เครื่องมือแยกวิเคราะห์ตาม UTF-8 โดยค่าเริ่มต้นทำให้อักขระเพี้ยน ใช้เอดิเตอร์บันทึกไฟล์เป็นการเข้ารหัส UTF-8 แล้วอัปโหลดใหม่ การเข้ารหัสหน้าเบราว์เซอร์ถูกแก้ไขโดยไม่ได้ตั้งใจ: แม้ว่าเบราว์เซอร์ปัจจุบันจะเป็น UTF-8 โดยค่าเริ่มต้น แต่เบราว์เซอร์เก่าหรือการตั้งค่าพิเศษบางอย่างอาจมีการเข้ารหัสไม่ถูกต้อง สามารถดูการตั้งค่าการเข้ารหัสหน้าในเมนูเบราว์เซอร์และตั้งค่าเป็น UTF-8 ไฟล์มี BOM header UTF-8: แม้ว่า BOM มักจะไม่ทำให้อักขระเพี้ยน แต่ตัวแยกวิเคราะห์บางตัวจัดการ BOM ผิดปกติ สามารถใช้เอดิเตอร์ลบ BOM แล้วบันทึกเป็น UTF-8 โดยไม่มี BOM ปัญหาการแปลงการเข้ารหัสเมื่อคัดลอกวาง: เมื่อคัดลอกโค้ดจากซอฟต์แวร์เก่าบางตัว (เช่น Notepad รุ่นเก่า, Word) อักขระพิเศษ (เช่น อัญประกาศจีน ช่องว่างเต็มความกว้าง) อาจถูกแปลงผิดพลาด พยายามคัดลอกจากเอดิเตอร์สมัยใหม่เช่น VS Code ปัญหาฟอนต์: ฟอนต์ monospace บางตัวรองรับภาษาจีนไม่ดีทำให้การแสดงผลผิดปกติ นี่ไม่ใช่ปัญหาการเข้ารหัส เพียงแค่ปัญหาฟอนต์แสดงผล เปลี่ยนฟอนต์ monospace ที่รองรับภาษาจีนก็ได้ อักขระ Unicode พิเศษ: โค้ดมีอักขระพิเศษที่มองไม่เห็น เช่น emoji, ช่องว่างความกว้างศูนย์, อักขระควบคุม อาจทำให้การแสดงผลผิดปกติหรือเกิดข้อผิดพลาดในการจัดรูปแบบ สามารถเปิดการแสดงอักขระที่มองไม่เห็นในเอดิเตอร์เพื่อดู ปัญหาการบีบอัด gzip หรือพรอกซี: หากเข้าถึงหลังจากปรับใช้แล้วมีอักขระเพี้ยน ตรวจสอบว่าเซิร์ฟเวอร์ตั้งค่าเฮดเดอร์การตอบกลับ Content-Type: application/javascript; charset=utf-8 อย่างถูกต้องหรือไม่

การจัดรูปแบบโค้ด JSX/TSX ล้มเหลวหรือมีข้อผิดพลาดในการแยกวิเคราะห์

โหมดภาษาถูกเลือกเป็น JavaScript แทนที่จะเป็น JSX/TSX: ตัวแยกวิเคราะห์ JS ทั่วไปไม่รู้จักไวยากรณ์ <แท็ก> จะแยกวิเคราะห์แท็ก JSX เป็นตัวดำเนินการเปรียบเทียบและให้ข้อผิดพลาด โปรดเลือกภาษา JSX หรือ TSX ด้วยตนเอง ความกำกวมของไวยากรณ์เจนเนอริก TSX: พารามิเตอร์เจนเนอริก <T> ใน TSX อาจถูกเข้าใจผิดว่าเป็นแท็ก JSX เช่น const f = <T>(x: T) => x สามารถเพิ่มคอม่าหลัง <T> เป็น <T,> เพื่อกำจัดความกำกวม (นี่คือรูปแบบทั่วไปของ TSX) แท็ก JSX ไม่ได้ปิด: JSX กำหนดให้แท็กทั้งหมดต้องปิดอย่างถูกต้อง แท็กปิดเองต้องมี /> ซึ่งต่างจาก HTML <img> ต้องเขียนเป็น <img/> ปัญหาวงเล็บนิพจน์ JS ใน JSX: นิพจน์ JS ภายใน {} ต้องปิดอย่างถูกต้อง หาก {obj.prop} ไม่ได้เขียน } จะทำให้การแยกวิเคราะห์หลังจากนั้นผิดเพี้ยน ปัญหาไวยากรณ์สั้น Fragment: แท็กว่าง <></> ต้องรองรับ React 16+ และต้องปิดอย่างถูกต้อง; หากใช้ <Fragment> ต้องนำเข้าอย่างถูกต้อง ปัญหาอัญประกาศค่าแอตทริบิวต์ JSX: ค่าแอตทริบิวต์ JSX หากเป็นสตริงต้องมีอัญประกาศ (อัญประกาศคู่) หากเป็นนิพจน์ให้ใช้ {} อย่าผสมกัน นามสกุลไฟล์ TSX เป็น .ts แทนที่จะเป็น .tsx: ตัวแยกวิเคราะห์ TypeScript จะเปิดใช้การแยกวิเคราะห์ JSX เฉพาะกับนามสกุล .tsx เท่านั้น หากเขียน JSX ด้วยนามสกุล .ts จะมีข้อผิดพลาด โปรดใช้นามสกุลที่ถูกต้อง

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

การกำหนดค่า tabWidth ไม่ถูกต้อง: ตรวจสอบว่าการกำหนดค่าความกว้างเยื้องเป็น 2 หรือ 4 ทีมมักใช้ 2 ช่องว่าง หากคาดหวัง 4 ช่องว่างต้องปรับตัวเลือก tabWidth ด้วยตนเอง การกำหนดค่า useTabs ไม่ถูกต้อง: หากทีมใช้การเยื้อง Tab แต่คุณกำหนดค่าเป็นช่องว่าง หรือในทางกลับกัน ตรวจสอบว่าตัวเลือก useTabs ถูกต้องหรือไม่ โค้ดมีข้อผิดพลาดไวยากรณ์เอง: ข้อผิดพลาดไวยากรณ์ทำให้โครงสร้าง AST ผิดปกติ เมื่อจัดรูปแบบการเยื้องจะยุ่งเหยิง แก้ไขข้อผิดพลาดไวยากรณ์ที่ระบุด้วยเส้นหยักสีแดงก่อน ผสมการใช้ Tab และช่องว่าง: ในโค้ดเดิมบางตำแหน่งใช้การเยื้อง Tab บางตำแหน่งใช้ช่องว่าง การจัดรูปแบบจะรวมเป็นสไตล์ที่กำหนดค่าไว้ แต่หากโค้ดเดิมยุ่งเหยิงมากอาจต้องจัดรูปแบบหลายครั้ง การตั้งค่า printWidth เล็กเกินไป: หากตั้งค่าความกว้างบรรทัดเล็กเกินไป (เช่น 40) โค้ดจะขึ้นบรรทัดใหม่บ่อยครั้งทำให้การเยื้องดูยุ่งเหยิง ตั้งค่าเป็น 80 หรือ 100 จะเหมาะสมกว่า การกำหนดค่าตัวเลือกการจัดเรียง เช่น bracketSameLine/arrowParens ไม่สอดคล้องกับที่คาดหวัง: สไตล์ของตำแหน่งวงเล็บปีกกา วงเล็บฟังก์ชันลูกศร ฯลฯ ถูกกำหนดโดยการกำหนดค่า ไม่ใช่ปัญหาการเยื้อง ปรับตัวเลือกที่เกี่ยวข้องก็ได้ การตั้งค่า EditorConfig ขัดแย้งกับเอดิเตอร์ในเครื่อง: หากเอดิเตอร์ในเครื่องใช้ .editorconfig เพื่อตั้งค่าการเยื้องอัตโนมัติ ซึ่งแตกต่างจากตัวเลือกที่กำหนดค่าบนหน้าเว็บ ผลลัพธ์การจัดรูปแบบทั้งสองด้านจะไม่สอดคล้องกัน รวมการกำหนดค่าก็ได้

คีย์ลัดไม่ทำงาน กดแล้วไม่มีอะไรเกิดขึ้น

โฟกัสไม่ได้อยู่บนตัวแก้ไข: คีย์ลัดจะมีผลเฉพาะเมื่อตัวแก้ไขได้รับโฟกัสเท่านั้น หากโฟกัสอยู่ที่ปุ่ม ช่องป้อนข้อมูล หรือตำแหน่งอื่นของหน้า คีย์ลัดจะไม่ทำงาน คลิกที่พื้นที่ตัวแก้ไขเพื่อโฟกัสก่อน คีย์ลัดเบราว์เซอร์ขัดแย้ง: คีย์ลัดบางตัว (เช่น Ctrl+Shift+B ใน Chrome เปิดแถบบุ๊กมาร์ก, Ctrl+Shift+O ใน Firefox เปิดประวัติ) ถูกเบราว์เซอร์ยึดไว้ สามารถคลิกปุ่มเพื่อทำงาน หรือใช้ Cmd แทน Ctrl (Mac) ลองดู ปัญหาวิธีป้อนข้อมูล: ในสถานะวิธีป้อนข้อมูลภาษาจีน คีย์ลัดบางตัวอาจถูกดักจับ สลับไปที่วิธีป้อนข้อมูลภาษาอังกฤษแล้วลองคีย์ลัดอีกครั้ง ส่วนขยาย/ปลั๊กอินอื่นยึดไว้: ส่วนขยายคีย์ลัด สคริปต์ Tampermonkey ปลั๊กอินพรอกซีที่ติดตั้งในเบราว์เซอร์อาจยึดคีย์ลัดไว้ ลองเปิดหน้าในโหมดไม่ระบุตัวตน คีย์ลัดระบบขัดแย้ง: คีย์ลัดสากลของระบบปฏิบัติการหรือซอฟต์แวร์อื่นที่กำลังทำงาน (เช่น ซอฟต์แวร์จับภาพหน้าจอ วิธีป้อนข้อมูล IDE) ยึดชุดคีย์ที่เกี่ยวข้องไว้ สามารถแก้ไขคีย์ลัดของซอฟต์แวร์อื่นหรือใช้ปุ่มของเครื่องมือนี้เพื่อทำงาน ความแตกต่างของแป้นพิมพ์ Mac/Windows: ทราบว่า Mac ใช้แป้น Cmd (⌘) Windows/Linux ใช้แป้น Ctrl อย่าผสมกัน; Option บน Mac สอดคล้องกับ Alt บน Windows ข้อจำกัดความปลอดภัยของเบราว์เซอร์: คีย์ลัดบางตัวที่เกี่ยวข้องกับการเข้าถึงไฟล์อาจถูกจำกัดโดยนโยบายความปลอดภัยของเบราว์เซอร์ ไม่สามารถจำลองผ่าน JS ได้อย่างสมบูรณ์ หากจำเป็นให้คลิกปุ่มที่เกี่ยวข้องโดยตรงเพื่อทำงาน

อภิธานศัพท์

Prettier: เครื่องมือจัดรูปแบบโค้ดฟรอนต์เอนด์ที่ได้รับความนิยมมากที่สุดในปัจจุบัน ใช้ปรัชญาการออกแบบ Opinionated รองรับหลายภาษา เช่น JS/TS/CSS/HTML/Markdown บังคับให้สไตล์โค้ดเป็นหนึ่งเดียว จบการถกเถียงเรื่องสไตล์ในทีม
Terser: เครื่องมือบีบอัด JavaScript สมัยใหม่ เป็น branch ของ UglifyJS ที่เข้ากันได้กับ ES6+ รองรับการบีบอัด-ทำให้งงงวยไวยากรณ์ ES6+ เป็นคอมเพรสเซอร์เริ่มต้นของเครื่องมือสร้างสมัยใหม่ เช่น Webpack, Rollup, Vite
UglifyJS: เครื่องมือบีบอัด JavaScript คลาสสิก เป็นรุ่นก่อนของ Terser แต่รองรับเฉพาะไวยากรณ์ ES5 และก่อนหน้า ไม่รองรับฟีเจอร์ใหม่ ES6+ ปัจจุบันโปรเจกต์ใหม่มักใช้ Terser แทน
AST (Abstract Syntax Tree): แผนผังไวยากรณ์นามธรรม การแสดงผลรูปแบบต้นไม้ของโครงสร้างไวยากรณ์ซอร์สโค้ด แต่ละโหนดแสดงโครงสร้างไวยากรณ์หนึ่งในโค้ด เครื่องมือเช่น Babel, Prettier, Terser, ESLint ล้วนทำงานบนพื้นฐานของ AST
ESLint: เครื่องมือตรวจสอบโค้ด (Linter) ที่ได้รับความนิยมมากที่สุดในระบบนิเวศ JavaScript/TypeScript ใช้เพื่อค้นหาปัญหาคุณภาพโค้ดและรวมสไตล์โค้ดให้เป็นหนึ่งเดียว สามารถใช้ร่วมกับ Prettier ได้
EditorConfig: ไฟล์คอนฟิกสำหรับรวมสไตล์โค้ดข้ามเอดิเตอร์/IDE กำหนดการตั้งค่าพื้นฐาน เช่น สไตล์การเยื้อง ขนาดการเยื้อง ประเภทตัวแบ่งบรรทัด การเข้ารหัสไฟล์ การขึ้นบรรทัดสุดท้าย เพื่อให้เอดิเตอร์ต่างๆ แสดงผลเหมือนกันเมื่อเปิดโปรเจกต์เดียวกัน
CodeMirror: คอมโพเนนต์ตัวแก้ไขโค้ดบนเบราว์เซอร์ ให้ฟีเจอร์การแก้ไขระดับมืออาชีพ เช่น เน้นไวยากรณ์ หมายเลขบรรทัด จับคู่วงเล็บ พับโค้ด หลายเคอร์เซอร์ เป็นหนึ่งในตัวเลือกหลักสำหรับตัวแก้ไขโค้ดบนเว็บ
minify (บีบอัด): กระบวนการลดขนาดโค้ดให้เล็กที่สุดโดยไม่เปลี่ยนตรรกะของโค้ด ผ่านการลบช่องว่าง คอมเมนต์ ย่อชื่อตัวแปร การเพิ่มประสิทธิภาพโค้ด ฯลฯ ใช้เพื่อเพิ่มความเร็วในการโหลดในสภาพแวดล้อมการผลิต
mangle (ทำให้งงงวย/ทำลาย): ขั้นตอนในการย่อชื่อตัวแปร ชื่อฟังก์ชัน ชื่อพารามิเตอร์เป็นอักขระเดี่ยวในระหว่างการบีบอัด ลดขนาดโค้ดอย่างมากในขณะเดียวกันก็ทำให้โค้ดอ่านยากขึ้น เรียกว่าการทำให้ชื่อตัวแปรงงงวย
beautify (จัดแต่ง): คือการจัดรูปแบบโค้ด จัดเรียงโค้ดที่ถูกบีบอัดหรือยุ่งเหยิงใหม่ด้วยการเยื้อง ขึ้นบรรทัดใหม่ เพิ่มช่องว่าง เพิ่มความสามารถในการอ่าน ตรงข้ามกับ minify
trailing comma (คอม่าท้าย): คอม่าที่อยู่หลังองค์ประกอบสุดท้ายของอ็อบเจกต์ อาร์เรย์ พารามิเตอร์ฟังก์ชัน ช่วยให้ Git diff สะอาดขึ้นเมื่อเพิ่มองค์ประกอบใหม่ รองรับในสภาพแวดล้อม ES5+
arrow parens (วงเล็บฟังก์ชันลูกศร): พารามิเตอร์ของฟังก์ชันลูกศรที่มีพารามิเตอร์เดี่ยวต้องหุ้มด้วยวงเล็บหรือไม่ เช่น x => x (ไม่มีวงเล็บ) เทียบกับ (x) => x (มีวงเล็บ)
printWidth (ความกว้างบรรทัด): ในระหว่างการจัดรูปแบบ แต่ละบรรทัดจะขึ้นบรรทัดใหม่อัตโนมัติเมื่อเกินจำนวนอักขระเท่าใด ค่าเริ่มต้นของ Prettier คือ 80 อักขระ ทีมสามารถปรับเป็น 100 หรือ 120 ตามขนาดจอภาพ
semicolons (เซมิโคลอน): จะเพิ่มเซมิโคลอนที่ท้ายคำสั่ง JavaScript หรือไม่ JS มีกลไก ASI แทรกเซมิโคลอนอัตโนมัติ แต่ในสถานการณ์ส่วนใหญ่ยังแนะนำให้เพิ่มเซมิโคลอนเพื่อหลีกเลี่ยงข้อผิดพลาด
single quote (อัญประกาศเดี่ยว): ใช้อัญประกาศเดี่ยวหรืออัญประกาศคู่สำหรับสตริง ใน JS ฟังก์ชันทำงานเทียบเท่ากันอย่างสมบูรณ์ เป็นเพียงความชอบสไตล์ ข้อกำหนด JSON บังคับใช้อัญประกาศคู่
double quote (อัญประกาศคู่): หุ้มสตริงด้วยอัญประกาศคู่ เป็นสไตล์เริ่มต้นของหลายภาษา และเป็นรูปแบบสตริงที่ข้อกำหนด JSON ต้องการ
tab width (ความกว้างเยื้อง): จำนวนช่องว่างที่สอดคล้องกับแต่ละระดับการเยื้อง ชุมชนฟรอนต์เอนด์มักใช้ 2 ช่องว่าง ภาษาแบ็กเอนด์มักใช้ 4 ช่องว่าง
BOM (Byte Order Mark): เครื่องหมายลำดับไบต์ สามไบต์ EF BB BF ที่อาจปรากฏที่จุดเริ่มต้นของไฟล์เข้ารหัส UTF-8 ใช้เพื่อทำเครื่องหมายการเข้ารหัส อาจทำให้เกิดข้อผิดพลาดในการแยกวิเคราะห์ JS ในบางสถานการณ์
UTF-8: Unicode Transformation Format 8-bit ปัจจุบันเป็นการเข้ารหัสไฟล์มาตรฐานของเว็บและโปรเจกต์ฟรอนต์เอนด์ รองรับอักขระ Unicode ทั้งหมด เป็นการเข้ารหัสที่แนะนำเป็นค่าเริ่มต้น
source map (แผนที่ซอร์ส): ไฟล์ที่แมปโค้ดที่ถูกบีบอัด/แปลงกลับไปยังตำแหน่งซอร์สโค้ดเดิม ใช้สำหรับการดีบักในสภาพแวดล้อมการผลิต เมื่อโค้ดที่ถูกบีบอัดมีข้อผิดพลาดสามารถค้นหาหมายเลขบรรทัดซอร์สโค้ดได้

ตารางตัวเลือกการตั้งค่าทั่วไปของ Prettier

ชื่อตัวเลือก	หน้าที่	ค่าที่เลือกได้	ค่าเริ่มต้น	คำอธิบาย
tabWidth	ความกว้างการเยื้อง (จำนวนช่องว่าง)	`2, 4, 8`	`2`	มีผลเมื่อ useTabs เป็น false ฟรอนต์เอนด์นิยม 2 ช่องว่าง
useTabs	เยื้องด้วยอักขระ Tab	`true/false`	`false`	true เยื้องด้วย Tab, false เยื้องด้วยช่องว่าง
printWidth	ขีดจำกัดความกว้างบรรทัด (จำนวนตัวอักษร)	`80, 100, 120`	`80`	เกินความกว้างจะขึ้นบรรทัดใหม่อัตโนมัติ ไม่ใช่ขีดจำกัดที่เข้มงวด
semi	ใส่เซมิโคลอนท้ายคำสั่ง	`true/false`	`true`	เมื่อ false จะใส่เซมิโคลอนเฉพาะที่ ASI อาจล้มเหลว
singleQuote	ใช้ single quote	`true/false`	`false`	true single quote, false double quote, แอตทริบิวต์ JSX ใช้ double quote เสมอ
trailingComma	โหมดคอมม่าท้าย	`none, es5, all`	`all (v3+)`	none ไม่มีคอมม่าท้าย, es5 ใส่ที่ object/array, all ใส่ที่พารามิเตอร์ฟังก์ชันด้วย
arrowParens	วงเล็บพารามิเตอร์เดี่ยวฟังก์ชันลูกศร	`avoid, always`	`always (v2+)`	avoid ละเว้นวงเล็บพารามิเตอร์เดี่ยว, always ใส่วงเล็บเสมอ
bracketSpacing	ช่องว่างภายในวงเล็บปีกกา object	`true/false`	`true`	true: { a: 1 }, false: {a: 1}
bracketSameLine	ตำแหน่งวงเล็บปิด HTML/JSX	`true/false`	`false`	true วงเล็บปิดที่ท้ายบรรทัดสุดท้าย, false บนบรรทัดแยก
vueIndentScriptAndStyle	การเยื้อง script/style ไฟล์ Vue	`true/false`	`false`	ต้องเยื้องโค้ดภายในแท็ก script และ style ใน Vue SFC หรือไม่

การปรับแต่งทั่วไปและผลกระทบของการบีบอัด/ออฟัสเคต JS

ประเภทการปรับแต่ง	โค้ด (ก่อนบีบอัด)	โค้ด (หลังบีบอัด)	การลดลงโดยประมาณ
ช่องว่างและการขึ้นบรรทัดใหม่	`function add(a, b) { return a + b; }`	`function add(n,d){return n+d}`	~60%
การลบคอมเมนต์	`// 计算两数之和 function add(a,b){return a+b}`	`function add(n,d){return n+d}`	~20%
mangle ตัวแปรโลคัล	`function calculateTotal(price, quantity){const tax=0.1;return pricequantity(1+tax)}`	`function n(n,t){const e=0.1;return nt(1+e)}`	~40%
คงที่พับ	`const x = 2 * 3 + 4; console.log(x);`	`console.log(10);`	~50%
การลดรูปบูลีน	`if (x === true) { doThing(); }`	`if(x)doThing();`	~30%
ตัวอย่างสมบูรณ์ (รวมการปรับแต่งหลายอย่าง)	`function getFullName(user) { const firstName = user.firstName; const lastName = user.lastName; return firstName + ' ' + lastName; }`	`function n(n){return n.firstName+' '+n.lastName}`	~70%

ตารางอ้างอิงคีย์ลัดเอดิเตอร์ (Windows/Linux / Mac)

Windows/Linux	macOS	หน้าที่	คำแนะนำ
`Ctrl+Shift+B`	`Cmd+Shift+B`	ฟอร์แมต/บิวติฟาย	★★★★★
`Ctrl+Shift+M`	`Cmd+Shift+M`	สลับโหมดฟอร์แมต/บีบอัด	★★★★
`Ctrl+Shift+O`	`Cmd+Shift+O`	เปิดไฟล์ในเครื่อง	★★★★
`Ctrl+Shift+D`	`Cmd+Shift+D`	ดาวน์โหลดไฟล์ที่ประมวลผลแล้ว	★★★★★
`Ctrl+Shift+K`	`Cmd+Shift+K`	ล้างเนื้อหาเอดิเตอร์	★★★
`Ctrl+S`	`Cmd+S`	ดาวน์โหลด (บันทึก) ไฟล์	★★★★
`Ctrl+F / Ctrl+H`	`Cmd+F / Cmd+H`	ค้นหา / ค้นหาและแทนที่	★★★★
`Ctrl+Z / Ctrl+Y`	`Cmd+Z / Cmd+Shift+Z`	เลิกทำ / ทำซ้ำ	★★★★★
`Ctrl+/`	`Cmd+/`	สลัดคอมเมนต์บรรทัด	★★★
`Tab / Shift+Tab`	`Tab / Shift+Tab`	เพิ่มการเยื้อง / ลดการเยื้อง (เมื่อเลือก)	★★★★
`Alt+คลิก`	`Option+คลิก`	เพิ่มมัลติเคอร์เซอร์	★★★
`Ctrl+D`	`Cmd+D`	เลือกคำถัดไปที่เหมือนกัน	★★★
`Home / End`	`Cmd+← / Cmd+→`	ต้นบรรทัด / ท้ายบรรทัด	★★★★
`Ctrl+Home/End`	`Cmd+↑ / Cmd+↓`	จุดเริ่มต้นไฟล์ / จุดสิ้นสุดไฟล์	★★★