آموزش جامع نصب افزونه‌های کاربردی در Visual Studio Code و اتصال به GitHub

مدیریت نسخه، اتصال به GitHub، دوره جامع برنامه نویسی وب 1404/5/29
نویسنده: مدرس بهمن آبادی

آموزش جامع نصب افزونه‌های کاربردی در Visual Studio Code و اتصال به GitHub

Visual Studio Code + Git + GitHub

مقدمه

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

پیش‌نیازها

برای شروع، به موارد زیر نیاز است:

  • سیستم‌عامل ویندوز، مک، یا لینوکس.

  • حساب کاربری در GitHub (از github.com ایجاد کنید).

  • دسترسی به اینترنت برای دانلود افزونه‌ها و اتصال به GitHub.

  • نصب Git روی سیستم (برای دستورالعمل نصب، به روی نصب Git کلیک کنید).

گام اول: نصب Visual Studio Code

ابتدا به وب‌سایت رسمی VS Code (code.visualstudio.com) مراجعه کنید و نسخه مناسب سیستم‌عامل خود را دانلود کنید. فایل نصبی را اجرا کرده و مراحل نصب را با تنظیمات پیش‌فرض دنبال کنید. پس از نصب، VS Code را باز کنید و از اجرای صحیح آن مطمئن شوید.

گام دوم: نصب افزونه‌های کاربردی

افزونه‌ها قابلیت‌های VS Code را گسترش می‌دهند. در ادامه، افزونه‌های ضروری و کاربردی برای توسعه و اتصال به GitHub معرفی می‌شوند.

افزونه GitLens

ابزار GitLens برای مدیریت Git بسیار قدرتمند است و قابلیت‌هایی مانند نمایش تاریخچه کامیت‌ها، مقایسه تغییرات، و ردیابی تغییرات خط‌به‌خط را ارائه می‌دهد.

  • نصب: ابتدا به تب Extensions (آیکون مربع در نوار کناری یا Ctrl+Shift+X) بروید. عبارت GitLens را جستجو کنید و افزونه GitLens — Git supercharged را نصب کنید.

  • ویژگی‌ها:

    • نمایش اطلاعات کامیت (مانند نویسنده و تاریخ) در کنار خطوط کد.

    • ابزارهای بصری برای مقایسه شاخه‌ها و مشاهده تغییرات.

    • ادغام با GitHub برای مدیریت Pull Requestها.

افزونه GitHub Pull Requests and Issues

این افزونه امکان مدیریت Pull Requestها، Issues، و همکاری مستقیم با GitHub را از داخل VS Code فراهم می‌کند.

  • نصب: در تب Extensions، عبارت GitHub Pull Requests را جستجو کنید و افزونه GitHub Pull Requests and Issues را نصب کنید.

  • ویژگی‌ها:

    • ایجاد و بازبینی Pull Requestها.

    • مدیریت Issues و تخصیص وظایف.

    • اتصال مستقیم به مخازن GitHub.

افزونه C# (برای توسعه‌دهندگان دات‌نت)

Visual Studio Code + Git + GitHub

برای کار با سی‌شارپ یا پروژه‌های ASP.NET Core، این افزونه ضروری است.

  • نصب: عبارت C# را جستجو کنید و افزونه C# for Visual Studio Code (powered by OmniSharp) را نصب کنید.

  • ویژگی‌ها:

    • تکمیل خودکار کد (IntelliSense).

    • دیباگینگ پروژه‌های دات‌نت.

    • پشتیبانی از پروژه‌های .NET Core و .NET 8.

افزونه Prettier

ابزار Prettier کد را به‌صورت خودکار قالب‌بندی می‌کند و خوانایی آن را بهبود می‌بخشد.

  • نصب: عبارت Prettier را جستجو کنید و افزونه Prettier - Code formatter را نصب کنید.

  • پیکربندی: به File > Preferences > Settings بروید و گزینه Format On Save را فعال کنید:

"editor.formatOnSave": true

  • ویژگی‌ها:

    • قالب‌بندی خودکار کدهای C#، JavaScript، و غیره.

    • بهبود خوانایی کد.

افزونه Live Server

برای پروژه‌های وب، Live Server امکان اجرای سرور محلی با قابلیت بارگذاری مجدد خودکار را فراهم می‌کند.

  • نصب: عبارت Live Server را جستجو کنید و افزونه Live Server را نصب کنید.

  • استفاده: روی یک فایل HTML راست‌کلیک کنید و گزینه Open with Live Server را انتخاب کنید.

  • ویژگی‌ها:

    • پیش‌نمایش زنده صفحات وب.

    • بارگذاری خودکار تغییرات.

گام سوم: پیکربندی Git در VS Code

ابتدا نصب Git را بررسی کنید. در ترمینال VS Code (`Ctrl+``) دستور زیر را اجرا کنید:

git --version

خروجی باید نسخه Git (مثلاً git version 2.x.x) را نشان دهد. سپس اطلاعات کاربری Git را تنظیم کنید:

git config --global user.name "Your Name"
git config --global user.email "your.email@example.com"

گام چهارم: اتصال پروژه به GitHub

ایجاد مخزن محلی

ابتدا یک پوشه برای پروژه خود ایجاد کنید:

mkdir MyProject
cd MyProject

سپس مخزن Git را مقداردهی کنید:

git init

یک فایل نمونه (مثلاً Program.cs) ایجاد کنید:

 

using System;

class Program
{
    static void Main()
    {
        Console.WriteLine("Hello, GitHub!");
    }

}

فایل‌ها را به Staging اضافه کنید و کامیت کنید:

git add .
git commit -m "Initial commit"

ایجاد مخزن در GitHub

به حساب GitHub خود وارد شوید. روی New Repository کلیک کنید، نامی برای مخزن (مثلاً MyProject) انتخاب کنید، توضیحات (اختیاری) اضافه کنید، و گزینه Public یا Private را انتخاب کنید. گزینه Initialize this repository with a README را انتخاب نکنید. سپس روی Create repository کلیک کنید.

اتصال مخزن محلی به GitHub

آدرس URL مخزن GitHub را کپی کنید (مثلاً https://github.com/username/MyProject.git). مخزن GitHub را به مخزن محلی متصل کنید:

git remote add origin https://github.com/username/MyProject.git

 

تغییرات را به GitHub ارسال کنید:

git push -u origin main

احراز هویت با GitHub

برای امنیت، از Personal Access Token (PAT) استفاده کنید. در GitHub، به Settings > Developer settings > Personal access tokens > Tokens (classic) بروید، یک توکن جدید با دسترسی‌های repo ایجاد کنید، و آن را کپی کنید. هنگام اجرای git push، از نام کاربری GitHub و توکن به جای رمز عبور استفاده کنید.

گام پنجم: استفاده از افزونه‌ها برای مدیریت GitHub

کار با GitLens

فایل کدی را در VS Code باز کنید. تب GitLens در نوار کناری اطلاعاتی مانند نویسنده و تاریخ کامیت را نشان می‌دهد. برای مقایسه تغییرات، روی فایل راست‌کلیک کنید و گزینه Open Changes را انتخاب کنید.

مدیریت Pull Requestها با افزونه GitHub

افزونه GitHub Pull Requests and Issues را باز کنید (آیکون GitHub در نوار کناری). به حساب GitHub خود وارد شوید (با توکن یا احراز هویت مرورگر). یک شاخه جدید ایجاد کنید:

git checkout -b feature-branch

تغییرات را کامیت کنید و به GitHub ارسال کنید:

git add .
git commit -m "Add new feature"
git push origin feature-branch

در تب GitHub، یک Pull Request ایجاد کنید و آن را بازبینی کنید.

گام ششم: نکات پیشرفته

  • فایل .gitignore: برای پروژه‌های دات‌نت، فایل .gitignore را ایجاد کنید:

bin/
obj/
*.user

  • دیباگینگ با افزونه C#: برای دیباگ پروژه‌های سی‌شارپ، فایل launch.json را در پوشه .vscode تنظیم کنید.

  • اتوماسیون با Live Server: برای پروژه‌های وب، از Live Server برای تست سریع تغییرات استفاده کنید.

رفع مشکلات رایج

در صورت عدم شناسایی Git، مطمئن شوید که Git نصب شده و مسیر آن در متغیر PATH سیستم تنظیم شده است. اگر با خطای احراز هویت مواجه شدید، توکن PAT را بررسی کنید یا از SSH برای اتصال به GitHub استفاده کنید. برای مشکلات قالب‌بندی کد، تنظیمات Prettier را در settings.json بررسی کنید.

نتیجه‌گیری

نصب افزونه‌های کاربردی در Visual Studio Code و اتصال پروژه به GitHub فرآیندی است که بهره‌وری برنامه‌نویسان را به‌طور چشمگیری افزایش می‌دهد. افزونه‌هایی مانند GitLens، GitHub Pull Requests، و C# ابزارهای لازم برای مدیریت کد و همکاری تیمی را فراهم می‌کنند. با دنبال کردن این آموزش، می‌توانید محیط توسعه خود را بهینه کنید و پروژه‌های خود را به‌صورت حرفه‌ای مدیریت کنید. برای اطلاعات بیشتر، به مستندات VS Code (code.visualstudio.com/docs) و GitHub (docs.github.com) مراجعه کنید.