افزایش بهره وری کد VS – برچسب های سفارشی برای فایل های React Component

Summarize this content to 400 words in Persian Lang
تا به حال احساس کرده اید که در دریایی از غرق شده اید index.ts فایل ها؟ به من اعتماد کن، من آنجا بوده ام. وقتی روی یک پروژه عظیم React کار می‌کردم، خودم را دائماً در پیچ و خم فایل‌هایی با ظاهر یکسان گم کردم. اما بعد به طور تصادفی به یک تغییر دهنده بازی برخوردم: ویژگی برچسب های سفارشی VS Code. اجازه دهید به شما بگویم که چگونه زندگی برنامه نویسی من را متحول کرد.

مشکل با index.ts اضافه بار

این را تصور کنید: شما در اعماق منطقه هستید و با چندین مؤلفه دستکاری می کنید، زمانی که ناگهان باید آن یکی خاص را پیدا کنید. index.ts فایل. شما نوار جستجو را باز می کنید و بام! سیل نتایج غیر قابل تشخیص. ناامید کننده، درست است؟ این دقیقاً همان جایی بود که تا زمانی که جادوی برچسب های سفارشی را کشف کردم.

برچسب های سفارشی را وارد کنید

بنابراین، معامله با این برچسب های سفارشی چیست؟ به طور خلاصه، آنها روش VS Code هستند که به شما امکان می دهند نحوه نمایش نام فایل ها در برگه های ویرایشگر و نوار جستجو را شخصی سازی کنید. برای ما توسعه دهندگان React که در آن غرق می شوند index.ts فایل‌ها، مثل این است که برای ما یک طناب نجات پرتاب کنید.

راه اندازی برچسب های سفارشی مرحله به مرحله

1. برچسب های سفارشی را فعال کنید

ابتدا باید برچسب های سفارشی را در تنظیمات VS Code خود فعال کنید. فقط این خط را به settings.json خود اضافه کنید:

“workbench.editor.customLabels.enabled”: true

وارد حالت تمام صفحه شوید

از حالت تمام صفحه خارج شوید

2. تعریف الگوهای برای index.ts فایل ها

حالا جادوی واقعی اینجاست. این بیت را اضافه کنید تا به VS Code بگویید جایگزین آن عمومی شود index.ts نام ها با نام دایرکتوری والد خود:

“workbench.editor.customLabels.patterns”: {
“**/index.{ts,js,tsx,jsx}”: “${dirname}”
}

وارد حالت تمام صفحه شوید

از حالت تمام صفحه خارج شوید

3. برای دایرکتوری های خاص سفارشی کنید

اگر شما هم مثل من هستید و پوشه خاصی دارید که همه اجزای شما در آن قرار دارند، می توانید فقط آن دایرکتوری را هدف قرار دهید:

“workbench.editor.customLabels.patterns”: {
“components/*/index.{ts,js,tsx,jsx}”: “${dirname}”
}

وارد حالت تمام صفحه شوید

از حالت تمام صفحه خارج شوید

مزایای برچسب های سفارشی

افزایش خوانایی: به جای یک دریا از index.tsx برگه ها، «دکمه»، «هدر» و غیره را خواهید دید. مثل این است که ویرایشگر شما ناگهان یاد گرفته به زبان شما صحبت کند!
جستجوی کارآمد: جستجو برای اجزای خاص به یک نسیم تبدیل شد.
کاهش بار ذهنی: دیگر نمی توان حدس زد کدام index.ts داشتم نگاه میکردم

بنابراین، دوستان کدنویس، اگر از بازی “Where’s Waldo” خسته شده اید؟ باشما index.ts فایل‌ها، برچسب‌های سفارشی را امتحان کنید. این یک تغییر کوچک است که ضربه بزرگی در زندگی روزانه شما در برنامه نویسی ایجاد می کند. به من اعتماد کنید، آینده شما از شما تشکر خواهد کرد!

"workbench.editor.customLabels.enabled": true

"workbench.editor.customLabels.patterns": {
  "**/index.{ts,js,tsx,jsx}": "${dirname}"
}

"workbench.editor.customLabels.patterns": {
  "components/*/index.{ts,js,tsx,jsx}": "${dirname}"
}