درس نوزدهم: ESLint چیست؟ +آموزش استفاده از آن

در این قسمت می خواهم در رابطه با linter ها و به طور خاص از ESLint صحبت کنیم. Linter ها هیچ ربطی به Webpack ندارند اما از آنجایی که Webpack یک محیط بهینه سازی کد می باشد از نظر من بهتر است در مورد آن ها صحبت کنیم چرا که به ما کمک می کنند کدهای بسیار بهتر و بدون خطایی بنویسیم.

Linter چیست؟

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

ESLint چیست؟

واژه lint از نام یکی از Unix utility ها به همین نام می آید که مسئول بررسی سورس کدهای زبان C بود اما حالا جنبه عام گرفته است و تقریبا برای هر زبان برنامه نویسی چندین Linter داریم. برای زبان جاوا اسکریپت، می توان گفت که ESLint مشهور ترین و محبوب ترین Linter می باشد. برای شروع این قسمت از سورس کد آماده در این لینک استفاده کنید.

اولین قدم برای استفاده از ESLint، نصب آن است بنابراین در ترمینال خود دستور نصب آن را وارد می کنیم:

npm install eslint --save-dev

با اجرای این دستور، ESLint در پوشه node_modules نصب می شود. حالا باید به فایل package.json می رویم تا یک اسکریپت خاص برای ESLint تعریف کنیم:

  "scripts": {
    "test": "echo \"Error: no test specified\" && exit 1",
    "build": "webpack --config webpack.production.config.js",
    "dev": "webpack-dev-server --config webpack.dev.config.js --hot",
    "start": "node src/server.js",
    "lint": "eslint ."
  },

با این کار دستور lint تحلیل گر ESLint را روی سورس کد ما اجرا خواهد کرد. حالا در پوشه اصلی پروژه (اگر سورس کد آماده را از لینک بالا دانلود کرده باشید، پوشه webpack-tutorial-starting-point-for-use-cases) یک فایل به نام eslintrc. ایجاد کنید. ما درون این فایل، تنظیمات مورد نظر را برای ESLint تعریف می کنیم. مثلا اینکه روی چه مواردی سخت گیری کرده و چه مواردی را نادیده بگیرد و الی آخر. شما می توانید با مراجعه به لینک های زیر با انواع قوانین پیکربندی ESLint آشنا بشوید:

توضیحات کلی در رابطه با نحوه پیکربندی:

https://eslint.org/docs/user-guide/configuring

بررسی تک تک قوانین مربوط به پیکربندی:

https://eslint.org/docs/rules/

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

ما هم از همین حالت پیش فرض استفاده می کنیم و به جای اینکه تک تک قوانین را به صورت دستی مشخص کنیم، از یک دستور خاص استفاده می کنیم که خودش موارد تیک دار را بررسی خواهد کرد. به فایل eslintrc. بروید و مثل من کدهای زیر را به آن اضافه کنید:

{
    "extends": "eslint:recommended"
}

همانطور که می بینید فرمت نوشتن قوانین در این فایل باید به صورت JSON باشد. البته هنوز کارمان تمام نشده است. ESLint به صورت پیش فرض کدهای جاوا اسکریپت را بر اساس استاندارد ES5 چک می کند اما ما می خواهیم از ES6 استفاده کنیم. بنابراین به راحتی می گوییم:

{
    "extends": "eslint:recommended",
    "parserOptions": {
        "ecmaVersion": 6,
        "sourceType": "module"
    }
}

ecmaVersion که همان نسخه اکمااسکریپت را مشخص می کند (پاس دادن 6 یعنی ES6). همچنین sourceType را روی module گذاشته ام که یعنی ما از دستورات import و export استفاده خواهیم کرد. اگر این قسمت را مشخص نکنید، ESLint از دستورات import و Export ایراد خواهد گرفت. حالا اگر به ترمینال برنامه برویم و دستور npm run lint را اجرا کنیم، از دستورات require اشکال خواهد گرفت. چرا؟ به دلیل اینکه این دستورات مربوط به Node.js هستند نه جاوا اسکریپت عادی! برای رفع این خطا باید به ESLint بگوییم که در حال استفاده از محیط Node.js نیز هستیم:

{
    "extends": "eslint:recommended",
    "parserOptions": {
        "ecmaVersion": 6,
        "sourceType": "module"
    },
    "env": {
        "node": true
    }
}

Env مخفف environment است. در مرحله بعد باید به ESLint بگوییم که کدنویسی ما برای مرورگر است. اگر این کار را نکنیم، ESLint از وجود متغیر document ایراد می گیرد:

{
    "extends": "eslint:recommended",
    "parserOptions": {
        "ecmaVersion": 6,
        "sourceType": "module"
    },
    "env": {
        "node": true,
        "browser": true
    }
}

نکته بعدی این است که ما از خصوصیات class ها (class properties) در فایل هایمان استفاده کرده ایم. من در همان جلسه نیز توضیح دادم که class properties هنوز در جاوا اسکریپت تعریف نشده است بنابراین باید در این مورد نیز به ESLint توضیح بدهیم. برای رفع این مشکل از پکیجی دیگر به نام babel-eslint استفاده خواهیم کرد. ابتدا این پکیج را با دستور زیر نصب می کنیم:

npm install babel-eslint --save-dev

سپس آن را به فایل پیکربندی ESLint (همان eslintrc.) اضافه می کنیم:

{
    "extends": "eslint:recommended",
    "parser": "babel-eslint",
    "parserOptions": {
        "ecmaVersion": 6,
        "sourceType": "module"
    },
    "env": {
        "node": true,
        "browser": true
    }
}

حالا اگر دستور npm run lint را اجرا کنیم، هیچ خطایی به جز console.log دریافت نخواهیم کرد. در واقع در حالت پیش فرض ESLint به ما اجازه استفاده از console.log را نمی دهد اما ما می توانیم به شکل زیر آن را غیر فعال کنیم:

{
    "extends": "eslint:recommended",
    "parser": "babel-eslint",
    "parserOptions": {
        "ecmaVersion": 6,
        "sourceType": "module"
    },
    "env": {
        "node": true,
        "browser": true
    },
    "rules": {
        "no-console": 0
    }
}

زمانی که no-console را غیرفعال می کنیم (قرار دادن عدد صفر) با اجرای کد npm run lint هیچ خطایی دریافت نخواهیم کرد. تنها مشکل این روش اینجاست که برای بررسی کدها باید هر بار به ترمینال برویم و دستور npm run lint را اجرا کنیم اما روش بهتری وجود دارد که ESLint را درون ادیتور کد اجرا می کند و همانجا در حال کدنویسی خطاها را به ما می دهد. هر ادیتوری که وجود دارد، قطعا یک پلاگین ESLint نیز دارد (کافی است آن را در اینترنت سرچ کنید). از آنجایی که من از ویرایشگر Atom استفاده می کنم، نحوه نصب پلاگین آن را به شما می گویم. در ابتدا از file به گزینه preferences رفته و در پنجره باز شده سربرگ install را انتخاب نمایید.

در باکس جست و جوی باز شده ابتدا نام linter را تایپ کنید و پلاگین linter را نصب نمایید. پس از نصب آن باید یک پلاگین دیگر به نام linter-eslint را نصب نمایید. پس از نصب این دو پلاگین به قسمتی از کدهای خود بروید (مثلا فایل hello-world-button.js) و از عمد کد اشتباهی بنویسید. مثلا من به جای button از batton استفاده می کنم:

batton.innerHTML = 'Hello world';

با این کار سریعا زیر batton خط کشیده شده و دایره قرمز رنگی در سمت چپ ادیتور مشاهده می شود. اگر موس را روی آن ببرید، پنجره Eslint باز شده و پیام زیر به شما نمایش داده می شود:

batton is not defined

یعنی «batton تعریف نشده است». توجه داشته باشید که ESLint نمی تواند خطا های منطقی و پیشرفته و کد شما را تشخیص دهد اما حداقل شما را از شر خطاهای کوچک و احمقانه خلاص خواهد کرد. ترکیب ESlint و webpak به شما کمک می کند که کدهای بسیار بهتری بنویسید.

این قسمت آخرین قسمت از دوره آموزشی webpack می باشد. در آینده نزدیک یک سری آموزشی برای نوشتن یک برنامه با webpack و babel خدمت شما ارائه خواهم داد.