ESLint چیست؟

خب ESLint یک ابزار Linting برای JavaScript است که کد شما را قبل از اجرا بررسی می‌کند و خطاهای احتمالی، باگ‌های رایج و الگوهای نامناسب را شناسایی می‌کند.

اما تفاوت با Prettier:

• Prettier : ظاهر کد را فرمت می‌کند.
• ESLint : کیفیت، درستی و استاندارد بودن کد را بررسی می‌کند.

چرا ESLint مهم است؟

1. کاهش باگ‌ها

خیلی از خطاها قبل از اجرای برنامه شناسایی می‌شوند.

2. بهبود کیفیت کد

کد خواناتر، استانداردتر و قابل نگهداری‌تر می‌شود.

3. پشتیبانی ویژه از React

با پلاگین‌های مخصوص React می‌تواند:

• قوانین Hooks را بررسی کند
• مشکلات JSX را تشخیص دهد
• نکات مربوط به دسترس‌پذیری (a11y) را بررسی کند

نصب ESLint در پروژه React

نصب پایه (React + JavaScript)

npm install -D eslint @eslint/js globals eslint-plugin-react eslint-plugin-react-hooks eslint-plugin-jsx-a11y eslint-plugin-import

اگر از TypeScript استفاده می‌کنید

npm install -D typescript-eslint

ساخت فایل کانفیگ (روش جدید - Flat Config)

در روت پروژه فایل زیر را بسازید:

  eslint.config.js

و داخل آن این تنظیمات را قرار دهید:

import js from "@eslint/js";
import globals from "globals";
import react from "eslint-plugin-react";
import reactHooks from "eslint-plugin-react-hooks";
import jsxA11y from "eslint-plugin-jsx-a11y";
import importPlugin from "eslint-plugin-import";

export default [
  { ignores: ["dist/**", "build/**", "node_modules/**"]
 },

  {
    files: ["**/*.{js,jsx}"]
,
    languageOptions: {
      ecmaVersion: "latest",
      sourceType: "module",
      globals: {
        ...globals.browser,
        ...globals.es2021,
      },
      parserOptions: {
        ecmaFeatures: { jsx: true },
      },
    },
    plugins: {
      react,
      "react-hooks": reactHooks,
      "jsx-a11y": jsxA11y,
      import: importPlugin,
    },
    settings: {
      react: { version: "detect" },
    },
    rules: {
      ...js.configs.recommended.rules,

      // React
      "react/react-in-jsx-scope": "off",
      "react/jsx-uses-react": "off",

      // Hooks
      "react-hooks/rules-of-hooks": "error",
      "react-hooks/exhaustive-deps": "warn",

      // کیفیت عمومی
      "no-unused-vars": ["warn", { argsIgnorePattern: "^_" }]
,
      "no-undef": "error",

      // import
      "import/no-duplicates": "error",
    },
  },
];

اجرای ESLint

اجرای بررسی

npx eslint .

اجرای Auto Fix

npx eslint . --fix

اضافه کردن Script به package.json

{
  "scripts": {
    "lint": "eslint .",
    "lint:fix": "eslint . --fix"
  }
}

استفاده از ESLint کنار Prettier

برای جلوگیری از تداخل قوانین فرمت، این پکیج را نصب کنید:

npm install -D eslint-config-prettier

این کار باعث می‌شود قوانین مربوط به فرمت در ESLint غیرفعال شوند و Prettier فقط مسئول فرمت باشد.

پلاگین‌های پیشنهادی برای React

• eslint-plugin-react
• eslint-plugin-react-hooks (بسیار مهم)
• eslint-plugin-jsx-a11y (برای دسترس‌پذیری)
• eslint-plugin-import (برای مدیریت importها)

جمع‌بندی

استفاده از ESLint باعث می‌شود:

• باگ‌های احتمالی زودتر شناسایی شوند
• کیفیت کد بالا برود
• استاندارد تیمی حفظ شود
• قوانین React و Hooks رعایت شوند