مرور مختصری بر روی ESLint

معرفی مختصر ESLintیک Linter بسیار محبوب و متن باز برای جاوا اسکریپت و تایپ اسکریپت است که می‌تواند کد این زبان‌ها را تحلیل کند و هشدارها و خطاهایی بر اساس شدت نقض قواعد مختلف ارائه دهد که باعث میشود کدی بهتر با احتمال خطای کمتری توسط توسعه دهنده نوشته شود.نصب ESLint ابتدا نیاز است که پکیج منیجر npm را نصب کنیمin linux $ sudo apt install $ nodejs npmسپس با دستور زیر با استفاده از npm پکیج eslint را نصب میکنیمnpm init @eslint/configدر صورتی که قصد استفاده از پیکربندی های موجود حال حاضر را دارید میتوانید مطابق با نمونه زیر عمل کنید با اضافه کردن--config [package-name]برخی از پکیج های مناسب در لینک زیر آورده شده است. لینک# use `eslint-config-semistandard` shared config # npm 7+ npm init @eslint/config -- --config semistandard # or (`eslint-config` prefix is optional) npm init @eslint/config -- --config eslint-config-semistandard # ⚠️ npm 6.x no extra double-dash: npm init @eslint/config --config semistandardسوالات هنگام نصب:در هنگام نصب یکسری سوالات پرسیده خواهد شد که در ادامه به آن ها اشاره خواهیم کرد البته لازم به ذکر است که بعد از نصب نیز می توان آن ها را مجدد پیکربندی کرد:تنظیمات داخل فایلی با نام eslintrc قرار خواهد گرفتHow would you like to use ESLint? ... To check syntax only > To check syntax and find problems To check syntax, find problems, and enforce code styleگزینه دوم به صورت پیشفرض انتخاب شده است در این سوال از شما می پرسد که ESLint چه کاری را برای شما انجام 1.فقط سینتکس کد را چک کند 2.به جز سینتکس ایرادهای کد را نیز پیدا کند 3.این گزینه علاوه بر سینتکس و ایراد های ساختاری کند ،استایل کد را نیز بررسی می کندWhat type of modules does your project use? ... > JavaScript modules (import/export) CommonJS (require/exports) None of theseاین مورد معمولا باید گزینه JavaScript modules انتخاب شود مگر نسبت به نیاز پروژه شما تغییر کندWhich framework does your project use? ... > React Vue.js None of theseدر این قسمت فریمورک مورد استفاده را انتخاب می کنیمDoes your project use TypeScript? » No / Yesدر این قسمت اگر از سوپرست تایپ اسکریپ برای پروژه خود استفاده می کنید باید این گزیته را برابر با YES قرار دهید زیرا برخی قوانین در تایپ اسکریپ متفاوت با جاوااسکریپ می باشدWhere does your code run? ... (Press <space> to select, <a> to toggle all, <i> to invert selection) √ Browser √ Nodeاین مورد به محل اجرای کد اشاره دارد که داخل مرورگر باشد یا سرورWhat format do you want your config file to be in? ... > JavaScript YAML JSONاین قسمت به محل ذخیره سازی کانفیگ های ESLint اشاره می کند که دارای چه فرمتی باشد که جاوااسکریپت گزینه بهتری برای مدیریت استWould you like to install them now? » No / Yesاین مورد اشاره به نصب ESLint دارد که می خوایم نصب کنیم پس گزینه YES را می زنیمWhich package manager do you want to use? ... > npm yarn pnpmدر این قسمت پکیج منیجری که از آن استفاده می کنیم را باید انتخاب کنیم که برای نصب مشکلی پیش نیاید.بعد از انجام این مراحل میتوانید به راحتی eslint را بر روی هرفایلی اجرا کنیدnpx eslint [your-file.js]پیکربندی:بعد از اجرای دستورnpm init @eslint/configبعد از اجرا دستور npm init @eslint/config در دایرکتوری پروژه شما یک فایل .eslintrc.{js,yml,json} ساخته خواهد شد که درآن میتوانید قانون ها و سطح آنها رو مشخص کنید.به عنوان مثال{ &quotrules&quot: { &quotsemi&quot: [&quoterror&quot, &quotalways&quot], &quotquotes&quot: [&quoterror&quot, &quotdouble&quot] } }قوانین بالا به الزام استفاده از semicolon و استفاده از double quote اشاره میکنید که درصورت عدم رعایت آنها در ادیتور خود خطای متناسب با این قوانین را مشاهده خواهید کردسطوح نشان دادن خطا:نمونه زیر را در نظر بگیرید{ &quotno-use-before-define&quot: [&quoterror&quot, { &quotfunctions&quot: true, &quotclasses&quot: true, &quotvariables&quot: true, &quotallowNamedExports&quot: false }] }این قانون اشاره به این دارد که استفاده از یک متغیر قبل از تعریف آن باعث نشان دادن خطا میشود.در قانون نوشته شده بالا با استفاده از آپشن های زیر میتوان پیام دریافتی مربوط به این قانون را تفییر دهیمبا استفاده از off میتوان به طور کلی این قانون را غیرفعال کرد.با استفاده از warn در هنگام نقض این قانون به جای نشان دادن خطا صرفا یک هشدار به آنها نشان داده میشوددیگر امکانات و دسترسی های این پکیجدر نظر نگرفتن برخی فایل ها در اجرای قوانینexport default [ { files: [&quotsrc/**/*.js&quot], ignores: [&quot**/*.config.js&quot], rules: { semi: &quoterror&quot } } ];به عنوان مثال در گزینه بالا قوانین مشخص شده در فایل های جی اس اجرا میشود ولی در فایل هایی با اکستنشن .config.js اجرا نمیشودمشخص کردن نسخه قابل قبول با مشخص کردن این کانفیگ ESLint کد های مارا بر اساس نسخه مشخص شده داوری میکند در این کانفیگ از ecmaVersion برای زبان js استفاده میشود.export default [ { files: [&quot**/*.js&quot], languageOptions: { ecmaVersion: 5 } } ];در مثال بالا فایل های js ما کد های بر اساس ورژن 5 ecma داوری میشود. این گزینه به طور معمول بر روی latest تنظیم شده است که آخرین نسخه پایدار منتشر شده پیروی میکند.مشخص کردن parser:به طور پیشفرض این پکیج از Espree به عنوان مفسر خود استفاده میکند ولی این امکان را داریم که از پکیج های مرسومی مانند babel نیز استفاده کنیم.استفاده از قوانین مرسوم این پکیج:با قرار دادن این بخش از کد در فایل .eslintrc.{js,yml,json}{ &quotextends&quot: &quoteslint:recommended&quot }قوانین پیشنهادی این پکیج به طور پیش فرض برای ریپازینتوری شما فعال خواهد شد.. تحقیق توسط (به تریتب حروف الفبا) حسام اثنی عشری، عطا رحیم‌زاده، شایان شعبانزاده، امیررضا قاسمی ویسی برای درس طراحی وب استاد جعفرنژاد ، نیمسال اول 1401 دانشگاه صنعتی شریف انجام شده است.