ESLint + กฎ React และการผสาน Prettier
ตั้งค่า ESLint ด้วยกฎ React และผสาน Prettier เพื่อจัดรูปแบบให้สม่ำเสมอ เรียกใช้คำสั่งตรวจสอบและแก้ไข
ESLint + กฎ React และการผสาน Prettier เป็นบทเรียน React Academy ฟรีบน CoddyKit นี่คือบทเรียนที่ 1 จากทั้งหมด 3 บทเรียน คุณสามารถอ่านบทเรียนทั้งหมดด้านล่างฟรี — จากนั้นลองปฏิบัติด้วยตัวคุณเองในเบราว์เซอร์พร้อมตัวแก้ไขโค้ดในตัวและติวเตอร์ AI ตลอด 24/7 บทเรียนนี้เป็นส่วนหนึ่งของเส้นทางการเรียน React Academy และความก้าวหน้าของคุณจะซิงค์ข้ามเว็บและแอป CoddyKit คอร์ส React Academy มีบทเรียนทั้งหมด 3 บทเรียน
เหตุผลที่ใช้ ESLint + Prettier
เป้าหมาย: ตรวจพบปัญหาโค้ดด้วย ESLint และรักษารูปแบบให้สอดคล้องกันด้วย Prettier
- ESLint: กฎ ปลั๊กอิน และการแก้ไข
- Prettier: เครื่องมือจัดรูปแบบที่มีแนวทางชัดเจน
- เรียกใช้ในระหว่างการพัฒนาและ CI
ติดตั้งและเพิ่มปลั๊กอิน
- ESLint: eslint, @typescript-eslint/* (หากใช้ TS), eslint-plugin-react, eslint-plugin-react-hooks
- Prettier: prettier, eslint-config-prettier
- สคริปต์: "lint", "lint:fix", "format"
สาธิต: ผลลัพธ์การตรวจโค้ดและการแก้ไข
ESLint ระบุปัญหา ส่วน Prettier แก้ไขรูปแบบ เปรียบเทียบโค้ดที่ไม่ดีกับโค้ดที่ดี และดูผลลัพธ์ตัวอย่าง
<div id="root"></div>
สาธิต: จำลองการจัดรูปแบบด้วย Prettier
สลับเพื่อจำลองการเรียกใช้ Prettier แล้วโค้ดจะได้รับการจัดรูปแบบอย่างสอดคล้องกัน
<div id="root"></div>
เคล็ดลับและสคริปต์แพ็กเกจ
- สคริปต์: "lint", "lint:fix", "format"
- ใช้ eslint-config-prettier เพื่อปิดใช้กฎด้านรูปแบบ
- เปิดใช้กฎ react-hooks: exhaustive-deps และ rules-of-hooks
กฎ React ที่ควรรู้
กฎ React:
- react/jsx-key — เพิ่ม คีย์ในรายการ
- react-hooks/rules-of-hooks — เรียกใช้ฮุกเฉพาะในระดับบนสุด
- react-hooks/exhaustive-deps — รักษารายการการพึ่งพาของเอฟเฟกต์ให้ถูกต้อง
บทบาทของ ESLint เทียบกับ Prettier
ทบทวน
ทบทวน: ESLint ค้นหาปัญหา ส่วน Prettier จัดรูปแบบ เพิ่มปลั๊กอิน React และกฎฮุก แล้วเชื่อมสคริปต์สำหรับตรวจโค้ด แก้ไข และจัดรูปแบบ
คำถามที่พบบ่อย
บทเรียน “ESLint + กฎ React และการผสาน Prettier” ฟรีหรือไม่
ใช่ — ข้อความเต็มของ “ESLint + กฎ React และการผสาน Prettier” ฟรีให้อ่านที่นี่บนเว็บ เพื่อปฏิบัติแบบโต้ตอบ (ตัวแก้ไขโค้ดในตัวและติวเตอร์ AI ตลอด 24/7) และปลดล็อคส่วนที่เหลือของคอร์ส React Academy ให้อัปเกรดเป็น CoddyKit PRO คอร์ส React Academy มีบทเรียนทั้งหมด 3 บทเรียน
คุณจะเรียนรู้อะไรในบทเรียน “ESLint + กฎ React และการผสาน Prettier”
ตั้งค่า ESLint ด้วยกฎ React และผสาน Prettier เพื่อจัดรูปแบบให้สม่ำเสมอ เรียกใช้คำสั่งตรวจสอบและแก้ไข คุณปฏิบัติ React Academy ด้วยโค้ดที่ใช้งานได้จริงที่คุณเรียกใช้โดยตรงในเบราว์เซอร์ และติวเตอร์ AI ตลอด 24/7 ตอบคำถามของคุณขณะที่คุณไปผ่านบทเรียน
คุณต้องมีประสบการณ์ก่อนที่จะเริ่มเรียน React Academy หรือไม่
ไม่จำเป็นต้องมีประสบการณ์มาก่อน React Academy บน CoddyKit ออกแบบมาสำหรับผู้เริ่มต้นไปจนถึงผู้เรียนขั้นสูง คุณสามารถเริ่มต้นที่นี่หรือเริ่มจากตัวแรกและเรียนด้วยความเร็วของคุณเอง นี่คือบทเรียนที่ 1 จากทั้งหมด 3 บทเรียน
บทเรียน “ESLint + กฎ React และการผสาน Prettier” ใช้เวลานานแค่ไหน
บทเรียน CoddyKit ส่วนใหญ่ใช้เวลาประมาณ 5–10 นาที แต่ละบทเรียนจึงสั้นและเป็นแบบโต้ตอบ คุณสามารถก้าวหน้าอย่างต่อเนื่องและกลับมาเรียนต่อจากตรงที่เพิ่งหยุดบนเว็บและแอปได้เลย
ฉันเขียนและรันโค้ดในบทเรียน React Academy นี้ได้ไหม
ได้ บทเรียน React Academy ทุกบทมีตัวแก้ไขโค้ดในตัว คุณจึงเขียนและรันโค้ดจริงได้เลยในเบราว์เซอร์ และได้รับข้อเสนอแนะจาก AI ในทันที — ไม่ต้องติดตั้งในเครื่องของคุณ
บทเรียนทั้งหมดในหลักสูตรนี้
- ESLint + กฎ React และการผสาน Prettier
- การตั้งชื่อไฟล์ ขอบเขตคอมโพเนนต์ และการตั้งชื่อพร็อพ
- ตัวแปรสภาพแวดล้อมและการจัดระเบียบการกำหนดค่า