تصور کنید یک روز، در حال نوشتن یک پروژه بزرگ جاوااسکریپت هستید. همه چیز خوب پیش می‌رود تا اینکه ناگهان کدهایتان تبدیل به یک جنگل وحشی از ارور‌ها و مشکلات ساختاری می‌شوند😑. مشکلاتی که گاهی آنقدر ریز و درشت هستند که حتی فکر کردن به پیدا کردن و رفع آنها باعث سردرد می‌شود.

در همین موقعیت، یک ابزار جادویی به نام ESLint وارد می‌شود و مانند یک قهرمان، تمام خطاها و ایرادات کد شما را شناسایی و برطرف می‌کند. اما اگر ESLint نبود، چه می‌شد؟ باید ساعت‌ها و شاید روزها وقت بگذارید تا تمام خطاها و مشکلات کد خود را پیدا و برطرف کنید. و احتمالاً باز هم چیزی از قلم می‌افتاد.

ESLint چیست ؟

ESLint یک ابزار قدرتمند تحلیل استاتیک کد برای جاوااسکریپت است که به شما کمک می‌کند تا خطاها و مشکلات کد خود را قبل از اجرا شناسایی و رفع کنید. این ابزار، که توسط Nicholas C. Zakas در سال 2013 ایجاد شد، به سرعت به یکی از محبوب‌ترین ابزارهای توسعه‌دهندگان جاوااسکریپت تبدیل شده است. با استفاده از ESLint می‌توانید کیفیت کد خود را بهبود بخشید و از بروز خطاهای رایج جلوگیری کنید. اگر به دنبال راهی برای بهبود کدنویسی خود هستید، ESLint بهترین انتخاب است.

چرا استفاده از  ESLint مفید هست؟

• افزایش کیفیت کد: با استفاده از ESLint می‌توانید از کیفیت و ساختار درست کد خود مطمئن شوید.
• کاهش خطاها: با شناسایی خطاها قبل از اجرا، می‌توانید از بروز مشکلات جدی در کد خود جلوگیری کنید.
• صرفه‌جویی در زمان: با ESLint می‌توانید به سرعت و به راحتی خطاهای کد خود را شناسایی و برطرف کنید، بدون نیاز به جستجوی طولانی در میان کدها.

مزایای استفاده از ESLint

• کد خواناتر و قابل نگهداری‌تر: ESLint به شما کمک می‌کند تا کدی بنویسید که خواندن و نگهداری آن برای دیگران و حتی خودتان در آینده آسان‌تر باشد.
• پیشگیری از بروز خطاها: با شناسایی خطاها قبل از اجرا، می‌توانید از بروز مشکلات جدی در کد خود جلوگیری کنید.
• انعطاف‌پذیری بالا: ESLint قابلیت پیکربندی و تنظیم قوانین خاص خود را دارد، که می‌تواند با نیازهای پروژه شما هماهنگ شود.

چگونه ESLint را نصب و راه‌اندازی کنیم؟

نصب ESLint بسیار ساده است. ابتدا باید Node.js و npm را بر روی سیستم خود نصب کنید. سپس با استفاده از دستور زیر می‌توانید ESLint را نصب کنید:

npm install eslint --save-dev

بعد از نصب، می‌توانید با استفاده از دستور زیر یک فایل پیکربندی برای ESLint ایجاد کنید:

npx eslint --init

این دستور شما را از طریق چند سوال راهنمایی می‌کند تا تنظیمات اولیه ESLint را مشخص کنید. به عنوان مثال، می‌توانید انتخاب کنید که از چه قواعدی استفاده شود و آیا می‌خواهید ESLint را برای پروژه‌های مختلف خود تنظیم کنید یا نه.

پیکربندی ESLint: ساخت قوانین دلخواه

یکی از ویژگی‌های مهم ESLint قابلیت پیکربندی آن است. شما می‌توانید قواعد دلخواه خود را ایجاد کنید و حتی از افزونه‌ها و پلاگین‌های مختلف برای بهبود عملکرد آن استفاده کنید. فایل پیکربندی ESLint می‌تواند به صورت .eslintrc.json یا .eslintrc.js باشد.

{
  "env": {
    "browser": true,
    "node": true,
    "es2021": true
  },
  "extends": [
    "eslint:recommended",
    "plugin:react/recommended"
  ],
  "parserOptions": {
    "ecmaFeatures": {
      "jsx": true
    },
    "ecmaVersion": 12,
    "sourceType": "module"
  },
  "plugins": [
    "react"
  ],
  "rules": {
    "no-unused-vars": "warn",
    "no-console": "off",
    "react/react-in-jsx-scope": "off"
  }
}

این فایل پیکربندی شامل چند بخش مختلف است که هر کدام را به تفصیل بررسی می‌کنیم:

env:

{
  "browser": true,
  "node": true,
  "es2021": true
}

این بخش محیط‌هایی را که کد در آنها اجرا می‌شود، مشخص می‌کند. با تنظیم browser به true، ابزار ESLint  می‌فهمد که کد در محیط مرورگر اجرا می‌شود. node به true نیز نشان می‌دهد که کد در محیط Node.js اجرا می‌شود. es2021 مشخص می‌کند که کد از ویژگی‌های ECMAScript 2021 استفاده می‌کند.

extends:

[
  "eslint:recommended",
  "plugin:react/recommended"
]

این بخش به ESLint می‌گوید که از مجموعه قواعد پیش‌فرض استفاده کند. eslint:recommended مجموعه‌ای از قواعد توصیه شده توسط ESLint است. plugin:react/recommended مجموعه قواعدی است که مخصوص پروژه‌های React است.

parserOptions:

{
  "ecmaFeatures": {
    "jsx": true
  },
  "ecmaVersion": 12,
  "sourceType": "module"
}

این بخش گزینه‌های مربوط به پارس را تنظیم می‌کند. ecmaFeatures.jsx به ESLint می‌گوید که کد شامل JSX است. ecmaVersion: 12 مشخص می‌کند که کد از ویژگی‌های ECMAScript 2021 (نسخه 12) استفاده می‌کند. sourceType: ماژول (module) نشان می‌دهد که کد از ماژول‌های ES استفاده می‌کند.

plugins:

[
  "react"
]

این بخش پلاگین‌های اضافی را لیست می‌کند که ESLint باید از آنها استفاده کند. در این مثال، پلاگین React برای ESLint نصب و استفاده می‌شود.

rules:

{
  "no-unused-vars": "warn",
  "no-console": "off",
  "react/react-in-jsx-scope": "off"
}

این بخش قواعد خاصی را تنظیم می‌کند. به عنوان مثال، no-unused-vars به warn تنظیم شده است که به معنای اخطار دادن در صورت وجود متغیرهای تعریف شده ولی استفاده نشده است. no-console به off تنظیم شده که به معنای مجاز بودن استفاده از console.log و سایر دستورات console است. react/react-in-jsx-scope به off تنظیم شده است که به معنای عدم نیاز به وارد کردن React در فایل‌هایی است که از JSX استفاده می‌کنند (این تنظیم مخصوص ورژن‌های جدید React است که نیازی به وارد کردن React در هر فایل JSX ندارند).

این تنظیمات اولیه به شما کمک می‌کنند تا پروژه‌های جاوااسکریپت یا ریکت خود را به بهترین شکل ممکن توسعه دهید و از کیفیت  کد خود مطمئن شوید.

ایجاد قواعد سفارشی در ESLint

برای ایجاد یک قاعده سفارشی در ESLint، باید یک پلاگین ایجاد کنید. یک پلاگین ESLint شامل مجموعه‌ای از قواعد است که می‌توانید در پروژه خود استفاده کنید. به عنوان مثال، فرض کنید می‌خواهید یک قاعده ایجاد کنید که از استفاده از var در کد جلوگیری کند و تنها let و const مجاز باشند.

ابتدا یک فایل جدید با نام no-var.js ایجاد کنید و کد زیر را در آن قرار دهید:

module.exports = {
  meta: {
    type: "suggestion",
    docs: {
      description: "disallow var and recommend let or const",
      category: "Best Practices",
      recommended: true
    },
    fixable: "code",
    schema: []
  },
  create: function(context) {
    return {
      VariableDeclaration(node) {
        if (node.kind === "var") {
          context.report({
            node,
            message: "Use let or const instead of var",
            fix: function(fixer) {
              return fixer.replaceTextRange([node.start, node.start + 3], "let");
            }
          });
        }
      }
    };
  }
};

سپس باید این پلاگین را در فایل پیکربندی ESLint خود اضافه کنید:

{
  "plugins": [
    "no-var"
  ],
  "rules": {
    "no-var/no-var": "error"
  }
}

حالا هر بار که از var در کد خود استفاده کنید، ESLint یک خطا نمایش می‌دهد و پیشنهاد می‌دهد که از let یا const استفاده کنید.

اکستنشن‌های مفید ESLint

• eslint-plugin-react: این افزونه قواعد خاصی برای پروژه‌های React فراهم می‌کند و به شما کمک می‌کند تا کدهای React خود را به بهترین شکل ممکن بنویسید.
• eslint-plugin-import: این افزونه به شما کمک می‌کند تا واردات و صادرات ماژول‌های خود را مدیریت کنید و از خطاهای مرتبط با آنها جلوگیری کنید.
• eslint-plugin-jsx-a11y: این افزونه به بهبود دسترسی‌پذیری کدهای JSX کمک می‌کند و شما را در نوشتن کدهای دسترسی‌پذیرتر یاری می‌دهد.

چه زمانی از ESlint استفاده کنیم؟

ما پیشنهاد می‌کنیم که از ESLint در هر پروژه‌ای استفاده کنید، بدون توجه به اندازه پروژه یا تعداد اعضای تیم. اما باید در هر پروژه جاوااسکریپت یا تایپ‌اسکریپت متوسط تا بزرگ و پیچیده، و همچنین در پروژه‌هایی که تیم بزرگی از توسعه‌دهندگان روی آن کار می‌کنند، حتماً از ESLint استفاده کنید. در هر دو حالت، لازم است قوانین و استانداردهای کدنویسی مشترکی را اعمال کنید.

ابزارهایی مانند ESLint به توسعه‌دهندگان این امکان را می‌دهند که مشکلات کد جاوااسکریپت خود را بدون اجرای آن کشف کنند. یکی از دلایل اصلی ایجاد ESLint این بود که توسعه‌دهندگان بتوانند قوانین مخصوص به خود را برای linting بنویسند. می‌توانید از ESLint در هر برنامه‌ای که بر پایه جاوااسکریپت یا تایپ‌اسکریپت است استفاده کنید.

مثال‌های عملی از استفاده ESLint

حالا که با مفاهیم و قابلیت‌های ESLint آشنا شدید، بیایید نگاهی به چند مثال واقعی از استفاده ESLint در پروژه‌های مختلف بیندازیم. این مثال‌ها به شما نشان می‌دهند که چگونه می‌توانید از ESLint برای بهبود کیفیت کد، افزایش بهره‌وری و کاهش خطاها در پروژه‌های مختلف استفاده کنید. در ادامه به بررسی دو پروژه React و Node.js می‌پردازیم.

مثال 1: پروژه React

فرض کنید یک پروژه React دارید و می‌خواهید از ESLint برای افزایش کیفیت کد خود استفاده کنید. ابتدا باید پلاگین‌های مربوطه را نصب کنید:

npm install eslint-plugin-react eslint-plugin-jsx-a11y eslint-plugin-import --save-dev

سپس فایل پیکربندی ESLint خود را به‌روزرسانی کنید:

{
  "extends": [
    "eslint:recommended",
    "plugin:react/recommended",
    "plugin:jsx-a11y/recommended",
    "plugin:import/errors",
    "plugin:import/warnings"
  ],
  "plugins": [
    "react",
    "jsx-a11y",
    "import"
  ],
  "rules": {
    "react/jsx-uses-react": "off",
    "react/react-in-jsx-scope": "off",
    "import/no-unresolved": "error"
   }
}

مثال2: پروژه Node js

برای یک پروژه Node.js نیز می‌توانید از ESLint استفاده کنید. ابتدا ESLint را نصب کنید:

npm install eslint --save-dev

سپس فایل پیکربندی ESLint خود را ایجاد کنید:

{
  "env": {
    "node": true,
    "commonjs": true,
    "es2021": true
  },
  "extends": "eslint:recommended",
  "parserOptions": {
    "ecmaVersion": 12
  },
  "rules": {
    "no-console": "off"
  }
}

ترکیب ESLint و Prettier

Prettier یک ابزار قالب‌بندی کد است که به شما کمک می‌کند تا کدهای خود را به صورت خودکار قالب‌بندی کنید. با ترکیب ESLint و Prettier می‌توانید از قدرت هر دو ابزار بهره‌مند شوید.

ابتدا باید Prettier و افزونه‌های مربوطه را نصب کنید:

npm install prettier eslint-plugin-prettier eslint-config-prettier --save-dev

سپس فایل پیکربندی ESLint خود را به‌روزرسانی کنید:

{
  "extends": [
    "eslint:recommended",
    "plugin:prettier/recommended"
  ],
  "plugins": [
    "prettier"
  ],
  "rules": {
    "prettier/prettier": "error"
  }
}

سوالات متداول

1. ESLint چیست و چه کاربردی دارد؟ 

ESLint یک ابزار تحلیل استاتیک کد برای جاوااسکریپت است که به شما کمک می‌کند تا مشکلات و خطاهای کد خود را قبل از اجرا شناسایی و برطرف کنید.

2. چگونه می‌توان ESLint را نصب کرد؟ 

برای نصب ESLint، ابتدا باید Node.js و npm را نصب کنید. سپس با استفاده از دستور npm install eslint --save-dev می‌توانید ESLint را نصب کنید.

3. چگونه می‌توان فایل پیکربندی ESLint را ایجاد کرد؟ 

با استفاده از دستور npx eslint --init می‌توانید یک فایل پیکربندی برای ESLint ایجاد کنید.

4. آیا می‌توان قواعد سفارشی در ESLint ایجاد کرد؟ 

بله، می‌توانید قواعد سفارشی خود را در ESLint ایجاد کنید و با استفاده از پلاگین‌ها و اکستنشن‌های مختلف، عملکرد آن را بهبود بخشید.

5. آیا می‌توان ESLint را با ابزارهای دیگر مانند Prettier ترکیب کرد؟ 

بله، می‌توانید ESLint را با ابزارهایی مانند Prettier ترکیب کنید تا از قدرت هر دو ابزار بهره‌مند شوید و کدهای تمیزتر و منظم‌تری داشته باشید.

جمع بندی

ESLint یک ابزار مفید و ضروری برای هر توسعه‌دهنده جاوااسکریپت است. با استفاده از ESLint می‌توانید کدهای خود را بهبود بخشید، خطاها را شناسایی و برطرف کنید و از کیفیت کدهای خود مطمئن شوید. این ابزار با قابلیت پیکربندی بالا و افزونه‌های متنوع، به شما کمک می‌کند تا پروژه‌های خود را به بهترین شکل ممکن توسعه دهید. با توجه به پیشرفت‌های سریع در دنیای جاوااسکریپت، ESLint همچنان بهبود و توسعه خواهد یافت و به یکی از ابزارهای ضروری برای هر توسعه‌دهنده جاوااسکریپت تبدیل خواهد شد.