Introduction

• eslint คือ linter ที่อย่กับ javascript มานาน คนใช้กันมากที่สุด
• ดู rules ที่หลากหลาย
• มี config inspector ด้วย

Usage

ถ้าจะใช้ ESLint ให้ใช้ผ่าน ESLint plugins ที่กำหนดไว้ให้แล้ว จะได้เป็น standard เดียวกัน

• eslint-plugin-vue สำหรับโปรเจค Vue.js
• eslint-plugin-react สำหรับโปรเจค React
• eslint-plugin-next สำหรับโปรเจค Next.js
• @typescript-eslint/eslint-plugin สำหรับโปรเจคที่ใช้ TypeScript
• eslint-plugin-html สำหรับการตรวจสอบไฟล์ HTML
• eslint-plugin-css-modules สำหรับการตรวจสอบ CSS modules
• eslint-plugin-functional สำหรับการเขียนโค้ดแบบ functional programming

1. ติดตั้ง dependencies

npm install --save-dev eslint @typescript-eslint/parser @typescript-eslint/eslint-plugin

2. config (eslint.config.js)

// eslint.config.js
import typescriptPlugin from "@typescript-eslint/eslint-plugin";

export default [
  {
    parser: "@typescript-eslint/parser", // กำหนดให้ใช้ parser ของ TypeScript
    plugins: {
      "@typescript-eslint": typescriptPlugin,
    },
    extends: [
      "eslint:recommended",
      "plugin:@typescript-eslint/recommended", // ใช้ rule ที่แนะนำจาก @typescript-eslint
    ],
    rules: {
      "@typescript-eslint/explicit-module-boundary-types": "warn", // แนะนำให้กำหนด type ให้ชัดเจน
      "@typescript-eslint/no-explicit-any": "off", // ถ้าต้องการใช้ any สามารถปิดได้
      "@typescript-eslint/indent": ["error", 2], // ตั้งค่าการเยื้องโค้ด 2 ช่อง
    },
  },
];

3. รันคำสั่งใน terminal

npm

npx eslint .

pnpm

pnpm dlx eslint .

yarn

yarn dlx eslint .

bun

bunx eslint .

:::