نحوه استفاده از Eslint مانند یک توسعه دهنده عاقل (JavaScript & TypeScript Edition)

آه از بین بردنبشر قهرمان Unsung که بین پایگاه کد شما ایستاده و هرج و مرج کامل است. و با این حال ، برخی از توسعه دهندگان هنوز هم با آن مانند یک ماده ستمگرانه رفتار می کنند و نه به عنوان زندگی در واقع.

اگر تا به حال مجبور شده اید از باتلاق از قالب بندی متناقض ، واردات کارت وحشی و گاه به گاه عبور کرده اید var (از آنجا که برخی از افراد فقط می خواهند جهان را سوزانده کنند) ، این راهنما برای شما مناسب است. بیایید این را یک بار و برای همیشه حل کنیم: Eslint اختیاری نیست.

چرا با Eslint زحمت می کشید؟ (با نام مستعار: چرا از خود متنفر هستید؟)

ببین ، من آن را دریافت می کنم. برخی از شما کد را به عنوان هنر ، یک بیان زیبا و آزاد از منطق و خلاقیت می بینید. این شایان ستایش است اما حدس بزنید چه؟ شما تنها کسی نیستید که آن را حفظ کنید.

در اینجا اتفاق می افتد وقتی از ESLINT استفاده نمی کنید:

• درخواست های کشش شما به جنگهای کوچک بر سر نیمه ها و تورفتگی تبدیل می شود.
• پایه کد شما شبیه به نقاشی جکسون پولاک است – اگر او با اسپاگتی نقاشی کرد.
• زبانه ها و فضاها قابل تشخیص نیستند و هرج و مرج سلطنت می کنند.
• اشکال زدایی به باستان شناسی تبدیل می شود ، به جز به جای کشف تاریخ ، شما رنج را کشف می کنید.

و نه ، سیستم نوع Typecript جایگزینی برای ESLINT نیست. این شما را از نوشتن زباله های غیرقابل خواندن باز نمی دارد-فقط زباله های غیرقابل خواندن شما را نوع بررسی می کند.

نصب ESLINT: زیرا ظاهرا ، این مشخص نیست

مرحله 1: آن را نصب کنید

بله ، واقعاً

برای جاوا اسکریپت:

npm install eslint --save-dev  
npx eslint --init

برای TypeScript (زیرا همه چیز مربوط به TypeScript به مراحل اضافی نیاز دارد):

npm install eslint @typescript-eslint/parser @typescript-eslint/eslint-plugin --save-dev

مرحله 2: آن را پیکربندی کنید

هنگام دویدن npx eslint --init، شما به برخی از سوالات پاسخ خواهید داد. عاقلانه را انتخاب کنید – یا فقط از پیش تعیین شده استفاده کنید زیرا هیچ کس وقت برای بحران های وجودی بر سر قوانین لینت ندارد.

برای TypeScript ، شما .eslintrc.json باید چیزی شبیه به این باشد:

{
 "parser": "@typescript-eslint/parser",  
 "extends": ["plugin:@typescript-eslint/recommended"]  
}

تبریک! شما اکنون Eslint دارید. اما راحت نشوید – هنوز هم چیزهای زیادی برای رفع آن وجود دارد.

مجموعه های معروف ESLINT: زیرا افراد باهوش تر کار را برای شما انجام دادند

• اریبن – این قانون برای کسانی که از ریزگرد بودن لذت می برند ، تعیین شده است.
• گوگل – زیرا اگر به اندازه کافی برای Overlords Silicon Valley خوب باشد ، برای شما به اندازه کافی خوب است.
• استاندارد – برای افرادی که قوانین سختگیرانه را دوست دارند اما از نیمه های مختلف متنفر هستند.
• متا (فیس بوک) – برای توسعه دهندگان React که دوست ندارند اعتراف کنند که واقعاً از React لذت می برند.
• دارای نسخه خاص – اگر از TypeScript استفاده می کنید ، فقط گسترش دهید plugin:@typescript-eslint/recommended و حرکت کنید.

به عنوان مثال پیکربندی ESLINT با استفاده از راهنمای سبک Airbnb:

{
 "extends": ["airbnb", "plugin:@typescript-eslint/recommended"]  
}

قوانین ESLINT را تغییر دهید: زیرا تیم شما نیازهای ویژه ای دارد

Eslint با مجموعه گسترده ای از قوانین – بیش از 500 مورد از آنها – طراحی شده است تا استانداردهای برنامه نویسی را اجرا کند ، اشکالات بالقوه را از بین ببرد و مطمئن شوید که کد شما مانند یک میمون منحرف نیست.

مدیریت قوانین ESLINT

نمونه ای از قوانین Tweaking در پیکربندی ESLINT خود:

{
 "rules": {
   "no-console": "warn",
   "eqeqeq": ["error", "always"],
   "complexity": ["warn", { "max": 10 }],
   "camelcase": ["error", { "properties": "always" }]
 }
}

قوانین خاص Typscript

به عنوان مثال تنظیمات قانون Typescript:

{
 "rules": {
   "@typescript-eslint/no-explicit-any": "error",
   "@typescript-eslint/naming-convention": [
     "error",
     { "selector": "variable", "format": ["camelCase"] }
   ]
 }
}

غیرفعال کردن قوانین درون خطی

console.log("Debugging"); // eslint-disable-line no-console

یا یک قانون را برای یک بلوک خاص غیرفعال کنید:

/* eslint-disable no-console */  
console.log("Debugging");  
console.log("More debugging");  
/* eslint-enable no-console */

مهمترین قوانین در هر پرونده

{
 "overrides": [  
   {
     "files": ["**/*.test.js"],  
     "rules": {  
       "no-unused-expressions": "off"  
     }  
   }  
 ]  
}

افزونه ها و گسترش ESLINT بیشتر

برای استفاده از افزونه ، آن را از طریق NPM نصب کرده و آن را در خود گسترش دهید .eslintrc:

npm install eslint-plugin-react --save-dev

{
 "extends": ["plugin:react/recommended"]  
}

اتوماسیون ESLINT

npx eslint . --fix

ایجاد یک قانون ESLINT سفارشی

module.exports = {
 meta: {
   type: "problem",
   docs: {
     description: "Ensure all 'await' expressions are wrapped in try/catch",
     category: "Best Practices",
     recommended: false,
   },
   messages: {
     unguardedAwait: "Unprotected 'await' detected. Wrap it in a try/catch to handle errors properly.",
   },
 },
 create(context) {
   return {
     AwaitExpression(node) {
       let parent = node.parent;
       while (parent) {
         if (parent.type === "TryStatement") {
           return;
         }
         parent = parent.parent;
       }
       context.report({ node, messageId: "unguardedAwait" });
     },
   };
 },
};

برای فعال کردن آن در .eslintrc.js:

module.exports = {
 rules: {
   "no-unguarded-await": "error",
 },
};

حرف آخر: لینت یا رنج می برید

یا از ESLINT استفاده کنید ، یا آماده شوید تا زندگی خود را برای اشکال زدایی یک پایگاه کد که به نظر می رسد توسط یک راکون با سوخت کافئین نوشته شده است ، بپردازید. انتخاب شما

درباره من سایت: https://danduh.me/
مرا دنبال کن