ESLint برای React Native

پروژه‌ی ESLint پروژه‌ای متن‌باز برای جاوا اسکریپت است که در سال ۲۰۱۳ توسط Nicholas C. Zakas معرفی شد. از ‌ESLint برای آنالیز سورس کرد به صورت استاتیک و طبق قوانین مشخص شده استفاده می‌شود که در اصطلاح به آن Linting می‌گویند.

طبیعتا این قوانین برای فریم‌ورک‌ها، کتاب‌خانه‌ها و حتی پروژه‌های اختصاصی خودتان متفاوت خواهد بود. شاید بخواهید از انگولار، ری‌اکت، ری‌اکت نیتیو، ES6 یا ES7 استفاده کنید که طبیعتا گرامرهای متفاوتی برای نوشتن خواهند داشت و شما نیاز به دستیاری دارید تا این گرامرها را دنبال کند. یکی دیگر از فواید مهم استفاده از Linterها یکسان‌سازی ساختار کدها بین اعضای تیم است. به این شکل خوانایی کدها برای همه به یک اندازه خواهد بود و از اتلاف وقت در درک مجدد آن پرهیز می‌شود.

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

نصب و تنظیم

در حال حاضر React Native نیز از این قاعده مستثنا نیست و می‌توانید به راحتی با نصب پکیج مناسب برای آن قوانین را استفاد کنید. بعد از جستجوهای فراوان پیشنهاد من برای استفاده نصب این ۴ پکیج است:

• babel-eslint
• eslint
• eslint-plugin-react
• eslint-plugin-react-native

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

npm install --save-dev babel-eslint 
npm install --save-dev eslint 
npm install --save-dev eslint-plugin-react
npm install --save-dev eslint-plugin-react-native
// OR
npm install --save-dev babel-eslint eslint eslint-plugin-react  eslint-plugin-react-native

پس از نصب باید به ESLint بگویید که از این قوانین استفاده کند. برای این کار فایلی با نام `.eslintrc` بسازید و محتوای آن را برابر زیر قرار دهید:

{
    "parser": "babel-eslint",
    "env": {
        "react-native/react-native": true,
        "browser": true
    },
    "plugins": [
        "react"
    ],
    "extends": [
        "eslint:recommended",
        "plugin:react/recommended"
    ],
    "rules": {
        // overrides
    }
}

کاربرد Browser: true

یکی از توانایی‌های React Native شبیه‌سازی امکانات مرورگر مانند setInterval است و به همین دلیل با اضافه کردن این کد به ESLint می‌گوییم که این امکانات را مشکل در نظر نگیرد.

استفاده در ادیتورها و سازنده‌ها

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

SublimeLinter-eslint برای Sublime

linter-eslint برای Atom

ESLint Extension برای Visual Studio Code

grunt-eslint برای Grunt

gulp-eslint برای Gulp