ESLint Config Generator: สร้าง ESLint 9 flat config ให้โปรเจกต์คุณในไม่กี่วินาที

ESLint 9 เปลี่ยนกติกาใหญ่ ตอนนี้ flat config — ไฟล์เดียวชื่อ eslint.config.js — คือค่าเริ่มต้น ส่วนไฟล์ .eslintrc ที่ repo จำนวนมากยังใช้กันอยู่จะไม่ถูกโหลดอีกต่อไป เว้นแต่จะเปิด compatibility flag เอง งานที่เคยเป็นแค่ "อัปเกรด dependency" จึงกลายเป็นงานเขียน config ใหม่ทั้งชุดเสียก่อนที่ linter จะกลับมารันได้

ESLint Config Generator คือทางลัดสำหรับงานนี้ เลือก stack ของคุณ — React, Next.js, Vue หรือ Node — สลับ toggle สำหรับ TypeScript, Prettier, react-hooks และ Vitest เครื่องมือจะสร้าง eslint.config.js ที่สะอาดและทันสมัยตามแนวทางที่ทีม ESLint แนะนำออกมาให้ทันที copy หรือ download ลงเครื่อง ติดตั้ง package ตามรายการที่บอก แล้วก็ lint ได้เลย

ทุกอย่างทำงาน 100% ใน browser ไม่ต้องมี account ไม่ต้อง upload — การตั้งค่าทั้งหมดไม่เคยออกจากเครื่องคุณเลย

ทำไมต้องใช้ ESLint Config Generator

• ข้ามช่วง migration เริ่มใหม่ให้เลย — การแปล .eslintrc เกาทีละส่วนมักใช้เวลานานกว่าเริ่มจาก flat config ที่ถูกต้อง และผลลัพธ์ก็ไม่ทิ้งขยะ config เก่าไว้ให้ตามเก็บ
• พรีเซ็ตแยกตาม framework — React, Next.js, Vue และ Node ต้องการ plugin และ file glob ไม่เหมือนกัน เครื่องมือจะจัดค่าเริ่มต้นที่เหมาะกับ stack ที่คุณใช้จริงให้อัตโนมัติ
• ทุก integration เป็น toggle — TypeScript, Prettier, react-hooks และ Vitest คือสิ่งที่โปรเจกต์ส่วนใหญ่เพิ่มเป็นอย่างแรก และ config จะเพิ่มขึ้นทีละบล็อกที่มองเห็นชัดต่อ toggle
• ได้ไฟล์ที่อ่านออกและเป็นของคุณ — ไฟล์ที่ได้เป็น JavaScript ธรรมดา import ด้านบน export array เดียว วันหน้าจะเพิ่ม custom rule คุณก็รู้ทันทีว่าต้องแก้ตรงไหน
• copy หรือ download คลิกเดียว — เอา config ไปวางใน editor หรือ save ลง repo ได้ทันที เครื่องมือบอกด้วยว่าต้องติดตั้ง npm package ตัวไหนบ้าง
• เป็นส่วนตัวตั้งแต่การออกแบบ — เครื่องมือเป็น client-side JavaScript ล้วน จึงใช้กับโค้ดที่ policy ห้ามเอาไปแปะ service ภายนอกได้สบาย

ฟีเจอร์หลัก

ผลลัพธ์คือไฟล์ eslint.config.js เดียวสำหรับ root ของ repo พร้อม ignore pattern สำหรับ build output และ coverage มาให้ตั้งแต่แรก

วิธีใช้งาน

1. เปิด ESLint Config Generator แล้วเลือก framework — React, Next.js, Vue หรือ Node
2. สลับ toggle ตามที่โปรเจกต์ใช้จริง: TypeScript, Prettier integration, react-hooks และ Vitest preview จะอัปเดตให้เห็นทันที
3. ตรวจ eslint.config.js ที่ได้ แล้ว copy หรือ download ลงไปไว้ที่ root ของ repository
4. ติดตั้ง dependencies ตามรายการที่เครื่องมือบอก — ห้ามพลาดตัว ESLint เอง บวกกับ package ที่ตรงกับ toggle ที่เปิดไว้
5. รัน npx eslint . แล้วแก้ตามที่มันฟ้อง ถ้าใช้ Prettier ด้วยก็รัน format ตามปกติ — สองตัวนี้ไม่ทำสงครามกันอีกต่อไป

Flat Config อธิบายแบบเข้าใจง่าย

config ตอนนี้คือ array ธรรมดา — โมเดล .eslintrc เก่ากระจายการตั้งค่าไปตามไฟล์ JSON หรือ YAML cascade ลงตามโครง directory และอ้าง plugin ด้วย string ผ่าน extends flat config เปลี่ยนทั้งหมดนี้เป็น JavaScript module เดียวที่ export array ของ config objects แต่ละ object ประกาศได้ทั้ง files (glob ที่มีผล), ignores, plugins (object จริง ๆ ที่ import มาที่หัวไฟล์), languageOptions และ rules ESLint merge array ตามลำดับ — object ที่มาทีหลังชนะของเก่า — และการ match เป็นแบบ flat คือเช็กทุกไฟล์กับ files pattern ของแต่ละ object ตรง ๆ สรุปสองข้อ: ลำดับสำคัญ และ plugin เป็น object ที่ import เข้ามา ไม่ใช่ string ที่ไป resolve ตอน runtime

แต่ละ toggle ดึง plugin อะไรเข้ามา และทำไม:

• TypeScript ดึง typescript-eslint เข้ามา: parser ที่เข้าใจ syntax ของ TypeScript บวกชุด recommended rules ทำให้ linter มองเห็น type ของคุณ แทนที่จะสำลักทุกครั้งที่เจอ
• Prettier เติม eslint-config-prettier แม้ชื่อจะฟังเหมือนจัด format แต่มันไม่ได้ format อะไรเลย — มันปิด rules ที่จะเถียงกับ Prettier เรื่อง quote, semicolon และ spacing งาน format ให้ Prettier งานความถูกต้องให้ ESLint และ entry ของ prettier ต้องอยู่ลำดับสุดท้ายเสมอ
• react-hooks เพิ่ม eslint-plugin-react-hooks: rules-of-hooks ฟ้องทันทีเมื่อเรียก hook ในเงื่อนไขหรือ loop ส่วน exhaustive-deps เตือนเมื่อ dependency list ลืมค่าที่ hook อ่าน — ต้นตอคลาสสิกของ stale closure
• Vitest เติม globals ให้ไฟล์ test เพราะ describe, it และ expect มีอยู่จริงตอน runtime เท่านั้น ถ้าไม่มีบล็อกนี้ no-undef จะฟ้องทุกไฟล์ spec

ข้อควรระวังเรื่อง peer dependency — config ที่ได้ import package ตามชื่อ ถ้าตัวใดหายไปจาก node_modules ESLint จะสตาร์ทไม่ขึ้นเลย ต้องติดตั้งให้ครบตามรายการ และควรใช้ plugin major ที่รองรับ flat config จำไว้ด้วยว่า eslint-config-prettier ถูก append เป็น config object ไม่ใช่ลงทะเบียนเป็น plugin

สิบกว่าบรรทัดที่อ่านออก แทนที่ไฟล์ที่เคยพันกันหลายไฟล์:

// eslint.config.js — generated for React with TypeScript and Prettier
import js from '@eslint/js';
import tseslint from 'typescript-eslint';
import reactHooks from 'eslint-plugin-react-hooks';
import prettier from 'eslint-config-prettier';

export default [
  { ignores: ['dist/', 'coverage/', 'node_modules/'] },
  js.configs.recommended,
  ...tseslint.configs.recommended,
  reactHooks.configs['recommended-latest'],
  prettier, // last: disable stylistic rules that clash with Prettier
];

ตัวอย่างการใช้งานจริง

เริ่มโปรเจกต์ใหม่ (Greenfield)

จัด linting เสร็จในไม่ถึงนาทีแล้ว commit config ไปพร้อม branch แรกของ feature โปรเจกต์ที่เริ่มด้วย hooks rules, TypeScript checking และ ignore ที่สะอาด จะไม่สะสมหนี้ lint แบบที่ codebase เก่าต้องใช้เวลาหลายสัปดาห์ไล่ทำ

ย้ายจาก .eslintrc

สร้าง flat config ใหม่ รันคู่กับตัวเก่า แล้วจับคู่ความต่างทีละ rule แทนการแปล syntax แบบเครื่อง ๆ สำหรับ config ที่พันกันด้วย overrides มาหลายปี เริ่มจาก baseline ที่ generate มามักไวกว่า

Config ราย package ใน monorepo

Generate config หนึ่งชุดสำหรับ React app ที่มี react-hooks และ Vitest อีกชุดสำหรับ Node CLI ที่ใช้ TypeScript เพียงอย่างเดียว แต่ละ package ได้ plugin เท่าที่จำเป็นพอดี

ใช้สอนพื้นฐานการ lint

Toggle ทำให้เห็นสาเหตุและผลชัดเจน: เปิด toggle TypeScript แล้วเห็น import โผล่ เปิด react-hooks แล้วเห็นสอง rule ปรากฏขึ้นต่อหน้า เหมาะมากเป็นของเล่นตัวช่วยสาธิตสดใน workshop

Best Practices

• Commit config ที่ generate มา — eslint.config.js คือ source file หนึ่ง ควรอยู่ใน version control และรีวิวการเปลี่ยนแปลงใน pull request เพราะการแก้ rule กระทบทุกไฟล์ใน repo
• ให้ Prettier จัด format ให้ ESLint จับความถูกต้อง — อย่าเปิด stylistic rules กลับหลังติดตั้ง eslint-config-prettier และคงไว้ที่ท้าย array เสมอ
• เพิ่ม lint เข้า CI ก่อน PR ใหญ่แรก — สร้าง job ที่รัน ESLint ทุกครั้งที่ push ได้ในไม่กี่นาทีด้วย GitHub Actions Workflow Generator lint ที่รันแค่บนเครื่องนักพัฒนามักถูกละเลยจนเสียหาย
• Pin เวอร์ชัน plugin — generate บน major ที่ทดสอบแล้วและอัปเกรดอย่างตั้งใจ major ใหม่ของ plugin เปิด rule เพิ่มขึ้นมาโดยไม่บอกกลางคืนได้
• ทบทวน ignores เมื่อโปรเจกต์โต — build output และ folder coverage ไม่จำเป็นต้อง lint การยกเว้นพวกมันประหยัดเวลา CI
• มอง warning ใหม่เป็นงาน ไม่ใช่เสียงรบกวน — exhaustive-deps เตือนเพราะ dependency list ที่ขาดคือบั๊กแอบแฝง ไม่ใช่เรื่องสไตล์

เริ่มสร้าง ESLint Config ของคุณวันนี้

รูปแบบ config แบบเก่ารันมานานพอแล้ว แต่ ESLint 9 ได้ก้าวต่อไปแล้ว เปิด ESLint Config Generator เลือก framework สลับ toggle แล้ว copy flat config ที่ใช้ได้ตั้งแต่ครั้งแรก ไม่ต้องมี account ไม่ต้อง upload ไม่ต้องติดตั้งอะไร

เครื่องมือที่เกี่ยวข้อง:

• TSConfig Generator — สร้าง tsconfig.json แบบ strict และทันสมัยสำหรับโปรเจกต์ TypeScript
• EditorConfig Generator — รักษา indentation และ line ending ให้ตรงกันทุก editor
• GitHub Actions Workflow Generator — ต่อ job lint และ test เข้า CI ได้ในไม่กี่นาที

ขอให้ lint ผ่านหมดทุกไฟล์นะ!

คำถามที่พบบ่อย

ถ: config ที่ได้ใช้กับ ESLint 8 ได้ไหม?

ตอบ: มันออกแบบสำหรับ ESLint 9 ที่ flat config เป็นค่าเริ่มต้น เวอร์ชันเก่ากว่าจะใช้ได้ต้องเปิด flag ทางเลือกที่ง่ายที่สุดคืออัปเกรดขึ้น ESLint 9 แล้วใช้ไฟล์ที่ได้ตามเลย

ถ: ทำไม Prettier ถึงโผล่ใน ESLint config ของฉัน?

ตอบ: toggle Prettier ไม่ได้ทำให้ ESLint จัด format code มันเติม eslint-config-prettier ซึ่งปิด rules ที่จะขัดกับ Prettier เพื่อให้งาน format และงานตรวจความถูกต้องไปด้วยกันได้

ถ: ESLint หา package ไม่เจอหลังวาง config เกิดอะไรขึ้น?

ตอบ: config import plugin ตามชื่อ ทุก package ที่ระบุต้องถูกติดตั้งในโปรเจกต์ รันคำสั่ง install ที่เครื่องมือให้มาแล้ว error จะหายไป

ถ: แก้ config เพิ่มหลัง generate ได้ไหม?

ตอบ: ได้ มันคือ JavaScript ธรรมดา เพิ่ม rule override เป็น object ใหม่ จำกัด scope ด้วย file glob หรือลงทะเบียน plugin เพิ่มได้เลย ให้ override แคบอยู่หลังตัวกว้าง และ prettier อยู่ท้ายสุด