نحوه استفاده از ESLint با راهنمای سبک جاوا اسکریپت Airbnb

پایه کد خود را با این ابزار تمیز و سازگار کنید.

راهنمای سبک Airbnb مجموعه ای از دستورالعمل ها برای نوشتن کدهای تمیز و سازگار است. در سال 2012 منتشر شد و از آن زمان به یکی از محبوب ترین راهنماهای سبک برای پروژه های جاوا اسکریپت تبدیل شده است.

مجموعه‌ای از دستورالعمل‌ها را برای نوشتن کد ثابت ارائه می‌کند که با اعمال انواع قوانین سبک در تورفتگی‌ها، نظرات، حداکثر طول خط، قراردادهای نام‌گذاری متغیرها، نقل‌قول‌ها و تعاریف تابع، نگهداری آن آسان است. برای تنظیم راهنمای سبک Airbnb در پروژه جاوا اسکریپت، باید از ابزاری مانند ESLint استفاده کنید.

ESLint را نصب کنید

ESLint یک ابزار متن باز جاوا اسکریپت است که به توسعه دهندگان کمک می کند تا با یافتن و رفع مشکلات کدهای تمیز بنویسند. می تواند مشکلاتی مانند خطاهای نحوی، پارامترهای نامعتبر و متغیرهای تعریف نشده را در کد شما تشخیص دهد. هنگامی که ESLint را با تگ -fix اجرا می کنید، به طور خودکار هرگونه مشکل قابل رفع در کد را شناسایی و برطرف می کند و در نتیجه در زمان شما صرفه جویی می کند.

می‌توانید از ESLint برای اعمال راهنماهای سبک مانند راهنمای سبک Airbnb استفاده کنید.

برای شروع، دستور زیر را در ترمینال اجرا کنید تا ESLint به عنوان وابستگی توسعه دهنده نصب شود:

npm install --save-dev eslint eslint-config-airbnb

سپس ESLint را مقداردهی اولیه کنید.

npx eslint --init

از شما سؤالاتی در مورد پروژه خود پرسیده می شود. وقتی از شما خواسته شد:

? How would you like to use EsLint?

این گزینه را انتخاب کنید:

> To check syntax, find problems and enforce code style

به سوالات بعدی مطابق با پروژه خود پاسخ دهید تا زمانی که با درخواست زیر روبرو شوید.

? How would you like to define a style for your project?

سپس به صورت زیر پاسخ دهید.

> Use a popular style guide

راهنمای سبک Airbnb را برای درخواست بعدی انتخاب کنید.

? Which style guide do you want to follow?
> Airbnb: <https://github.com/airbnb/javascript>

در نهایت، وابستگی های مورد نیاز را با انتخاب “Yes” در اعلان بعدی نصب کنید.

پس از اتمام نصب، باید یک فایل .eslintsrc.json در ریشه پوشه خود داشته باشید.

سفارشی کردن راهنمای سبک Airbnb

راهنمای سبک Airbnb امکان سفارشی سازی را فراهم می کند. می توانید قوانین اضافی اضافه کنید یا قوانین موجود را در فایل پیکربندی .eslintsrc.json لغو کنید.

به عنوان مثال، برای مجاز کردن حداکثر 80 کاراکتر در هر خط، می توانید این قانون را در بخش قوانین اضافه کنید.

{
  "extends": [
        "plugin:react/recommended",
        "airbnb"
    ],
  "rules": {
    "max-len": ["error", { "code": 80 }]
  }
}

اجرای ESLint در package.json

برای اجرای ESLint یک اسکریپت در فایل package.json اضافه کنید.

"scripts": {
   "lint": "eslint"
}

با اجرای این دستور، اسکریپت lint را اجرا کنید تا هرگونه خطای پرده زدن را بررسی کنید.

npm run lint

همچنین می توانید یک اسکریپت برای رفع مشکلات کد با استفاده از پرچم –fix اضافه کنید.

"scripts": {
    "lint": "eslint",
    "lint:fix": "npm run lint -- --fix"
  },

اجرای npm run lint:fix در ترمینال به طور خودکار هر مشکلی را که لینتر می تواند برطرف کند برطرف می کند.

Linting را در Save در VS Code فعال کنید

اجرای یک اسکریپت هر بار که می خواهید کد خود را پر کنید ممکن است خسته کننده باشد. مراحل زیر را دنبال کنید تا linting در ذخیره در VS Code فعال شود.

1. به تب “Extensions” در سمت چپ پنجره VS Code بروید.
2. پسوند ESLint را جستجو کرده و نصب کنید.
3. پس از نصب برنامه افزودنی، تنظیمات VS Code را باز کنید (File > Preferences > Settings یا با فشار دادن Ctrl +،).
4. در ویرایشگر تنظیمات، عبارت “code actions on save” را جستجو کنید.
5. روی “Edit in settings.json” کلیک کنید و تنظیمات زیر را به فایل settings.json اضافه کنید.

{
 "editor.codeActionsOnSave": {
  
    "source.fixAll.eslint": true
  },
  "eslint.validate": ["javascript"],
  "eslint.run": "onSave",
}

این برنامه افزودنی ESLint را قادر می‌سازد تا هنگام ذخیره کد شما را به‌طور خودکار تصحیح کند.

مزایای استفاده از راهنمای سبک

مزیت اصلی استفاده از یک راهنمای سبک مانند راهنمای سبک Airbnb این است که به شما کمک می کند یک پایه کد ثابت را حفظ کنید. این در یک تیم مفید است زیرا توسعه دهندگان می توانند به راحتی پایه کد را درک کنند و به آن کمک کنند. همچنین به شما کمک می کند تا بهترین شیوه ها را اجرا کنید و از اشتباهات رایج کدنویسی جلوگیری کنید.

منبع مقاله