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



visibility  
mode_comment   ۲

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

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

Linter چیست

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

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

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

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

ESLint

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

lint کردن کدهای React

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

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

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

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

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

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

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

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

comment دیدگاه کاربران

آموزش های حرفه ای با زبانی ساده و قابل فهم. واقعا سایت خوبی دارید ممنونم ازتون

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

موفق باشید دوست عزیز

نیاز به لاگین

برای ارسال دیدگاه و یا پرسیدن سوال خود در این قسمت، باید در سایت لاگین شوید.