🔧🚫 استفاده از NGIF و NGFOR را متوقف کنید: جریان کنترل جدید Angular را با ESLINT اجرا کنید

هنوز تایپ کردن *ngFor, *ngIf, and *ngSwitch از عادت؟ شما تنها نیستید پس از سالها کار با Legacy Angular ، حافظه عضلانی من تغییر به آخرین نحو جریان کنترل زاویه ای را دشوار کرد. اما با یک ترفند ساده ، سرانجام تغییر را انجام دادم – و هم کد و هم عملکرد من را بهبود بخشید. در این پست ، من به شما نشان خواهم داد که چگونه دستورالعمل های قدیمی را خندق کنید و در هیچ زمان با جریان کنترل جدید Angular راحت شوید

ترفند ساده؟ بگذارید Eslint کار را برای شما انجام دهد
به جای اینکه خودم را مجبور کنم به یاد بیاورم ، به Eslint اجازه می دهم مرا در این عمل بگیرد.

Angular اکنون از قوانین ESLINT پشتیبانی می کند که هنگام استفاده از دستورالعمل های ساختاری میراث مانند می تواند هشدار دهد یا خطا کند *ngFor, *ngIf, and *ngSwitch و در عوض پیشنهاد کنید از نحو جریان کنترل جدید استفاده کنید @for, @if, @switchبشر

قبل از قانون eslint:

پس از قانون eslint:
پس از افزودن ویرایشگر قانون قانون ، خطا را بالا می برد

راه حل: این قانون ESLINT را به پروژه خود اضافه کنید
برای آسانتر کردن سوئیچ ، می توانید قانون زیر را به Eslint.config.js خود در بخش HTML Rules اضافه کنید:

  {
    files: ["**/*.html"],
    extends: [
      ...angular.configs.templateRecommended,
      ...angular.configs.templateAccessibility,
    ],
    rules: {
      "@angular-eslint/template/prefer-control-flow": "error"
    },
  }

"@angular-eslint/template/prefer-control-flow": "error"

پس از اضافه کردن این قانون ، NG LINT را اجرا کنید تا نمونه های دستورالعمل های قدیمی را بدست آورید:

 12:37  error  Use built-in control flow instead of directive ngIf  @angular-eslint/template/prefer-control-flow
  16:15  error  Use built-in control flow instead of directive ngIf  @angular-eslint/template/prefer-control-flow

مزایای استفاده از نحو جدید
جابجایی به نحو جریان کنترل جدید Angular فقط مربوط به کد پاک تر نیست – این نیز در مورد بهبود عملکرد است. دستورالعمل های جدید برای کار سریعتر بهینه شده اند که می تواند تفاوت قابل توجهی در برنامه های بزرگتر ایجاد کند.

افکار نهایی
جابجایی از *ngif ، *ngfor و *ngswitch به نحو جریان کنترل جدید Angular می تواند یک عادت سخت برای شکستن باشد – اما با قوانین راست eslint در محل ، انتقال بی دردسر می شود. شما بدون نیاز به یادآوری مداوم از نحو جدید ، کد پاک کننده و عملکردی بیشتری را می نویسید.

آیا می خواهید آن را یک قدم جلوتر بردارید؟ این قانون خط را با یک تنظیم مرحله بندی تعهد ترکیب کنید تا به طور خودکار از تولید جریان کنترل میراث جلوگیری کنید تا آن را به پایگاه کد خود تبدیل کنید. در این راهنمای مرتبط ، من شما را از طریق نحوه انجام دقیقاً این کار طی می کنم:
👉 کیفیت کد را مانند یک تیم بزرگ فناوری بدون پرداخت هزینه اتوماسیون گران حفظ کنید

با ترکیب قوانین ESLINT با قلاب های قبل از ساخت ، اطمینان حاصل می کنید که تیم شما به طور مداوم از آخرین روشهای زاویه ای با تلاش دستی صفر پیروی می کند.

🖼 بنر با استفاده از Openai Sora تولید می شود