ความแตกต่างระหว่าง ESLint และ Prettier 🛠️✨

ESLint และ Prettier เป็นเครื่องมือที่ช่วยเพิ่มคุณภาพของโค้ด แต่ทั้งสองมีจุดประสงค์และการใช้งานที่แตกต่างกัน 📌 การเข้าใจความแตกต่างจะช่วยให้คุณเลือกใช้เครื่องมือที่เหมาะสมกับความต้องการของโปรเจกต์ได้ดียิ่งขึ้น 🚀

---

🎯 เป้าหมายของเครื่องมือ

ESLint 🔍

• ตรวจจับและแก้ไขข้อผิดพลาดในโค้ด:
  • เช่น การใช้ตัวแปรที่ไม่ได้ใช้งาน (unused variables), Syntax Error, Logic Error.
• บังคับใช้ Coding Standards:
  • เช่น การเว้นวรรค, การใช้ตัวอักษรตัวพิมพ์เล็ก/ใหญ่, หรือรูปแบบ Import.
• ใช้เพื่อ Linting (ตรวจสอบคุณภาพโค้ด).

Prettier ✨

• จัดรูปแบบโค้ดอัตโนมัติ:
  • ช่วยทำให้โค้ดดูสะอาด อ่านง่าย และมีความสม่ำเสมอ.
• โฟกัสไปที่ Formatting (การจัดฟอร์แมต) เท่านั้น.
• ไม่ตรวจจับข้อผิดพลาดหรือปัญหาในโค้ด.

---

📌 การทำงาน

---

✨ การใช้ร่วมกัน: ESLint + Prettier

ทั้งสองเครื่องมือสามารถทำงานร่วมกันได้อย่างมีประสิทธิภาพ 💪

ทำไมควรใช้ร่วมกัน?

• ESLint ดูแลเรื่องคุณภาพและข้อผิดพลาดของโค้ด.
• Prettier ดูแลเรื่องการจัดฟอร์แมตโค้ด.

วิธีตั้งค่าให้ใช้งานร่วมกัน

1. ติดตั้ง Plugin สำหรับ ESLint:

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

2. ปรับแต่งไฟล์ .eslintrc.json:

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

3. สร้างไฟล์ .prettierrc สำหรับตั้งค่าการจัดฟอร์แมตโค้ด:

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

4. ใช้คำสั่งรันทั้งสองเครื่องมือ:

   npx eslint . --fix && npx prettier --write .

---

🖼️ สรุป (Visual Guide)

ESLint vs Prettier

• ESLint:

  • ช่วยตรวจสอบและแก้ไขปัญหาในโค้ด.
  • เหมาะสำหรับการตั้ง Coding Standards.

• Prettier:

  • จัดโค้ดให้อ่านง่ายและสม่ำเสมอ.
  • โฟกัสที่ความสะอาดของฟอร์แมตโค้ด.

การทำงานร่วมกัน:

1. 🔍 ESLint ตรวจสอบข้อผิดพลาด.
2. ✨ Prettier จัดรูปแบบโค้ด.
3. 💪 ใช้คู่กันเพื่อได้โค้ดที่สะอาดและมีคุณภาพสูงสุด.

---

💡 Tip: ใช้ ESLint และ Prettier เพื่อเพิ่มความเร็วและคุณภาพในการพัฒนาโค้ดของคุณ! 😊