خیلی وقت‌ها پیش اومده که بعد از نوشتن چندین خط کد و اجرای اون‌ها تازه متوجه خطاهای دستوری موجود توی کدمون میشیم. خوشبختانه اکثر ابزارهایی که کدهامونو توی اون‌ها اجرا میکنیم، اطلاعات نسبتا خوبی درمورد نوع و جای دقیق خطا بهمون میدن. ولی خب از حق نگذریم اگه این خطاها رو بتونیم قبل از اجرا پیداشون کنیم و همونجا که ذهنمون درگیر قسمت‌های دیگه نشده درستشون کنیم خیلی بهتر میشه. این کار مخصوصا وقتی که زمان لازم برای اجرا یکم طولانی هست میتونه خیلی کاربردی باشه.

در این مقاله قصد معرفی ابزاری رو داریم که به‌وسیله‌ی اون میتونید کدتون رو توی ویرایشگر (editor) خطایابی کنید. با ما همراه باشید.

* منظور از خطایابی، خطایابی دستوری هست.

برای شروع تصویر زیر رو نگاه کنید تا دید کلی نسبت به اتفاقی که قرار هست بیفته پیدا کنید.

در این شکل ۴ قسمت Linter, Linter-{something}, Config, Rule وجود داره که قدم به قدم اون‌ها رو بررسی میکنیم تا ببینیم چه بخشی از نیاز ما رو رفع میکنند.

۱- Linter:

ویرایشگر (editor) ما برای اینکه قابلیت خطایابی کدها رو داشته باشه نیاز به ابزاری داره که این کار رو براش انجام بده. Linter بسته ای (package) هست که با نصب اون این قابلیت رو فراهم میکنیم. برای نصب Linter روی دو ویرایشگر محبوب Atom و Sublime میتونید از روش زیر استفاده کنید:

• Atom:
  – Windows: از مسیر File -> Settings به قسمت install برید.
  – OSX: از مسیر Atom -> Preferences به قسمت install برید.
  – Ubuntu: از مسیر Edit -> Preferences به قسمت install برید.عبارت linter-eslint رو جستجو کنید. روی دکمه‌ی install کنار بسته ی linter کلیک کنید و منتظر بمونید تا نصب شه.
  
• sublime:
  از مسیر Preferences -> Package Manager وارد قسمت بسته ها(package) بشید. عبارت Install Package رو بنویسید و کلید enter رو بزنید. عبارت sublimelinter رو بنویسید و اینتر رو بزنید. پکیج sublimelinter برای شما نصب میشه.

۲- {Linter-{something:

قدم دوم مربوط به زبان برنامه‌نویسی مورد نظر ما میشه. در این قسمت بسته ی متناسب با زبانی که با اون کار میکنیم و میخوایم ویرایشگرمون روی اون خطایابی انجام بده رو نصب میکنیم. برای مثال برای زبان جاوااسکریپت میتونیم از بسته ی eslint استفاده کنیم. به جای عبارت something هر زبانی میتونه قراره بگیره و به منظور رسوندن این مفهوم استفاده شده که برای استفاده از linter در هر زبانی نیاز به نصب بسته ی linter مربوط به اون زبان دارید.

• Atom:
  از همون قسمت install عبارت linter-eslint رو جستجو کنید و بسته ی linter-eslint رو نصب کنید.
  از طریق سایت atom میتونید بسته ی مربوط به زبان مورد نظرتون رو پیدا کنید و نصب کنید. البته این سایت شیوه‌ی نصب از طریق command رو گفته، ولی شما به راحتی میتونید با کپی کردن اسم بسته و جستجوی اون در قسمت install اقدام به نصب کنید.

• Sublime:
  از همون روش قبلی وارد قسمت install بشید؛ اینبار به جای عبارت sublimelinter، عبارت sublimelinter-cotrib-eslint رو بنویسید.
  

۳- Config:

تا اینجای کار مربوط به ویرایشگر بود. برای مثال ویرایشگر خودمون رو برای خطایابی زبان جاوااسکریپت آماده میکردیم. از اینجای کار به بعد مربوط به نوع خطایابی میشه و به ویرایشگر گفته میشه که طبق Ruleهای موجود در این بسته (package) چه الگوهایی رو مجاز بدونه و اگر کد ما طبق اون الگوها نبود، خطای رخ داده رو به کاربر گزارش بده.

برای اینکار میتونیم از npm استفاده کنیم. برای مثال برای eslint میتونیم بسته‌ی rallycoding رو با استفاده از دستور زیر نصب کنیم:

npm install --save-dev eslint-config-rallycoding

برای استفاده از قوانین مربوط به بقیه زبان‌ها باید زبان مورد نظر رو به همراه عبارت linter گوگل کنید تا نحوه‎‌ی استفاده از بسته های مربوط به اون رو پیدا کنید.

۴- Rule:

در آخر نیاز داریم تا قوانین موردنظر خودمون رو به سیستم بفهمونیم. برای اینکار (اگر کد ما مربوط به جاوااسکریپت باشه) فایلی با نام .eslintrc در پوشه‌ی پروژه ایجاد میکنیم و کد زیر رو توی اون مینویسیم:

{
	"extends": "rallycoding"
}

با اینکار به ویرایشگر میگیم که کد ما رو طبق قوانین موجود در این بسته خطایابی کن. (توجه کنید که این فایل مربوط به eslint هست و بسته به زبان مورد استفاده ممکنه اسم فایل هم تغییر کند.)

برای اعمال قوانین مربوط به خودتون میتونید از مستندات eslint استفاده کنید.

به طور کلی ۴ بخش داشتیم:

• اول از همه linter رو نصب کردیم.
• بسته ی مربوط به زبان مورد نظر خودمون رو نصب کردیم.
• بسته به نوع زبان انتخاب شده، بسته ای از قوانین مربوط به اون زبان رو دانلود کردیم.
• توسط یک فایل در پروژه به ویرایشگر گفتیم که چه قوانینی رو اعمال کند.

با اتمام این ۴ مرحله ویرایشگر ما آماده شده. فقط یادتون باشه که برای هر پروژه‌ی جدید نیاز دارید تا مرحله‌ی ۳ و ۴ رو دوباره انجام بدید.