ตัวสร้าง ESLint Config
ตัวสร้าง ESLint 9 flat config ฟรีออนไลน์ สร้าง eslint.config.js สำหรับ React, Next.js, Vue และ Node พร้อม toggle TypeScript, Prettier, react-hooks, Vitest,
Loading tool...
ตัวสร้าง ESLint Config คืออะไร?
ตัวสร้าง ESLint config สร้างไฟล์ eslint.config.js ที่บอก ESLint ว่าจะ lint โปรเจกต์ของคุณอย่างไร ทั้งโหลด plugin ภาษาใด เปิดชุด rule ไหน มี global variable อะไร และข้ามโฟลเดอร์ใด ตั้งแต่ ESLint 9 ฟอร์แมต flat config เป็นค่าเริ่มต้น แต่การประกอบไฟล์จากเอกสารที่กระจัดกระจายก็ยังผิดพลาดง่าย เครื่องมือนี้ให้ preset ตาม framework และ switch ที่มีป้ายกำกับชัดเจน แล้วสร้างไฟล์ flat config ที่สะอาดในไม่กี่วินาที ทั้งหมดทำงานออฟไลน์ในเบราว์เซอร์
ประโยชน์หลัก
- เริ่มจาก preset ที่ตรงกับ framework ของคุณ แทนไฟล์เปล่า ๆ
- เข้าใจ toggle ของแต่ละ plugin โดยไม่ต้องค้นเอกสารที่ยาวและหนาแน่น
- จัดลำดับการวางซ้อน style guide อย่าง Airbnb หรือ Standard JS ให้ถูกต้อง
- ได้ syntax ของ flat config ที่ถูกต้องเสมอ ไม่มี import ตกหล่นหรือ trailing comma
- ใช้งานออฟไลน์ในเบราว์เซอร์ ไม่มีการอัปโหลดอะไรออกไป
กรณีการใช้งาน
- •เริ่มระบบ lint สำหรับโปรเจกต์ Next.js, React, Vue หรือ Node.js ใหม่
- •ย้าย .eslintrc เดิมไปสู่ฟอร์แมต flat config ของ ESLint 9
- •เพิ่มการรองรับ TypeScript หรือ Prettier ให้ชุด lint ที่มีอยู่
- •เปิด rule ของ react-hooks เพื่อจับบั๊ก dependency array ตั้งแต่เนิ่น ๆ
- •ทำ lint config ให้เป็นมาตรฐานเดียวกันทั้ง monorepo
วิธีใช้ตัวสร้าง ESLint Config
- เลือก preset: เลือก Next.js, React, Vue หรือ Node.js เพื่อเริ่มจาก flat config พื้นฐานที่มั่นคง
- เปิดปิด plugin: สลับเปิด typescript-eslint, Prettier, react-hooks, react-refresh, Vitest หรือ JSDoc ตามที่ stack ของคุณต้องการ
- ตั้งค่า globals และ ignores: เปิด globals สำหรับ browser หรือ Node และแก้รายการ global ignores แบบคั่นด้วย comma สำหรับโฟลเดอร์ build
- คัดลอกหรือดาวน์โหลด: ตรวจสอบพรีวิว eslint.config.js แบบสด แล้วคัดลอกหรือดาวน์โหลดไฟล์ไปไว้ที่ root ของโปรเจกต์ได้เลย
คุณสมบัติหลัก
- Preset สำหรับ Next.js, React, Vue และ Node.js ที่เป็นไปตามแนวทาง flat config ปัจจุบัน
- Toggle คลิกเดียวสำหรับ typescript-eslint, Prettier, react-hooks, react-refresh, Vitest และ JSDoc
- ตัวเลือก style guide: Airbnb หรือ Standard JS วางซ้อนบน config พื้นฐาน
- แก้ไขรายการ global ignores และ globals สำหรับ browser/node ได้ในหน้าเดียว
- พรีวิว eslint.config.js สด ๆ พร้อมคัดลอกและดาวน์โหลดในคลิกเดียว
- ทำงานในเบราว์เซอร์ 100% ไม่ต้องตั้งค่า ไม่ต้องสมัครสมาชิก ข้อมูลไม่ออกจากเครื่องคุณ
คำถามที่พบบ่อย
flat config คืออะไร?
flat config คือรูปแบบ config ที่ ESLint ใช้ตั้งแต่เวอร์ชัน 9 (ไฟล์ eslint.config.js เป็นค่าเริ่มต้น) มาแทน .eslintrc ด้วย JavaScript array ธรรมดาของ config object ทำให้การแชร์ ประกอบ และใช้กับเครื่องมืออื่นง่ายขึ้นมาก
ต้องติดตั้ง package อะไรบ้าง?
อย่างน้อยคือ eslint และ globals บวก preset ที่คุณเปิดใช้: typescript-eslint สำหรับ TypeScript, eslint-config-prettier เพื่อปิด rule ด้าน formatting, eslint-plugin-react-hooks สำหรับ React และ @vitest/eslint-plugin สำหรับ rule ของ test ใน Vitest
style guide อย่าง Airbnb หรือ Standard ต่างกันอย่างไร?
ทั้งคู่เป็นชุด rule ที่มีความเห็นชัดเจน (opinionated) วางซ้อนบน config พื้นฐาน Airbnb เข้มงวดเรื่อง class และสไตล์มากกว่า ส่วน Standard JS บังคับ formatting ของตัวเองโดยไม่ต้องตั้งค่า ตัวสร้างจะวางตัวที่คุณเลือกไว้หลัง block ของ plugin เพื่อให้ rule ของมันมีผล
ทำไม config ถึงจบด้วย entry ของ Prettier?
eslint-config-prettier จะปิด rule ของ ESLint ทุกตัวที่ขัดแย้งกับการจัด format ของ Prettier จึงต้องอยู่ท้ายสุดเพื่อ override rule ด้านสไตล์ก่อนหน้า ถ้าคุณเพิ่ม config ที่เน้นสไตล์เข้ามาภายหลัง ให้คง entry ของ Prettier ไว้ท้ายสุดเสมอ