<!--
CO_OP_TRANSLATOR_METADATA:
{
  "original_hash": "f8d4b0284f3fc1de7eb65073d8338cca",
  "translation_date": "2025-10-03T08:40:54+00:00",
  "source_file": "8-code-editor/1-using-a-code-editor/README.md",
  "language_code": "fa"
}
-->
***

# استفاده از ویرایشگر کد: تسلط بر [VSCode.dev](https://vscode.dev)

**خوش آمدید!**  
این درس شما را از اصول اولیه تا استفاده پیشرفته از [VSCode.dev](https://vscode.dev)—ویرایشگر کد قدرتمند مبتنی بر وب، هدایت می‌کند. شما یاد خواهید گرفت که چگونه با اطمینان کد را ویرایش کنید، پروژه‌ها را مدیریت کنید، تغییرات را دنبال کنید، افزونه‌ها را نصب کنید و مانند یک حرفه‌ای همکاری کنید—همه این‌ها از طریق مرورگر، بدون نیاز به نصب.

***

## اهداف یادگیری

در پایان این درس، شما قادر خواهید بود:

- به طور مؤثر از یک ویرایشگر کد برای هر پروژه، در هر مکان استفاده کنید
- با کنترل نسخه داخلی، کار خود را به راحتی دنبال کنید
- جریان کاری توسعه خود را با شخصی‌سازی و افزونه‌های ویرایشگر بهبود دهید

***

## پیش‌نیازها

برای شروع، **یک حساب کاربری رایگان [GitHub](https://github.com) ایجاد کنید** که به شما امکان مدیریت مخازن کد و همکاری جهانی را می‌دهد. اگر هنوز حساب کاربری ندارید، [اینجا یک حساب ایجاد کنید](https://github.com/).

***

## چرا از یک ویرایشگر کد مبتنی بر وب استفاده کنیم؟

یک **ویرایشگر کد** مانند VSCode.dev مرکز فرماندهی شما برای نوشتن، ویرایش و مدیریت کد است. با رابط کاربری ساده، ویژگی‌های فراوان و دسترسی فوری از طریق مرورگر، شما می‌توانید:

- پروژه‌ها را روی هر دستگاهی ویرایش کنید
- از دردسر نصب‌ها اجتناب کنید
- فوراً همکاری و مشارکت کنید

وقتی با VSCode.dev راحت شدید، آماده خواهید بود تا وظایف کدنویسی را از هر مکان و در هر زمان انجام دهید.

***

## شروع کار با VSCode.dev

به **[VSCode.dev](https://vscode.dev)** بروید—بدون نصب، بدون دانلود. ورود با GitHub دسترسی کامل را باز می‌کند، از جمله همگام‌سازی تنظیمات، افزونه‌ها و مخازن شما. اگر درخواست شد، حساب GitHub خود را متصل کنید.

پس از بارگذاری، محیط کاری شما به این شکل خواهد بود:

![Default VSCode.dev](../images/default-vscode-dev سه بخش اصلی از چپ به راست دارد:
- **نوار فعالیت:** آیکون‌هایی مانند 🔎 (جستجو)، ⚙️ (تنظیمات)، فایل‌ها، کنترل منبع و غیره.
- **نوار کناری:** بسته به آیکون انتخاب شده در نوار فعالیت تغییر می‌کند (به طور پیش‌فرض روی *Explorer* برای نمایش فایل‌ها تنظیم شده است).
- **ناحیه ویرایش/کد:** بزرگ‌ترین بخش در سمت راست—جایی که شما واقعاً کد را ویرایش و مشاهده می‌کنید.

روی آیکون‌ها کلیک کنید تا ویژگی‌ها را بررسی کنید، اما برای حفظ جایگاه خود به _Explorer_ بازگردید.

***

## باز کردن یک مخزن GitHub

### روش ۱: از طریق ویرایشگر

1. به [VSCode.dev](https://vscode.dev) بروید. روی **"Open Remote Repository"** کلیک کنید.

   ![Open remote repository](../../../../8-code-editor/images/open-remote-repository از _Command Palette_ (Ctrl-Shift-P، یا Cmd-Shift-P در مک) استفاده کنید.

   ![Palette Menu](../images/palette-menu.pngopen remote repository.”
   - گزینه را انتخاب کنید.
   - URL مخزن GitHub خود را وارد کنید (مثلاً `https://github.com/microsoft/Web-Dev-For-Beginners`) و Enter را فشار دهید.

اگر موفقیت‌آمیز باشد، کل پروژه بارگذاری شده و آماده ویرایش خواهد بود!

***

### روش ۲: باز کردن فوری از طریق URL

هر URL مخزن GitHub را تغییر دهید تا مستقیماً در VSCode.dev باز شود، با جایگزینی `github.com` با `vscode.dev/github`.  
مثال:

- GitHub: `https://github.com/microsoft/Web-Dev-For-Beginners`
- VSCode.dev: `https://vscode.dev/github/microsoft/Web-Dev-For-Beginners`

این ویژگی دسترسی سریع به هر پروژه‌ای را فوق‌العاده می‌کند.

***

## ویرایش فایل‌ها در پروژه شما

پس از باز کردن مخزن خود، می‌توانید:

### ۱. **ایجاد یک فایل جدید**
- در نوار کناری *Explorer*، به پوشه مورد نظر خود بروید یا از ریشه استفاده کنید.
- روی آیکون _‘New file ...’_ کلیک کنید.
- نام فایل خود را وارد کنید، Enter را فشار دهید و فایل شما فوراً ظاهر می‌شود.

![Create a new file](../images/create-new-file ۲. **ویرایش و ذخیره فایل‌ها**

- روی یک فایل در *Explorer* کلیک کنید تا در ناحیه کد باز شود.
- تغییرات مورد نیاز خود را انجام دهید.
- VSCode.dev تغییرات شما را به طور خودکار ذخیره می‌کند، اما می‌توانید با فشار دادن Ctrl+S به صورت دستی ذخیره کنید.

![Edit a file](../images/edit-a-file.png. **ردیابی و ثبت تغییرات با کنترل نسخه**

VSCode.dev دارای کنترل نسخه **Git** داخلی است!

- روی آیکون _'Source Control'_ کلیک کنید تا تمام تغییرات انجام شده را مشاهده کنید.
- فایل‌های موجود در پوشه `Changes` نشان‌دهنده اضافه‌ها (سبز) و حذف‌ها (قرمز) هستند.  
  ![View changes](../images/working-tree.png تغییرات را با کلیک روی `+` کنار فایل‌ها برای آماده‌سازی ثبت کنید.
- **لغو** تغییرات ناخواسته با کلیک روی آیکون بازگشت.
- یک پیام ثبت واضح تایپ کنید، سپس روی علامت چک کلیک کنید تا ثبت و ارسال شود.

برای بازگشت به مخزن خود در GitHub، منوی همبرگری در بالا سمت چپ را انتخاب کنید.

![Stage & commit changes](../images/edit-vscode.dev Up with Extensions

افزونه‌ها به شما امکان می‌دهند زبان‌ها، تم‌ها، دیباگرها و ابزارهای بهره‌وری را به VSCode.dev اضافه کنید—که زندگی کدنویسی شما را آسان‌تر و سرگرم‌کننده‌تر می‌کند.

### مرور و مدیریت افزونه‌ها

- روی آیکون **Extensions** در نوار فعالیت کلیک کنید.
- یک افزونه را در جعبه _'Search Extensions in Marketplace'_ جستجو کنید.

  ![Extension details](../images/extension-details:
  - **Installed**: تمام افزونه‌هایی که اضافه کرده‌اید
  - **Popular**: موارد محبوب در صنعت
  - **Recommended**: متناسب با جریان کاری شما

  ![View extensions](

  

***

### ۱. **نصب افزونه‌ها**

- نام افزونه را در جستجو وارد کنید، روی آن کلیک کنید و جزئیات را در ویرایشگر بررسی کنید.
- دکمه **آبی نصب** را در نوار کناری _یا_ در ناحیه اصلی کد فشار دهید.

  ![Install extensions](../images/install-extension ۲. **شخصی‌سازی افزونه‌ها**

- افزونه نصب شده خود را پیدا کنید.
- روی **آیکون چرخ‌دنده** کلیک کنید → گزینه _Extension Settings_ را انتخاب کنید تا رفتارها را به دلخواه تنظیم کنید.

  ![Modify extension settings](../images/extension-settings ۳. **مدیریت افزونه‌ها**
شما می‌توانید:

- **غیرفعال کردن:** به طور موقت یک افزونه را خاموش کنید در حالی که نصب شده باقی می‌ماند
- **حذف:** به طور دائمی آن را حذف کنید اگر دیگر نیازی به آن ندارید

  افزونه را پیدا کنید، روی آیکون چرخ‌دنده کلیک کنید و گزینه ‘Disable’ یا ‘Uninstall’ را انتخاب کنید، یا از دکمه‌های آبی در ناحیه کد استفاده کنید.

***

## تکلیف

مهارت‌های خود را آزمایش کنید: [یک وب‌سایت رزومه با استفاده از vscode.dev ایجاد کنید](https://github.com/microsoft/Web-Dev-For-Beginners/blob/main/8-code-editor/1-using-a-code-editor/assignment.md)

***

## بررسی بیشتر و مطالعه خودآموز

- با [مستندات رسمی وب VSCode](https://code.visualstudio.com/docs/editor/vscode-web?WT.mc_id=academic-0000-alfredodeza) عمیق‌تر شوید.
- ویژگی‌های پیشرفته محیط کاری، میانبرهای صفحه کلید و تنظیمات را بررسی کنید.

***

**اکنون آماده هستید تا کدنویسی، ایجاد و همکاری کنید—از هر مکان، روی هر دستگاه، با استفاده از VSCode.dev!**

---

**سلب مسئولیت**:  
این سند با استفاده از سرویس ترجمه هوش مصنوعی [Co-op Translator](https://github.com/Azure/co-op-translator) ترجمه شده است. در حالی که ما تلاش می‌کنیم دقت را حفظ کنیم، لطفاً توجه داشته باشید که ترجمه‌های خودکار ممکن است شامل خطاها یا نادرستی‌ها باشند. سند اصلی به زبان اصلی آن باید به عنوان منبع معتبر در نظر گرفته شود. برای اطلاعات حساس، ترجمه حرفه‌ای انسانی توصیه می‌شود. ما مسئولیتی در قبال سوء تفاهم‌ها یا تفسیرهای نادرست ناشی از استفاده از این ترجمه نداریم.