هنگام شروع یک پروژه جدید، تجربه ای وجود دارد که در بین توسعه دهندگان React بسیار رایج است. احساس خوبی در مورد تمیز و خوانایی کد خود می کنید، فقط تعداد انگشت شماری از توابع یا مؤلفه ها را می نویسید و به آرامی مشاهده می کنید که پایگاه کد شما به آشوب می رسد. متوجه می‌شوید که از بالا به پایین، چپ به راست پیمایش می‌کنید، خطوط کد را به طور مکرر می‌خوانید و از فایلی به فایل دیگر می‌روید. هنگامی که یک عملکرد را تمام کردید، امیدوارید که دیگر مجبور نشوید آن فایل را باز کنید زیرا می دانید چقدر طول می کشد تا فقط یک تابع یا متغیر را پیدا کنید – چه رسد به ویرایش یا تغییر آن عملکرد.
در این مقاله، نقش قالب‌بندی را در تمیز و خوانا کردن پایگاه کد شما بررسی می‌کنیم. ما همچنین استانداردهای صنعت و بهترین شیوه ها را برای دستیابی به قالب بندی سازگار بررسی خواهیم کرد.
چرا کد خود را فرمت کنید؟
قالب بندی برای خوانایی و نگهداری کد شما بسیار مهم است. اما چگونه؟
کد با فرمت خوب به جداسازی بصری قسمت های مختلف کد شما کمک می کند و پیروی از جریان منطقی را آسان تر می کند. تورفتگی مناسب رابطه بین اجزاء، عناصر یا انتخابگرهای والد و فرزند را برجسته می کند. قالب بندی ثابت توانایی شما را برای اشکال زدایی سریع، رفع و نگهداری کدتان افزایش می دهد. هنگام همکاری با اعضای تیم که از قوانین قالب بندی یکسانی پیروی می کنند، درک کد یکدیگر بدون سردرگمی آسان تر می شود.
کاهش بار ذهنی یکی دیگر از مزایای قالب بندی خوب است. کد پاک به تلاش ذهنی کمتری برای درک نیاز دارد و به شما این امکان را می دهد که به جای رمزگشایی بلوک های کد با فرمت ضعیف، بیشتر روی حل مشکلات جدید تمرکز کنید.
وقتی یک تیم به یک سبک ثابت پایبند باشد، همه می‌توانند بدون اتلاف وقت در قالب‌بندی مجدد بلوک‌های کد برای مطابقت با ترجیحات شخصی مشارکت کنند. قالب بندی خوب نیز نظم و حرفه ای را به پایگاه کد می آورد.
در نهایت، سازگاری ابزار یک مزیت قابل توجه است. توسعه‌دهندگان از لینترها، افزونه‌ها و IDEهایی استفاده می‌کنند که به قالب‌بندی ثابت متکی هستند. برای استفاده کامل از این ابزارها و بهره مندی از ویژگی هایی مانند تکمیل خودکار و برجسته کردن خطا، پایگاه کد شما نیاز به قالب بندی مناسب دارد. اما چگونه می توان به آن دست یافت؟
در قالب بندی یک پایگاه کد چه چیزی وجود دارد؟
وقتی صحبت از قالب‌بندی یک پایگاه کد می‌شود، معمولاً به چندین جنبه اشاره می‌کنیم: تورفتگی، طول خط، قراردادهای نامگذاری، فاصله، پرانتز و پرانتز، استفاده مداوم از نقل قول‌ها، استفاده از نیم دو نقطه، ساختار فایل و پوشه و استفاده مناسب از نظرات. اجازه دهید اکنون به استانداردهای صنعت در مورد نحوه استفاده و پیاده سازی آنها بپردازیم.
تورفتگی
تورفتگی استفاده از فضای سفید برای سازماندهی بصری کد در یک سلسله مراتب است. استاندارد صنعتی در اینجا استفاده از 2 یا 4 فاصله و اجتناب از استفاده از زبانه ها است. با توجه به راهنمای سبک Airbnb برای جاوا اسکریپت و واکنش باید از 2 فاصله استفاده کنید. این به این دلیل است که سطوح تودرتو ثابت را حفظ می کند و خوانایی کلی کد شما را بهبود می بخشد.
طول خط
طول خط در اینجا به این اشاره دارد که کدی که روی یک خط می نویسید تا چه اندازه باید گسترش یابد. استاندارد صنعت در اینجا حفظ یک خط بین 80 تا 100 کاراکتر است. بسیاری از راهنماها به خصوص PEP 8 و زیباتر 80 کاراکتر را توصیه می کنند. این به این دلیل است که از اسکرول افقی جلوگیری می کند و معمولاً در اندازه های مختلف صفحه نمایش به خوبی کار می کند. اما آیا این بدان معناست که باید در کدنویسی شما حساب شود؟ نه، حداقل نه زمانی که از ویرایشگرهای کد مانند vscode استفاده می کنید. تصویر زیر به شما نشان می دهد که چگونه می توانید تعداد کاراکترهای یک خط خاص را تشخیص دهید. تصویر زیر نشان می دهد که شما در خط 44 هستید و در نویسه 93 قرار دارید. اگر تنظیمات پیش‌فرض را لمس نکرده باشید، می‌توانید آن را در پایین سمت راست ویرایشگر vsCode خود پیدا کنید.
قراردادهای نامگذاری
این به مجموعه‌ای از قوانین برای نامگذاری چیزها به روشی ثابت اشاره دارد. نامگذاری واضح، معنی‌دار و دقیق برای نوشتن کدی که خواندن، درک و نگهداری آسان باشد ضروری است. محبوب‌ترین نامگذاری برای متغیرها و توابع استفاده از آن است. camelCase (روشی برای جدا کردن کلمات در یک عبارت با بزرگ کردن حرف اول هر کلمه و عدم استفاده از فاصله). از آنجایی که برای کامپوننت‌های react باید از PascalCase استفاده شود، به‌ویژه زیرا حرف اول یک جزء باید بزرگ باشد همانطور که در React Docs بیان شده است و برای ثابت‌ها مورد فوقانی snake توصیه می‌شود. این بخش نامگذاری عدالت را انجام نداده است. در اینجا این مقاله خیلی طولانی خواهد شد. اگر علاقه مند به یادگیری بیشتر هستید، لطفاً این مقاله در مورد قرارداد نامگذاری را بررسی کنید.
فاصله گذاری
For Spacing توصیه می شود برای وضوح، فضاهای اطراف عملگرها را اضافه کنید، به ویژه از آنجایی که عملگرهای خاصی هنگامی که به صورت ترکیبی استفاده می شوند، عملیات متفاوتی را انجام می دهند. همچنین توصیه می شود که از خطوط خالی برای جداسازی بخش های منطقی کد استفاده شود. سعی کنید با استفاده از خطوط خالی اعلان متغیر فضایی و انتساب از اعلان تابع و منطق را گروه بندی کنید.
پرانتز و پرانتز
طبق راهنمای سبک Airbnb، هیچ بریس آویزان نباید وجود داشته باشد، به این معنی که شما باید تمام بریس‌های بسته یا پرانتز را به‌درستی با بریس‌های باز یا پرانتز مربوطه در یک راستا قرار دهید.
نقل قول های ثابت
هنگام استفاده از نقل‌قول‌ها، توصیه می‌شود که از یک نقل قول '' یا دو نقل قول “” در سراسر پروژه استفاده کنید، در حالی که سعی می‌کنید از هرگونه استفاده غیرضروری از ترکیبی از هر دو جلوگیری کنید.
نقطه ویرگول
درست مانند نقل قول‌ها، تصمیمتان را بگیرید یا برای پایان دادن به عبارات، تکالیف و خطوط کد خود از نقطه ویرگول استفاده کنید یا اصلاً از نقطه ویرگول استفاده نکنید، اما هر تصمیمی که دارید، لطفاً به آن پایبند باشید و سازگار باشید. من شخصاً استفاده از نقطه ویرگول را برای جلوگیری از مشکلاتی که با قرار دادن نقطه ویرگول خودکار همراه است، توصیه می کنم.
ساختار فایل و پوشه
برای ساختار فایل و پوشه عواملی مانند اندازه پروژه و پشته فناوری بیشتر ساختار فایل‌ها و پوشه‌های شما را تعیین می‌کنند، اما 2 قانون کلی وجود دارد که باید رعایت کنید. 1 فایل های مرتبط را با هم گروه بندی کنید. 2 از نام فایل های معنی دار استفاده کنید.
نظرات
یک پایگاه کد به راحتی می تواند با کد خوشه بندی شود، بنابراین با استفاده بیش از حد از نظرات، آن را بدتر نکنید. اگر قوانین نامگذاری خوبی دارید و کدهای پاکیزه و بدون ضد الگو می نویسید، به طور کلی باید بتوانید از استفاده از نظرات خودداری کنید. درست مثل رابرت سی. مارتین می‌گوید «نظرات ذاتا بد نیستند»، اما اغلب «نشانه‌ای از عدم بیان مقصود در خود کد هستند». نظرات در کد شما جای دارند، آنها نشان می‌دهند که چرا یک کد وجود دارد نه اینکه یک بلوک کد چگونه کار می‌کند. ، بنابراین اگر کد شما شامل یک تصمیم غیر واضح یا یک راه حل است، باید از نظرات استفاده شود. بنابراین از ضد الگوها اجتناب کنید تا نیاز به توضیح نحوه کد خود را از بین ببرید و از توضیح آنچه که کد قبلاً بیان می کند خودداری کنید.
در زیر پیوندهایی به برخی از راهنماهای سبک تنظیم صنعت وجود دارد
راهنمای سبک جاوا اسکریپت Airnbnb.
راهنمای سبک StandardJs
پیش فرض های زیباتر
.
بنابراین در نتیجه، قالب بندی صحیح کد شما فقط برای زیبایی شناسی نیست. خوانایی، قابلیت نگهداری و مقیاس‌پذیری پایگاه کد شما را به شدت بهبود می‌بخشد و با اتخاذ استانداردهای صنعتی محبوب می‌توانید از سازگار و تمیز بودن کد خود اطمینان حاصل کنید.
