เครื่องสร้าง ESLintrc

การกำหนดค่าที่สร้างขึ้นประกอบด้วยอะไรบ้าง

เครื่องสร้างจะเริ่มจาก eslint:recommended เสมอ และเพิ่มเฉพาะสิ่งที่ตรงกับตัวเลือกของคุณ:

• env ที่มี browser และ/หรือ node พร้อมกับ es2022
• @typescript-eslint/parser และ plugin:@typescript-eslint/recommended เมื่อเปิดใช้ TypeScript
• plugin:react/recommended เมื่อเปิดใช้ React
• no-console และ no-unused-vars ตั้งค่าเป็น warn

ผลลัพธ์เป็นออบเจกต์ JSON ธรรมดาในรูปแบบ .eslintrc.json ดั้งเดิม พร้อมวางและเพิ่มกฎของคุณเอง

การเปรียบเทียบระหว่างการกำหนดค่าแบบแบนกับแบบเดิม

ESLint เวอร์ชัน 9 ได้ยกเลิกการใช้รูปแบบ .eslintrc.* และเปลี่ยนมาใช้รูปแบบการกำหนดค่าแบบแบน (eslint.config.js) แทน ซึ่งมีความแตกต่างสำคัญดังนี้:

โครงการใหม่ควรใช้การกำหนดค่าแบบแบน ส่วนโครงการที่มีอยู่เดิมสามารถคงใช้รูปแบบเดิมได้จนถึงเวอร์ชัน 10.x แต่แนะนำให้ย้ายไปยังรูปแบบใหม่

ระบบนิเวศของปลั๊กอิน

ปลั๊กอินสำหรับโปรเจกต์ React/TS ที่พบได้ทั่วไป:

@typescript-eslint/eslint-plugin
@typescript-eslint/parser
eslint-plugin-react
eslint-plugin-react-hooks
eslint-plugin-jsx-a11y
eslint-plugin-import
eslint-config-prettier

นั่นคือแพ็กเกจทั้งหมด 6 ชุดสำหรับการตั้งค่าที่มีความเห็นเฉพาะตัวในระดับปานกลาง เครื่องสร้างจะเพิ่มเฉพาะที่คุณเลือก คุณจึงติดตั้งเฉพาะสิ่งที่การกำหนดค่าอ้างถึง

การอยู่ร่วมกับ Prettier

Prettier ทำหน้าที่ดูแลการจัดรูปแบบ ในขณะที่ ESLint จะดูแลความถูกต้องของโค้ดและรูปแบบการเขียนโค้ดนอกเหนือจากการจัดรูปแบบ เพื่อหลีกเลี่ยงความขัดแย้ง:

1. ติดตั้ง eslint-config-prettier และเพิ่มเข้าไปเป็นรายการสุดท้ายในไฟล์ extends/config ของคุณ
2. จะปิดใช้งานกฎทั้งหมดของ ESLint ที่ขัดแย้งกับผลลัพธ์ที่ได้จาก Prettier
3. รันโปรแกรม Prettier แยกต่างหาก (เมื่อบันทึกในตัวแก้ไข ขณะรอการยืนยันการเปลี่ยนแปลง และในขั้นตอน CI)

อย่าใช้ eslint-plugin-prettier ในโปรเจกต์ใหม่ เนื่องจากมันจะทำให้ ESLint ทำงานช้าลงเนื่องจากการรันโปรแกรม Prettier ภายใน ESLint ควรแยกเครื่องมือทั้งสองออกจากกัน

คำแนะนำในการปรับแต่งกฎ

• เริ่มจากการปล่อยให้คลายอยู่ก่อน แล้วค่อยๆ ปรับให้แน่นขึ้นทีละน้อย ให้ระบบแสดงคำเตือนก่อนที่จะเกิดข้อผิดพลาด
• การกำหนดค่าแทนสำหรับการทดสอบ: ไฟล์ทดสอบมักต้องใช้ค่า no-unused-expressions ในรูปแบบที่ผ่อนปรน และต้องมีการใช้งานตัวแปรระดับโลก (global variables) ของ Jest ได้
• การกำหนดค่าแทนสำหรับสคริปต์: สคริปต์ที่ใช้ในการสร้างอาจต้องการใช้ค่าระดับโนด (Node globals) โดยไม่จำเป็นต้องเพิ่ม env: node ในระดับทั่วไป
• การแก้ไขกฎในเอกสาร: การเปลี่ยนแปลงกฎแต่ละครั้งควรมาพร้อมคำอธิบายเพื่อชี้แจงเหตุผล

ค่ากำหนดการที่ตรงกับโปรแกรมแก้ไขของคุณ

VS Code จำเป็นต้องมีการติดตั้งและกำหนดค่า ESLint extension ไว้แล้ว ให้เพิ่ม ESLint extension เหล่านี้ลงในการตั้งค่าพื้นที่ทำงาน เพื่อให้ระบบแก้ไขข้อผิดพลาดโดยอัตโนมัติเมื่อบันทึกไฟล์

{
  "editor.codeActionsOnSave": { "source.fixAll.eslint": "explicit" },
  "eslint.validate": ["javascript", "typescript", "javascriptreact", "typescriptreact"]
}