هماهنگ سازی کد استایل تیم در تمام IDE های JetBrains

JetBrains IDEs
JetBrains IDEs

برنامه نویس ها معمولا بعد از به پایان رسوندن یک قسمت از کد عادت دارن که با زدن یک کلید میانبر کد استایل خودشونو مرتب کنن، این مرتب کردن هم قطعا تغییراتی توی کد ایجاد میکنه و از طرف دیگه هم که Git حواسش به همه چیز هست و همه تغییراتو ثبت میکنه در ادامه هم کد commit و سپس push و در انتها هم میرسه به Merge Request و شخصی که وظیفه Review کردن کد رو برعهده داره شروع میکنه به بازنگری کد ها، حالا تغییرات این Merge Request شامل چه چیزهایی هست؟ هم شامل کد های جدید یا تغییر در بین کد های قدیمی و همچنین شامل تغییراتی که IDE برای مرتب کردن کد استایل اعمال کرده (تغییرات کد استایلی شامل درست کردن فاصله ها، تبدیل کردن if های یک خطی به if های بلاکی و… است که البته به تنظیمات IDE برنامه نویس مربوط میشه!!) خب کسی که داره کد رو بازنگری میکنه بیشتر دنبال تغییرات مهم است و پیدا کردن این تغییرات میان تغییرات کد استایل به مرور سخت و اذیت کننده است، اما با این حال اگر فرض کنیم که تعداد افراد تیم بین 3 تا نهایت 5 نفر باشه مشکل حادی دیده نمیشه و ممکنه این تغییرات در بعضی Merge Request ها باشه و در بعضی هم نباشه چون معمولا هر کس توی تیم فقط با بعضی از فایل ها کار میکند و خب وقتی یکبار بر اساس تنظیمات IDE خودش کد استایل اون فایل تنظیم شده باشه دفعه بعد که دوباره از کلید میانبر برای مرتب کردن فایل استفاده کنه دیگر تغییری در فایل ایجاد نمیشه.

حالا مشکل از کجا شروع میشه؟

از اونجایی که تعداد افراد تیم رشد میکنه و کنارش پروژه هم بزرگ میشه و کلی فایل داره که کد استایلشون بر اساس تنظیمات IDE برنامه نویسان قبلی و کنونی اش تنظیم شده، اینجاست که دیگه خوندن Merge Request ها تقریبا ناممکن میشه و تقریبا تو Merge Request همه این تغییرات کد استایل دیده میشه.


حالا باید چیکار کنیم؟

برای حل این موضوع راه حل های زیادی وجود داره که من از یکی از اون ها استفاده کردم که در ادامه میخوام توضیحش بدم.

کاری که من تصمیم گرفتم بکنم این بود که اول سعی کردم با توجه به پیشینه پروژه و همچنین زبان پروژه که PHP بود یک استاندارد انتخاب کنم که در نهایت به PSR-12 رسیدم که از این به بعد همه ی فایل ها بر اساس اون مرتب بشن خب حالا لازمه که افراد پروژه این تنظیمات رو داشته باشند و IDE اون ها هم بر اساس این تنظیمات کد هاشونو مرتب کنه برای این کار هم یک فایل داخل پروژه ساختم که شامل همه این تنظیمات بود و از طریق git بین همه افراد تیم این فایل مشترک شد بعدش باید همه افراد تیم IDE خودشونو تنظیم می کردن که از این فایل تنظیمات رو بخونه.

خب تا اینجا یک تنظیمات مشخصی رو انتخاب کردیم و از طریق git با همه افراد پروژه به اشتراک گذاشتیم و IDE های خودمون رو هم تنظیم کردیم که این فایل بخونه خب انتظار میره از این جا به بعد مشکل حل بشه و در کد های جدید کد استایل همه یکی بشه ولی در مورد کد های قدیمی پروژه که زیاد هم بودند و استایل یکسانی هم نداشتند چی؟

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

تعداد زیادی از فایل های پروژه (تقریبا همه فایل های پروژه) طی این Merge Request تغییر کرد و کد استایل شون درست شد. این روش کد استایل تمام فایل های پروژه رو درست کرد و تنظیمات IDE تمام افراد تیم رو همه یکسان کرد ولی تضمینی نمیده که دیگه تو Merge Request های بعدی تیم شاهد تغییرات کد استایل نباشیم چون ممکنه تنظیمات IDE یکی از افراد تیم از فایل مشترک نخونه و بر اساس تنظیمات دیگری کد هارو مرتب که و خود برنامه نویس هم متوجه این موضوع نباشه و کد های خودشو Push کنه، روش ها و ابزار های دیگه هم وجود داره که موقع Push شدن کد استایل هارو چک میکنه حالا میتونه اخطار بده یا از Push جلوگیری کنه یا اصلا خودش درست کنه، من در مرحله اول به این روش بسنده کردم و مدیریت این موضوع رو به دست برنامه نویس های تیم و Reviewer ها سپردم.

خب حالا بریم که این مراحل رو در IDE های شرکت JetBrains توضیح بدم. D:

تنظیم کردن کد استایل برای زبان های برنامه نویسی در IDE

برای این کار از مسیر file -> setting یا با استفاده از کلید میانبر Alt + Ctrl + S به صفحه تنظیمات بروید.

سپس به صفحه ی تنظیمات کد استایل از مسیر Editor -> CodeStyle -> PHP یا زبان مورد نظر خودتون برید.

تو این پنجر میشه تنظیمات مربوط به کد استایل رو مشخص کرد. برای تنظیم کد استایل با استاندارد های اون زبان نیازی نیست دستی این کارو انجام بدید؛ بالای این پنجره سمت راست روی Set From کلیک کنید و از لیست باز شده استاندارد مورد نظر خودتونو انتخاب کنید.

درست کردن فایل تنظیمات در پروژه

ابتدا اگر فایلی به نام editorconfig. در پروژه تون وجود داره پاکش کنید.

.editorconfig
.editorconfig

حالا روی پوشه پروژه تون راست کلیک کنید و از گزینه New گزینه editorconfig رو انتخاب کنید.

phpstorm create file
phpstorm create file

با انتخاب این گزینه پنجره زیر نمایش داده میشه که شما میتونید زبان هایی که میخواهید تنظیماتش داخل این فایل نوشته بشه رو انتخاب کنید.

فایل ایجاد شده رو توی git اضافه کنید و Push کنید که با بقیه افراد تیم بهش دسترسی داشته باشید.


تنظیم کردن IDE بر اساس فایل config

کافیه این گزینه رو در تنظیمات انتخاب کنید.


مرتب کردن فایل های قدیمی پروژه

برای این کار روی پوشه پروژه راست کلیک کنید و گزینه Reformat Code را انتخاب کنید.

در پنجره باز شده گزینه Cleanup Code را تیک بزنید و روی run کلیک کنید.


و تمام !!! D:

خوشحال میشم تو کامنت ها یا به صورت ایمیل بگید که شما از چه روشی تو تیم خودتون برای این کار استفاده میکنید.

ممنون از توجهتون، میتونید با لایک، کامنت و اشتراک گذاری این پست باعث دلگرمی من بشید، شادُ خندونُ سلامت باشید. (:

https://virgool.io/laravel-community/%D9%84%D8%A7%D8%B1%D8%A7%D9%88%D9%84-8-%D8%AF%D8%B1-8-%D8%AF%D9%82%DB%8C%D9%82%D9%87-uldctdxc8jnt
https://virgool.io/@Rasool.e/%DB%8C%DA%A9%D8%A8%D8%A7%D8%B1-%D8%A8%D8%B1%D8%A7%DB%8C-%D9%87%D9%85%DB%8C%D8%B4%D9%87-position-%D9%87%D8%A7-%D8%AF%D8%B1-css-yigbex4ipvxc