Prettier คืออะไร? ✨

Prettier เป็นเครื่องมือจัดรูปแบบโค้ด (Code Formatter) แบบอัตโนมัติที่รองรับหลากหลายภาษา เช่น JavaScript, TypeScript, HTML, CSS, JSON และอื่น ๆ 🖋️ จุดเด่นของมันคือช่วยให้โค้ดมีความสม่ำเสมอและอ่านง่าย โดยไม่ต้องเสียเวลาในการจัดโครงสร้างเอง!

📌 คุณสมบัติของ Prettier

1. จัดรูปแบบโค้ดอัตโนมัติ ⚙️

• Prettier จะจัดรูปแบบโค้ดให้อ่านง่ายขึ้น เช่น การเว้นวรรค, การเรียงบรรทัดใหม่ หรือการจัดฟอร์แมต JSON.

2. รองรับหลายภาษา 🌍

• ไม่ได้รองรับแค่ JavaScript/TypeScript แต่ยังรวมถึงภาษาอื่น ๆ เช่น:
  • HTML, CSS, SCSS
  • JSON, YAML
  • Markdown และ MDX

3. ลดการถกเถียงเรื่องสไตล์ในทีม 🤝

• เมื่อใช้ Prettier ทุกคนจะมีโค้ดที่มีรูปแบบเดียวกัน ลดความขัดแย้งเรื่องการจัดฟอร์แมต.

4. ผสานรวมกับ Editor และ Git Hooks ได้ง่าย 🚀

• รองรับ IDE/Editors เช่น VS Code, WebStorm, Vim.
• สามารถตั้งค่าให้ Prettier รันอัตโนมัติเมื่อเซฟไฟล์ หรือเมื่อ Commit โค้ด.

🎯 ตัวอย่างการใช้งาน Prettier

1️⃣ ติดตั้ง Prettier

npm install --save-dev prettier

2️⃣ รันคำสั่งจัดฟอร์แมตโค้ด

จัดโค้ดในไฟล์เดี่ยว:

npx prettier --write yourfile.js

จัดโค้ดทั้งโปรเจกต์:

npx prettier --write .

3️⃣ เพิ่มไฟล์ตั้งค่า .prettierrc

ตัวอย่างไฟล์ .prettierrc:

{
  "semi": true,
  "singleQuote": true,
  "tabWidth": 2,
  "trailingComma": "es5"
}

4️⃣ ใช้ร่วมกับ Git Hooks

ใช้ Prettier กับ husky เพื่อจัดโค้ดก่อน Commit:

npx husky add .husky/pre-commit "npx prettier --write ."

⚙️ การตั้งค่าเพิ่มเติม

ตัวอย่าง .prettierignore

ไฟล์นี้ใช้เพื่อบอก Prettier ไม่ให้จัดฟอร์แมตไฟล์หรือโฟลเดอร์บางส่วน:

node_modules/
build/
package-lock.json

ใช้ร่วมกับ ESLint 🛠️

Prettier และ ESLint สามารถใช้งานร่วมกันได้:

• ติดตั้ง Plugin:

  npm install --save-dev eslint-config-prettier

• เพิ่มในไฟล์ .eslintrc.json:

  {
    "extends": ["eslint:recommended", "plugin:react/recommended", "prettier"]
  }

🎉 ทำไมควรใช้ Prettier?

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

🌟 การทำงานของ Prettier (Visual Guide)

ขั้นตอนหลัก:

1. 🔍 อ่านไฟล์โค้ดของคุณ.
2. ⚙️ วิเคราะห์และจัดฟอร์แมต ตามกฎที่ตั้งไว้.
3. ✨ บันทึกไฟล์ใหม่ ด้วยฟอร์แมตที่สะอาดและสม่ำเสมอ.

Tip 💡: หากใช้ร่วมกับ ESLint และ Editor Plugins เช่น VS Code คุณจะสามารถเพิ่มประสิทธิภาพในการพัฒนาได้อย่างมาก! 😊