ESLint چیست؟ ESLint ابزاری برای شناسایی الگوهای از پیش تعریف شده در کدهاست که کمک می‌کند تا کدهای غیراستاندارد را سازگار کرده و بتوانید کدهایی تمیز را در پروژه استفاده کنید. در بوت کمپ فرانت اند به شما یاد میدهیم که این ابزار در زبان برنامه‌نویسی جاوا اسکریپت و در اکثر فریم‌ورک‌های این زبان قابل استفاده است و ابزاری است که با کمک Node.js ایجاد شده است. برای نصب آن روی جاوا اسکریپت هم می‌توانید از NPM و هم از Yarn استفاده کنید. این ابزار سه مقدار را به قوانین شما اختصاص می‌دهد که 0 به معنای خاموش بودن، 1 به معنای نشان‌دادن هشدار و 2 به معنای نشان‌دادن خطا خواهد بود.
ابزار ESLint کاملا قابل شخصی‌سازی بوده و در آموزش برنامه نویسی فرانت اند شما یاد می‌گیرید که دقیقا به چه شکل می‌توان قوانین آن را شخصی‌سازی کرد تا مطابق با شرایط پروژه بتوانید از آن استفاده کنید.
با مفهوم ESLint در جاوا اسکریپت بیشتر آشنا شوید
ESLint چیست؟ جاوا اسکریپت ابزارهای متنوعی را برای سازگاری بیشتر کدها به برنامه‌نویسان خود ارائه می‌دهد که ESLint یکی از مهم‌ترین این ابزارها شناخته می‌شود. این ابزار به شکلی متن‌باز ایجاد شده و از سال 2013 نیز مورداستفاده قرار می‌گیرد. هدف از ساخت و اموزش eslint این است که بتوان الگوهای نادرستی که در کدها وجود دارند را پیدا کرد. یکی از نکات مهم درباره ESLint این است که با استفاده از Node.js ایجاد شده است و به همین علت نیز نصب و راه‌اندازی آن کاری بسیار ساده و راحت خواهد بود.
برای این‌که بتوانید این ابزار را روی جاوا اسکریپت خود نصب کنید می‌توانید از طریق NPM اقدام کنید. بوت کمپ برنامه نویسی مرحله به مرحله برای آموزش مفاهیمی مثل Esl و مفاهیم دیگر کنار شماست.
در این سایت می‌توانید کاربردهای ESLint را بشناسید و همین‌طور یاد می‌گیرید که انگولار چیست؟ و چگونه می‌توانید از آن استفاده کنید؟
مزایا و کاربردهای مهم ESLint
مزایای استفاده از ESLint در جاوا اسکریپت شامل موارد زیر می‌شود:
- این ابزار به شما کمک می‌کند تا دستورالعمل‌هایی مخصوص استانداردهای کدنویسی را تعریف کرده و به این ترتیب خطاهای موجود در کد خود را به حداقل برسانید.
- ابزار ESLint تکنیک‌های متنوعی را برای استایل‌سازی در جاوا اسکریپت به شما ارائه می‌دهد.
- این ابزار مخصوصا در پروژه‌های پیچیده که یک تیم روی آن کار می‌کنند کاربردهای بسیار بیشتری دارد.
- شما می‌توانید دستورالعمل‌های خود را ایجاد کنید یا این‌که می‌توانید قوانین موجود در این ابزار را برحسب نیاز خود شخصی‌سازی کنید.
کاربردهای مهم این ابزار در پروژه‌های مختلف ری اکت، ری اکت نیتیو، انگولار و Node.js است. در این فریم‌ورک‌ها اگر سایز پروژه شما متوسط رو به بالاست و نمی‌توانید به‌صورت دستی رعایت‌کردن استانداردها در کدنویسی را بررسی کنید بهتر است ابزار ESLint را استفاده کرده و از مزایای آن بهره‌مند شوید. آموزش برنامه نویسی در سایت بامداد هرآنچه را که برای نصب نیاز به آموزش دارد را برای شما فراهم کرده
پیکربندی ESLint: ساخت قوانین دلخواه
یکی از مزایای بسیار مهمی که این ابزار به شما ارائه می‌دهد، این است که می‌توانید خیلی راحت، قوانین مدنظر خود را در آن ایجاد کنید. همین موضوع، باعث می‌شود تا براساس سبک نوشتاری که دارید، دستورالعمل‌های خطایابی را ایجاد کرده و به این ترتیب، احتمال بروز خطا در کدهای خود را به حداقل برسانید. پیکربندی این ابزار بسیار ساده و راحت بوده و شما می‌توانید تقریبا هر نوع قانونی که می‌خواهید را در آن ایجاد کنید.
آموزش نصب و استفاده از ESLint
دو روش اصلی برای نصب ESLint وجود دارد که برحسب نیاز می‌توانید هرکدام از آنها را انتخاب کنید. متد اول استفاده از NPM است که با قطعه کد زیر می‌توانید ESLint را روی جاوا اسکریپت خود اضافه کنید:
npm install eslint –save-dev
در روش دوم شما می‌توانید از yarn برای نصب ESLint استفاده کنید که این کار نیز به شکل زیر قابل انجام خواهد بود:
yarn add eslint –dev
در گام بعدی شما نیازمند پیکربندی ESLint خواهید بود. اگر از npm برای نصب این ابزار استفاده کرده‌اید، قطعه کد زیر به پیکربندی اولیه ابزار شما منجر خواهد شد:
npx eslint –init
اگر از yarn برای نصب استفاده کرده‌اید نیز می‌توانید برای این کار از قطعه کد زیر استفاده کنید:
yarn run eslint –init
بعد از اجرای کدهای بالا شما احتمالا یک فایل با پسوند eslintrc.{js,yml,json} را در پوشه خود مشاهده خواهید کرد. پیکربندی آنها قاعدتا باید به شکل زیر باشد:
export default [
{
rules: {
“no-unused-vars”: “error”,
“no-undef”: “error”
}
}
];
درباره این پیکربندی باید بدانید که no-unused-vars و no-undef در واقع نام قوانین در ESLint را تشکیل می‌دهند. مقادیر آن نیز ممکن است 0 به معنای خاموش بودن قوانین، 1 به معنای هشدار بودن قوانین و 2 به معنای خطابودن قوانین باشد.
در نهایت اگر قصد استفاده از ESLint در جاوااسکریپت را دارید باید آن را وارد کدهای خود کنید. در اولین قدم باید یکی از دو کد زیر را به کدهای خود اضافه کنید:
npx elinst <your file>.js
# or
$ npx eslint <folder containing js files>
البته فراموش نکنید که این امکان وجود دارد که شما بتوانید این ابزار را به فایل package.json خود نیز اضافه کنید:
“scripts”: {
…
“lint”: “eslint .”,
…
}
به این ترتیب این ابزار می‌تواند خطاهای موجود را برای شما پیدا کرده و آنها را نمایش دهد. فراموش نکنید استفاده از این ابزار نه‌تنها در حین کدنویسی پروژه‌ها؛ بلکه برای آموزش برنامه نویسی نیز کاربردهای زیادی دارد. به همین علت وقتی قصد شرکت در بوت کمپ فرانت اند را دارید معمولا نحوه استفاده از این ابزار نیز به شما آموزش داده خواهد شد.
مثال‌های عملی از استفاده ESLint
در این بخش قصد داریم نحوه ایجاد قواعد سفارشی در ESLint را به‌صورت سفارشی‌سازی شده در اختیار شما قرار دهیم. برای این کار، قصد داریم به تمام متغیرهای const به نام foo رشته bar را اختصاص دهیم. این قانون را در فایلی به نام enforce-foo-bar.js تعریف کرده‌ایم. این قانون همچنین پیشنهاد می‌کند که هر مقدار دیگری که به const foo اختصاص داده شده با bar جایگزین شود. برای مثال، فرض کنید که فایل foo.js را به شکل زیر دارید:
// foo.js
const foo = “baz123”;
زمانی که ابزار ESLint را با قانون مشخص شده اجرا می‌کنید، baz123 را به‌عنوان یک مقدار نادرست برای متغیر foo در نظر گرفته و آن را علامت‌گذاری می‌کند. اگر ESLint در حالت تصمیم خودکار قرار داشته باشد، می‌تواند آن را اصلاح کرده و به شکل زیر دربیاورد:
// foo.js
const foo = “bar”;
ایجاد قواعد سفارشی در ESLint
برای انجام این کار، در مرحله اول، نیازمند این هستید که یک افزونه را به کدهای خود اضافه کنید. البته بدون اضافه کردن افزونه نیز می‌توان این کار را انجام داد. برای مثال، ما می‌خواهیم قانونی بنویسیم که بلوک‌های خالی را ممنوع کند. کد ما به شکل زیر خواهد بود:
try { foo() } catch (e) { bar() }
باید دقت داشته باشید که این مثال، باعث ایجاد یک خطا می‌شود. پس می‌توانیم قطعه کد زیر را استفاده کنیم تا قطعه کد ما خطایی نداشته باشد:
try { foo() } catch (e) {}
اکستنشن‌های مفید ESLint
از جمله محبوب‌ترین افزونه‌هایی که در ESLint می‌توانید از آنها استفاده کنید، می‌توان به موارد زیر اشاره کرد:
1- GitHub: قوانینی را از گیت هاب جمع‌آوری کرده و در اختیار شما قرار می‌دهد تا به‌صورت آماده، به آنها دسترسی داشته باشید.
2- SonarJS: افزونه‌ای است که مجموعه‌ای از قوانین تشخیص اشکالات و الگوهای مشکوک در کدها را به شما ارائه می‌دهد.
3- Unicorn: از دیگر مجموعه‌های جذاب قوانین مختلف در ESLint به شمار می‌آید.
4- @mysticatea/eslint-plugin
سخن پایانی
ESLint چیست؟ ESLint یکی از ابزارهای پرکاربرد در زبان برنامه‌نویسی جاوا اسکریپت است که به شما در پیداکردن خطاها یا اشتباهات ساختاری کدها کمک می‌کند. این ابزار هم در پروژه‌های کوچک و هم در پروژه‌های تیمی بزرگ کاربردهای زیادی دارد و به همین علت نیز در بوت کمپ برنامه نویسی فرانت اند تمرکز زیادی روی نحوه استفاده از این ابزار می‌شود. اگر شما هم قصد استفاده از این ابزار را دارید یا این‌که می‌خواهید از هوش مصنوعی جاوا اسکریپت استفاده کنید پیشنهاد می‌کنیم حتما از سایر خدمات سایت بامداد نیز بهره‌مند شوید.
