با استفاده از ESLint کدهای Javascript خود را تر و تمیز نگه دارید

در این مطلب ESLint که معروفترین Linter مربوط به Javascript هست رو بهتون معرفی میکنیم، تا بتونین با استفاده از اون کدهایی خواناتر و استانداردتر بنویسید.

Linter چیست

Linter یک ابزار هست که مشکلات مربوط به کد شما رو مشخص میکنه.

زمانی که یک Linter داشته باشید، امکانات مختلفی رو در اختیار شما قرار میده:

• اینکه کدهای شما از Syntax خاصی که قرار بوده مورد استفاده قرار بگیره، تبعیت میکنه یا خیر.
• اینکه کدهای شما دارای مشکلات مختلفی هست یا خیر.
• اینکه کدهای شما با استانداردهایی کدنویسی که تیم تعریف کرده، سازگاری داره یا خیر.

این اطلاعات به شما این امکان رو میده که مشکلات مربوط به کد خودتون رو در محیط Development پیدا کرده و اونا رو برطرف کنید. Linter‌ها در اکثر موارد روش حل مشکل رو نیز در اختیارتون قرار میدن.

ESLint

ESLint یک Linter برای زبان برنامه‌نویسی Javascript هست که با استفاده از Node.js به وجود اومده است.

همونطور که میدونین Javascript مانند زبانهای دیگه همچون Java و ... نیست و کامپایلری ندارد و کدها مستقیما در مرورگر اجرا میشن. در زبانهای دیگه که کامپایلر وجود دارد، در زمان compile کردن کد، اگر مشکلی وجود داشته باشد در اکثر موارد بیان میشه و compile با موفقیت به پایان نمیرسه ولی در Javascript به دلیل عدم وجود compiler، مشکلات خودشون رو در زمان اجرا شدن کد در مرورگر نمایش میدن.

ESLint این ارورها رو برای شما پیدا میکنه و جلوی چنین اتفاقاتی رو میگیره. شما بیشتر به دنبال چه نوع ارورهایی هستید که در کدهاتون رخ نده؟

• جلوگیری از حلقه‌های بی‌نهایت یا infinite loop با قرار دادن شرط نامناسب
• اطمینان از اینکه همه متدهای getter، چیزی رو return میکنند.
• جلوگیری از قرار دادن console.log در کدها
• چک کردن case‌های تکراری در switch
• چک کردن کدهای غیر قابل دسترس. مثلا بعد از return هر کدی رو قرار بدیم، unreachable یا غیر قابل دسترسی میشه.
• و موارد بسیار زیاد دیگه. میتونین همه rule‌های مربوط به ESLint رو در اینجا مشاهده کنید.

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

نصب ESLint بصورت سراسری

با استفاده از npm:

npm install -g eslint

# create a `.eslintrc` configuration file
eslint --init

# run ESLint against any file with
eslint yourfile.js

در ابتدا eslint رو نصب میکنیم و بعد از اون با استفاده از دستور eslint --init در پروژه مورد نظر، فایل مربوط به تنظیمات رو به وجود بیارید و در نهایت هم با استفاده از eslint yourfile.js، فایل مورد نظرتون رو مورد بررسی قرار بدین.

نصب ESLint بصورت محلی یا Locally

برای اینکار در پروژه مورد نظر بصورت زیر عمل میکنیم:

npm install eslint --save-dev

# create a `.eslintrc` configuration file
./node_modules/.bin/eslint --init

# run ESLint against any file with
./node_modules/.bin/eslint yourfile.js

شما همچنین میتونین ESLint رو برای روی ادیتور خودتون سوار کنید و خود Editor بیشتر کارها رو براتون انجام میده و دیگه نیاز به اجرا کردن دستی eslint برای تک تک فایل‌ها نیست و خود ادیتور eslint رو در پس زمینه اجرا میکنه و مشکلات رو بهشون نشون میده. در این لینک میتونین ادیتور مورد نظرتون رو پیدا کنید و ببینید که چطور میتونین ESLint رو بر روی اون سوار کنید.

ESLint رو میتونین با حالتهای مختلفی تنظیم کنید. ما در اینجا چند روش که بصورت متداول از اونا استفاده میشه رو خدمتتون معرفی کنیم.

استفاده از Style guide مربوط به airbnb

یک روش متداول برای lint کردن کدها توسط ESLint استفاده از راهنمای airbnb هست. برای اینکار در ابتدا باید این ابزار رو نصب کنیم:

npm install --save-dev eslint-config-airbnb

برای اینکه از این ابزار استفاده کنیم و استایل مربوط به airbnb در پروژه شما اعمال بشه، باید کدهای زیر رو در .eslintrc موجود در ریشه پروژه خودتون قرار بدین:

{
  "extends": "airbnb",
}

lint کردن کدهای React

اگر بر روی پروژه React سر و کار دارید میتونین از پلاگین react استفاده کنید. برای اینکار در ابتدا ابزار eslint-plugin-react رو نصب میکنیم:

npm install --save-dev eslint-plugin-react

بعد از نصب هم کدهای زیر رو در فایل .eslintrc قرار میدیم:

{
  "extends": "airbnb",
  "plugins": [
      "react"
  ],
  "parserOptions": {
    "ecmaFeatures": {
      "jsx": true
    }
  }
}

میبینید که ویژگی jsx رو true کردیم تا linter به کدهای jsx گیر نده.

استفاده از یک نسخه مشخص ECMAScript

همونطور که میدونین ECMAScript هر سال یک نسخه جدید از Javascript رو ارائه میده و در اون ویژگی‌های جدید رو معرفی میکنه. مقدار پیش‌فرض برای این ویژگی 5 هست که به معنی اینه که ES5 مورد استفاده قرار میگیره و اگر میخواید از نسخه ES5 به بالا استفاده کنید، باید در فایل .eslintrc اون رو مشخص کنید.

مثلا برای اینکه بخواید در پروژتون از ES6 استفاده کنید بصورت زیر عمل کنید:

{
  "parserOptions": {
    "ecmaVersion": 6,
  }
}

استفاده از حالت Strict mode

{
  "parserOptions": {
    "ecmaFeatures": {
      "impliedStrict": true
    }
  }
}

تنظیمات زیاد دیگه‌ای هم وجود داره که خودتون میتونین اونا رو در این لینک مطالعه کنید.

نویسنده

محمد اسفندیاری

بسیار به طراحی وب علاقمندم و به سرعت در حال یادگیری تمام مباحث پیشرفته هستم و دوست دارم که به دیگران هم یاد بدهم.