ESLint چگونه کار می‌کند و چرا باید از آن استفاده کنیم؟

ابزار ESLint به شما کمک می‌کنه خیلی راحت مشکلات کدهاتون رو پیدا کنید!

مثلا اگر تابعی جایی فراخوانی نشده باشه یا تعریف نشده باشه یا غلط املایی داشته باشید و.... یک پیام خطا بهتون نشون میده و می‌تونید خیلی راحت اون خطا رو شناسایی و تصحیح کنید.

ابزار ESLint چطور کار می‌کنه؟

ابزار ESLint چطور کار می‌کنه؟
ابزار ESLint چطور کار می‌کنه؟

محیط کار ESLint رو به دو بخش ویرایشگر و پروژه تقسیم می‌کنیم. در بخش ویرایشگر در بالاترین سطح خود ویرایشگرمون قرار داره که تصویر بالا شما ویرایشگر Atom رو مشاهده می‌کنید که البته می‌تونه هر ویرایشگر دیگه‌ای مثل VSCode یا ... باشه! ویرایشگر Atom از افزونه‌های بسیار زیادی داره که می‌تونید انتخاب و نصب کنید. این ویرایشگر یک افزونه بخصوص داره به اسم Linter که این فزونه از سکویی برای استفاده از ابزارهایی مثل ESLint هست. ویرایشگرهایی مثل Atom تنها از یک زبان خاص پشتیبانی نمی‌کنن بخاطر همین برای استفاده از ابزارهای متفاوت باید افزونه‌هایی به عنوان سکوی استفاده از ابزارهای زبان‌های مختلف داشته باشن و Linter هم یکی از همین افزونه‌ها هست. ESLint دقیقا همون ماژولی هست که کدهای جاوااسکریپت رو Parse می‌کنه.

برای بخش ویرایشگر همینکه یک بار Linter و ESLint رو نصب کنید کافیه و برای همیشه مشکلتون حل میشه اما در بخش پروژه مشکلات بخصوصی وجود داره! فرض کنید توی شرکت روی پروژه‌ای کار می‌کنید که با استاندارد ES5 نوشته شده ولی توی خونه پروژه‌ای دارید که با استاندارد ES6 یا ES7 و... دحال توسعه هست. خب در این صورت شما به تنظیمات بسیار متفاوتی برای استفاده از هر یک از این استانداردها نیاز دارید. برای انجام تنظیمات ESLint‌ از یک فایل Config استفاده می‌کنیم که هدف اینه که به ESLint بگه ما برای این پروژه بخصوص از یک‌سری Ruleها برای اعتبار سنجی کدهای جاوااسکریپتمون استفاده می‌کنیم!

در آخر باید بگم که ESLint در حالت پیش‌فرض هیچ تنظیمات خاصی نداره و خودمون باید بهش بگیم بعد از Parse کردن به این Ruleها نگاه کن و...

برای دیدن Ruleهای پیش‌فرض ESLint می‌تونید به آدرس ESLint.org/docs/rules همچنین وقتی ESLint یک خطا رو شناسایی می‌کنه در متن خطا یک لینک به Rule مورد نظر وجود داره که می‌تونید با کلیک روی اون لینک به صفحه اون Rule برید و مثال‌ها و... اون خطا رو ببینید!

مثال: خطای نبود ; سیمی‌کالن

مثال: خطای نبود ; سیمی‌کالن
مثال: خطای نبود ; سیمی‌کالن

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

امیدوارم که مفید بوده باشه!


نویسنده: گشتاسب مظفریان | ۲۲ شهریور ۱۳۹۷