Prettier คืออะไร

Prettier คือเครื่องมือจัดรูปแบบโค้ด (Code Formatter) ที่เน้นการบังคับใช้สไตล์ที่สม่ำเสมอโดยการวิเคราะห์โค้ดและจัดรูปแบบใหม่ทั้งหมดตามกฎของตัวเอง ต่างจาก Linter ทั่วไปที่เน้นตรวจหาข้อผิดพลาด Prettier จะละทิ้งสไตล์เดิมและจัดรูปแบบใหม่เพื่อให้โค้ดมีความเป็นมาตรฐานเดียวกันโดยไม่คำนึงถึงสไตล์ของผู้เขียนเดิม รองรับระบบนิเวศที่หลากหลาย เช่น JavaScript, TypeScript, CSS, HTML และ GraphQL การทำงานแบบอัตโนมัตินี้ช่วยลดปัญหาการถกเถียงเรื่องสไตล์ในระหว่างการทำ Code Review ทำให้เหล่านักพัฒนาสามารถโฟกัสที่ตรรกะของโปรแกรมแทนที่จะเป็นเรื่องการเว้นวรรคหรือตำแหน่งเซมิโคลอน ถือเป็นมาตรฐานอุตสาหกรรมสำหรับการดูแลรักษา Repository ขนาดใหญ่ที่มีผู้ร่วมพัฒนาหลายคน

คุณสมบัติหลักของ Prettier

กลไกการจัดรูปแบบที่ชัดเจน

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

รองรับหลายภาษา

นอกจาก JavaScript และ TypeScript แล้ว Prettier ยังรองรับ CSS, HTML, JSON, Markdown, YAML และ GraphQL เครื่องมือแบบครบวงจรนี้ทำให้นักพัฒนาไม่ต้องใช้ตัวจัดรูปแบบแยกต่างหากสำหรับไฟล์แต่ละประเภท โดยสามารถจัดการการซ้อนทับที่ซับซ้อนในภาษาอย่าง SCSS หรือ MDX ได้อย่างสม่ำเสมอ

การเชื่อมต่อกับ IDE

Prettier มีปลั๊กอินระดับเฟิร์สคลาสสำหรับ VS Code, WebStorm, Vim และ Emacs โดยการเชื่อมต่อกับฟีเจอร์ 'Format on Save' ของโปรแกรมแก้ไขโค้ด ทำให้ได้รับผลลัพธ์ทันที การเชื่อมต่อที่แน่นแฟ้นนี้ช่วยให้มั่นใจว่าโค้ดถูกจัดรูปแบบก่อนที่จะถูก Commit ลงในระบบควบคุมเวอร์ชัน ป้องกันปัญหา Diffs ที่ยุ่งเหยิงและรักษาประวัติ Git ให้สะอาด

ค่าเริ่มต้นแบบ Zero-Config

Prettier มาพร้อมกับค่าเริ่มต้นที่เหมาะสมสำหรับ 95% ของโปรเจกต์ แม้จะอนุญาตให้ปรับแต่งได้เล็กน้อย (เช่น ความกว้างของ Tab หรือการใช้เซมิโคลอน) แต่ก็จำกัดตัวเลือกไว้เพื่อป้องกันความซับซ้อนเกินจำเป็น ปรัชญานี้บังคับให้ทีมยอมรับมาตรฐานเดียวกัน ลดวงจรการปรับแต่งที่สิ้นเปลืองซึ่งมักพบในกฎของ ESLint

การบังคับใช้ใน CI/CD Pipeline

ด้วยการรัน `prettier --check` ใน CI pipeline ทีมสามารถปฏิเสธ Pull Request ที่มีโค้ดไม่ได้จัดรูปแบบโดยอัตโนมัติ กลไกนี้ทำหน้าที่เป็นตัวคัดกรองเพื่อให้มั่นใจว่าไม่มีนักพัฒนาคนใดข้ามมาตรฐานของทีมได้ โดยรักษาความสอดคล้อง 100% ทั่วทั้ง Repository โดยไม่ต้องใช้แรงงานคน

วิธีใช้ Prettier

ติดตั้งแพ็กเกจในโปรเจกต์ผ่าน npm: npm install --save-dev --save-exact prettier, 2. สร้างไฟล์คอนฟิกเปล่าเพื่อระบุการใช้งาน: echo {}> .prettierrc.json, 3. สร้างไฟล์ .prettierignore เพื่อยกเว้นไฟล์ที่ไม่ต้องการ เช่น dist, coverage และ node_modules, 4. เพิ่มสคริปต์ format ใน package.json: "format": "prettier --write \"src/**/*.js\"", 5. เชื่อมต่อกับ IDE (VS Code, WebStorm) โดยติดตั้งส่วนขยาย Prettier อย่างเป็นทางการและเปิดใช้งาน 'Format on Save', 6. รันคำสั่ง npm run format เพื่อจัดรูปแบบโค้ดทั้งโปรเจกต์ในครั้งเดียว

กรณีการใช้งานของ Prettier

การสร้างมาตรฐานสำหรับทีมขนาดใหญ่

ในทีมระดับองค์กร นักพัฒนามักมีสไตล์การเขียนโค้ดที่ขัดแย้งกัน การใช้ Prettier ช่วยขจัดความคิดเห็นเรื่องสไตล์ออกจาก Code Review ทำให้วิศวกรอาวุโสสามารถโฟกัสที่ตรรกะทางสถาปัตยกรรมแทนที่จะเป็นเรื่องไวยากรณ์ ซึ่งช่วยเพิ่มความเร็วในกระบวนการตรวจสอบ PR อย่างมีนัยสำคัญ

การทำ Refactor โค้ดเก่าโดยอัตโนมัติ

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

การทำเอกสาร Markdown

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

ใครที่ได้ประโยชน์จาก Prettier

นักพัฒนา Frontend

ผู้ที่จัดการ Stack ของ JS/TS/CSS ที่ซับซ้อนและต้องการให้โค้ดมีความอ่านง่ายและสม่ำเสมอในแอปพลิเคชันขนาดใหญ่ เพื่อลดอุปสรรคในการทำงานร่วมกัน

ผู้ดูแลโปรเจกต์ Open Source

ผู้ที่ได้รับ Contribution จากนักพัฒนาที่มีทักษะและสไตล์ที่หลากหลาย Prettier ทำหน้าที่เป็นตัวคัดกรองอัตโนมัติเพื่อให้มั่นใจว่าโค้ดที่ส่งเข้ามาทั้งหมดตรงตามมาตรฐานของโปรเจกต์

วิศวกร DevOps

ผู้ที่ดูแล CI/CD pipelines และต้องการเครื่องมืออัตโนมัติเพื่อบังคับใช้มาตรฐานคุณภาพโค้ด เพื่อให้มั่นใจว่าเฉพาะโค้ดที่จัดรูปแบบถูกต้องเท่านั้นที่จะถูกรวมเข้าสู่ Production branch

ราคา Prettier

เป็นโปรเจกต์ Open Source ภายใต้ใบอนุญาต MIT ใช้งาน แจกจ่าย และแก้ไขได้ฟรีโดยสมบูรณ์ ทั้งสำหรับโปรเจกต์ส่วนตัวและเชิงพาณิชย์

เครื่องมืออื่น ๆ ที่คล้ายกับ Prettier