در این مطلب ESLint که معروفترین Linter مربوط به Javascript هست رو بهتون معرفی میکنیم، تا بتونین با استفاده از اون کدهایی خواناتر و استانداردتر بنویسید.
Linter چیست
Linter یک ابزار هست که مشکلات مربوط به کد شما رو مشخص میکنه.
زمانی که یک Linter داشته باشید، امکانات مختلفی رو در اختیار شما قرار میده:
- اینکه کدهای شما از Syntax خاصی که قرار بوده مورد استفاده قرار بگیره، تبعیت میکنه یا خیر.
- اینکه کدهای شما دارای مشکلات مختلفی هست یا خیر.
- اینکه کدهای شما با استانداردهایی کدنویسی که تیم تعریف کرده، سازگاری داره یا خیر.
این اطلاعات به شما این امکان رو میده که مشکلات مربوط به کد خودتون رو در محیط Development پیدا کرده و اونا رو برطرف کنید. Linterها در اکثر موارد روش حل مشکل رو نیز در اختیارتون قرار میدن.
ESLint
ESLint یک Linter برای زبان برنامهنویسی Javascript هست که با استفاده از Node.js به وجود اومده است.
همونطور که میدونین Javascript مانند زبانهای دیگه همچون Java و ... نیست و کامپایلری ندارد و کدها مستقیما در مرورگر اجرا میشن. در زبانهای دیگه که کامپایلر وجود دارد، در زمان compile کردن کد، اگر مشکلی وجود داشته باشد در اکثر موارد بیان میشه و compile با موفقیت به پایان نمیرسه ولی در Javascript به دلیل عدم وجود compiler، مشکلات خودشون رو در زمان اجرا شدن کد در مرورگر نمایش میدن.
ESLint این ارورها رو برای شما پیدا میکنه و جلوی چنین اتفاقاتی رو میگیره. شما بیشتر به دنبال چه نوع ارورهایی هستید که در کدهاتون رخ نده؟
- جلوگیری از حلقههای بینهایت یا infinite loop با قرار دادن شرط نامناسب
- اطمینان از اینکه همه متدهای getter، چیزی رو return میکنند.
- جلوگیری از قرار دادن console.log در کدها
- چک کردن caseهای تکراری در switch
- چک کردن کدهای غیر قابل دسترس. مثلا بعد از return هر کدی رو قرار بدیم، unreachable یا غیر قابل دسترسی میشه.
- و موارد بسیار زیاد دیگه. میتونین همه ruleهای مربوط به ESLint رو در اینجا مشاهده کنید.
ESLint بسیار منعطف و با قابلیت تنظیم بالا هست. شما میتونین مشخص کنید که چه rule هایی باید برای کدهای شما چک بشه. همچنین میتونین مشخص کنید که چه نوع استایل استانداردی رو میخواید برای کدهاتون قرار بدین. خیلی از ruleها بصورت پیش فرض غیر فعال یا فعال هستند و شما میتونین با استفاده از فایل
برای کل پروژهها یا یک پروژه خاص، تنظیمات مورد نظرتون رو قرار بدین.نصب ESLint بصورت سراسری
با استفاده از npm:
npm install -g eslint # create a `.eslintrc` configuration file eslint --init # run ESLint against any file with eslint yourfile.js
در ابتدا eslint رو نصب میکنیم و بعد از اون با استفاده از دستور eslint --init در پروژه مورد نظر، فایل مربوط به تنظیمات رو به وجود بیارید و در نهایت هم با استفاده از eslint yourfile.js، فایل مورد نظرتون رو مورد بررسی قرار بدین.
نصب ESLint بصورت محلی یا Locally
برای اینکار در پروژه مورد نظر بصورت زیر عمل میکنیم:
npm install eslint --save-dev # create a `.eslintrc` configuration file ./node_modules/.bin/eslint --init # run ESLint against any file with ./node_modules/.bin/eslint yourfile.js
شما همچنین میتونین ESLint رو برای روی ادیتور خودتون سوار کنید و خود Editor بیشتر کارها رو براتون انجام میده و دیگه نیاز به اجرا کردن دستی eslint برای تک تک فایلها نیست و خود ادیتور eslint رو در پس زمینه اجرا میکنه و مشکلات رو بهشون نشون میده. در این لینک میتونین ادیتور مورد نظرتون رو پیدا کنید و ببینید که چطور میتونین ESLint رو بر روی اون سوار کنید.
ESLint رو میتونین با حالتهای مختلفی تنظیم کنید. ما در اینجا چند روش که بصورت متداول از اونا استفاده میشه رو خدمتتون معرفی کنیم.
استفاده از Style guide مربوط به airbnb
یک روش متداول برای lint کردن کدها توسط ESLint استفاده از راهنمای airbnb هست. برای اینکار در ابتدا باید این ابزار رو نصب کنیم:
npm install --save-dev eslint-config-airbnb
برای اینکه از این ابزار استفاده کنیم و استایل مربوط به airbnb در پروژه شما اعمال بشه، باید کدهای زیر رو در
موجود در ریشه پروژه خودتون قرار بدین:{ "extends": "airbnb", }
lint کردن کدهای React
اگر بر روی پروژه React سر و کار دارید میتونین از پلاگین react استفاده کنید. برای اینکار در ابتدا ابزار eslint-plugin-react رو نصب میکنیم:
npm install --save-dev eslint-plugin-react
بعد از نصب هم کدهای زیر رو در فایل
قرار میدیم:{ "extends": "airbnb", "plugins": [ "react" ], "parserOptions": { "ecmaFeatures": { "jsx": true } } }
میبینید که ویژگی jsx رو true کردیم تا linter به کدهای jsx گیر نده.
استفاده از یک نسخه مشخص ECMAScript
همونطور که میدونین ECMAScript هر سال یک نسخه جدید از Javascript رو ارائه میده و در اون ویژگیهای جدید رو معرفی میکنه. مقدار پیشفرض برای این ویژگی 5 هست که به معنی اینه که ES5 مورد استفاده قرار میگیره و اگر میخواید از نسخه ES5 به بالا استفاده کنید، باید در فایل
اون رو مشخص کنید.مثلا برای اینکه بخواید در پروژتون از ES6 استفاده کنید بصورت زیر عمل کنید:
{ "parserOptions": { "ecmaVersion": 6, } }
استفاده از حالت Strict mode
{ "parserOptions": { "ecmaFeatures": { "impliedStrict": true } } }
تنظیمات زیاد دیگهای هم وجود داره که خودتون میتونین اونا رو در این لینک مطالعه کنید.
ببخشید من یکم تازه کارم و یه سوالی داشتم ، در روش نصبی که از cmd استفاده میکنیم چه طوری بگیم این فایل برای کدوم پروژه ما نصب بشه؟یعنی بهتر بگم بعد از نصب از طریق cmd این فایل در چه پوشه ای زخیره میشه؟ کلا نحوه دانلود این افزونه ها و فریمورک های جاوااسکریپت از طریق cmd چه طوریه؟
شما در cmd باید با استفاده از دستور cd یا change directory به مسیر مورد نظرتون برید و در اونجا ابزارهای مورد نیازتون رو نصب کنید. هر جایی که این دستور رو نصب کنید همونجا نصب میشه و درون پوشه node_modules قرار داده میشن. اگر بصورت global یا سراسری هم نصب کنید فرقی نمیکنه که کجا قرار دارید و در همه جای سیستم میتونین به اون دسترسی داشته باشید
سایت فوق العاده عالیای دارید هر چه بگم کم گفتم
دمتون گرم
آموزش های حرفه ای با زبانی ساده و قابل فهم. واقعا سایت خوبی دارید ممنونم ازتون
موفق باشید دوست عزیز