آموزش استفاده از گیت در ویژوال استودیو

ویژوال استودیو کد (VS Code) به یکی از محبوب ترین ویرایشگرها برای توسعه وب تبدیل شده است. این محبوبیت به لطف بسیاری از ویژگی های داخلی خود مانند یکپارچه سازی کنترل منبع، یعنی با Git، به دست آمده است. استفاده از قدرت Git از داخل VS Code می تواند گردش کار شما را کارآمدتر و قوی تر کند. در این مطلب قصد داریم تا نحوه استفاده از گیت در ویژوال استودیو را بررسی کنیم.

پیش نیازها

برای تکمیل این آموزش به موارد زیر نیاز دارید:

آموزش GIT
Git روی دستگاه شما نصب شده باشد. برای جزئیات بیشتر در مورد انجام این کار، آموزش کار با Git را مرور کنید.
نصب آخرین نسخه Visual Studio Code روی دستگاه شما.

آشنایی با صفحه کنترل منبع

اولین کاری که برای استفاده از یکپارچه سازی کنترل منبع باید انجام دهید این است که پروژه را به عنوان یک مخزن Git مقدار دهی کنید. Visual Studio Code را باز کنید و به ترمینال داخلی دسترسی پیدا کنید. با استفاده از میانبر صفحه کلید CTRL + ` در لینوکس، macOS یا ویندوز می توانید این مورد را باز کنید. در ترمینال خود، یک دایرکتوری برای یک پروژه جدید ایجاد کنید و به آن دایرکتوری تغییر دهید:

$mkdir git_test

$cd git_test

سپس، یک مخزن Git ایجاد کنید:

$git init

راه دیگر برای انجام این کار با ویژوال استودیو، باز کردن تب Source Control (آیکون شبیه یک شکاف در جاده است) در پانل سمت چپ است. انتخاب کنید و بعد، Open Folder را انتخاب کنید:

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

سپس، Initialize Repository را انتخاب کنید. اگر اکنون سیستم فایل خود را بررسی کنید، خواهید دید که شامل یک دایرکتوری git. می باشد. برای انجام این کار، از ترمینال استفاده کنید تا به فهرست پروژه خود بروید و تمام محتویات را فهرست کنید:

$ls -la

دایرکتوری .git را خواهید دید که ایجاد شده است:

$ Output.

$ ..

$ .git

اکنون که مخزن اولیه است، یک فایل به نام index.html اضافه کنید. پس از انجام این کار، در صفحه کنترل منبع مشاهده خواهید کرد که فایل جدید شما با حرف U در کنار آن نمایش داده می شود. U مخفف untracked file به معنای فایلی است که جدید یا تغییر یافته است، اما هنوز به مخزن اضافه نشده است:

اکنون می توانید روی نماد مثبت (+) در لیست فایل index.html کلیک کنید تا فایل را توسط مخزن ردیابی کنید. پس از اضافه شدن، حرف کنار فایل به A تغییر می کند. A نشان دهنده فایل جدیدی است که به مخزن اضافه شده است. برای انجام تغییرات خود، یک پیام commit را در کادر ورودی در بالای صفحه کنترل منبع تایپ کنید. سپس بر روی آیکون چک کلیک کنید تا commit انجام شود.

پس از انجام این کار، متوجه خواهید شد که هیچ تغییر معلقی وجود ندارد. در مرحله بعد، کمی محتوا به فایل index.html خود اضافه کنید. شما می توانید از میانبر Emmet برای ایجاد یک اسکلت HTML5 در VS Code با فشار دادن دکمه استفاده کنید! کلید و به دنبال آن کلید Tab. ادامه دهید و چیزی مانند عنوان <h1> در <body> اضافه کنید و آن را ذخیره کنید. در کنترل پنل منبع می بینید که فایل شما تغییر کرده است. این حرف M را در کنار آن نشان می دهد که مخفف فایلی است که اصلاح شده است:

برای تمرین، ادامه دهید و این تغییر را نیز انجام دهید. تا اینجا توانستیم با کنترل پنل منبع git در ویژوال استودیو آشنا شویم.

تفسیر نشانگرهای ناودان در ویژوال استودیو

در این مرحله به آنچه در VS Code “Gutter” گفته می شود نگاهی خواهید انداخت. ناودان ناحیه لاغری سمت راست شماره خط است. اگر قبلاً از تاشو کد استفاده کرده اید، نمادهای حداکثر و کوچک کردن در ناودان قرار دارند. بیایید با ایجاد یک تغییر کوچک در فایل index.html خود شروع کنیم، مانند تغییر در محتوای تگ <h1>. پس از انجام این کار، متوجه یک علامت عمودی آبی در ناودان خطی می شوید که تغییر داده اید.

علامت آبی عمودی نشان می دهد که خط کد مربوطه تغییر کرده است. حالا سعی کنید یک خط کد را حذف کنید. می توانید یکی از خطوط موجود در بخش <body> فایل index.html خود را حذف کنید. اکنون در ناودان توجه کنید که یک مثلث قرمز وجود دارد. مثلث قرمز نشان دهنده خط یا گروهی از خطوط است که حذف شده اند.

تغییر فایل های گیت در ویژوال استودیو

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

این مثال نشان می دهد که یک خط در نسخه فعلی اضافه شده است. در نهایت، در پایین بخشخود، یک خط کد جدید اضافه کنید و به نوار سبز رنگ توجه کنید. نوار سبز عمودی نشان دهنده خطی از کد است که اضافه شده است. این مثال نشانگرهای ناودان را برای یک خط اصلاح شده، یک خط حذف شده و یک خط جدید نشان می دهد:

کار با شعبه ها (Branches) در vsc

با حرکت به نوار پایین، توانایی ایجاد و تغییر شاخه ها را دارید. اگر به سمت چپ پایین ویرایشگر نگاهی بیندازید، باید نماد کنترل منبع (آیکنی که شبیه شکاف در جاده است) را ببینید که به احتمال زیاد با master یا نام شاخه فعلی کار می‌آید. نشانگر شعبه در نوار پایین VS کد نمایش داده می شود. برای ایجاد Branches، روی نام آن شعبه کلیک کنید. یک منو باید ظاهر شود که به شما امکان ایجاد یک شعبه جدید را می دهد:

ادامه دهید و یک شاخه جدید به نام تست ایجاد کنید.
اکنون، تغییری در فایل index.html خود ایجاد کنید که به این معنی است که شما در شاخه آزمایشی جدید هستید، مانند اضافه کردن متن این شاخه آزمایشی جدید است.
آن تغییرات را به شاخه آزمایشی انجام دهید. سپس، دوباره روی نام شعبه در پایین سمت چپ کلیک کنید تا به شاخه اصلی برگردید.
پس از بازگشت به شاخه اصلی، متوجه خواهید شد که متن این شاخه آزمایشی جدید متعهد به شاخه آزمایشی دیگر وجود ندارد.

کار با مخازن ریموت گیت از ویژوال استودیو

این آموزش گیت در ویژوال استودیو به طور عمیق به آن اشاره نمی کنیم، اما از طریق پنل کنترل منبع، به کار با مخازن راه دور دسترسی دارید. اگر قبل از اینکه با یک مخزن از راه دور کار کرده باشید، متوجه دستورات آشنا مانند کشیدن، همگام سازی، انتشار، ذخیره و غیره خواهید شد.

نصب برنامه های افزودنی مفید VS Code

VS Code نه تنها با بسیاری از عملکردهای داخلی برای Git ارائه می دهد، بلکه چندین افزونه بسیار محبوب نیز برای افزودن عملکرد اضافی نیز در آن وجود دارد.

Git Blame

این افزونه امکان مشاهده اطلاعات Git Blame را در نوار وضعیت خط فعلی انتخاب شده فراهم می کند. این ممکن است ترسناک به نظر برسد، اما جای نگرانی نیست، برنامه افزودنی Git Blame بیشتر در مورد عملی بودن است. ایده «سرزنش کردن» کسی به خاطر تغییر کد، کمتر به شرمساری او مربوط می شود و بیشتر در مورد یافتن فرد مناسبی است که برای برخی از کدهای خاص سوال بپرسد.

همانطور که در اسکرین شات می بینید، این افزونه یک پیام ظریف مربوط به خط فعلی کدی که روی آن کار می کنید در نوار ابزار پایین ارائه می دهد و توضیح می دهد که چه کسی تغییر را انجام داده و چه زمانی آن را انجام داده است.

Git History

اگرچه می‌توانید تغییرات فعلی را مشاهده کنید، تفاوت‌ها را انجام دهید و شاخه‌ها را با ویژگی‌های داخلی در VS Code مدیریت کنید، اما نمای عمیقی از تاریخچه Git شما ارائه نمی‌کند. پسوند Git History این مشکل را حل می کند.

همانطور که در تصویر زیر می بینید، این پسوند به شما امکان می دهد تاریخچه یک فایل، یک نویسنده معین، یک شاخه و غیره را به طور کامل بررسی کنید. برای فعال کردن پنجره Git History در زیر، روی یک فایل کلیک راست کرده و Git را انتخاب کنید: View: تاریخچه فایل:

Git Lens

GitLens قابلیت‌های Git تعبیه‌ شده در Visual Studio Code را افزایش می‌دهد. این به شما کمک می‌کند تا از طریق حاشیه‌ نویسی‌ها و لنز کد Git، نویسندگی کد را در یک نگاه تجسم کنید، به طور یکپارچه در مخزن Git پیمایش کرده و کاوش کنید، از طریق دستورات مقایسه قدرتمند، بینش‌های ارزشمندی به دست آورید، و موارد دیگر. افزونه Git Lens یکی از محبوب ترین ها در جامعه و همچنین قدرتمندترین است. در اکثر جهات، می تواند هر یک از دو افزونه قبلی را با عملکرد خود جایگزین کند.

برای اطلاعات “blame”، یک پیام ظریف در سمت راست خطی که در حال حاضر روی آن کار می کنید ظاهر می شود تا به شما اطلاع دهد که چه کسی تغییر را انجام داده است، چه زمانی آن را انجام داده است، و پیام commit مرتبط. برخی اطلاعات اضافی وجود دارد که هنگام نگه داشتن ماوس روی این پیام ظاهر می شود، مانند تغییر کد، زمان تغییر و برخی از موارد دیگر.

برای اطلاعات تاریخچه Git، این افزونه قابلیت های زیادی را ارائه می دهد. شما به راحتی به گزینه های زیادی از جمله نمایش تاریخچه فایل، انجام تفاوت ها با نسخه های قبلی، باز کردن یک نسخه خاص و موارد دیگر دسترسی دارید. برای باز کردن این گزینه‌ها، می‌توانید روی متنی در نوار وضعیت پایین کلیک کنید که حاوی نویسنده‌ای است که خط کد را ویرایش کرده است و چند وقت پیش آن را ویرایش کرده است.

با این کار پنجره زیر باز می شود:

این برنامه افزودنی پر از عملکرد است، و مدتی طول می کشد تا همه چیزهایی را که ارائه می دهد استفاده کنید.

جمع بندی

git در ویژوال استودیو فرایند های مختلفی را شامل می شود که در اینجا به صورت مختصر برخی از آنها را بررسی کردیم. شما می توانید به راحتی و تنها با استفاده آموزش گیت در ویژوال استودیو که در این مطلب ارائه کردیم، شروع کار را انجام دهید و در صورتی که این موارد را ادامه دهید، می توانید کار با گیت را به صورت حرفه ای در ویژوال استودیو کد انجام دهید.