<!--
CO_OP_TRANSLATOR_METADATA:
{
  "original_hash": "1ba61d96a11309a2a6ea507496dcf7e5",
  "translation_date": "2025-08-29T14:35:25+00:00",
  "source_file": "8-code-editor/1-using-a-code-editor/README.md",
  "language_code": "fa"
}
-->
# استفاده از ویرایشگر کد

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

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

در این درس، شما یاد می‌گیرید که:

- از یک ویرایشگر کد در یک پروژه کدنویسی استفاده کنید
- تغییرات را با کنترل نسخه پیگیری کنید
- ویرایشگر را برای توسعه سفارشی‌سازی کنید

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

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

### مقدمه

ویرایشگر کد یک ابزار ضروری برای نوشتن برنامه‌ها و همکاری در پروژه‌های کدنویسی موجود است. وقتی اصول اولیه یک ویرایشگر و نحوه استفاده از ویژگی‌های آن را درک کنید، می‌توانید آن‌ها را هنگام نوشتن کد به کار ببرید.

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

[VSCode.dev](https://vscode.dev) یک ویرایشگر کد مبتنی بر وب است. برای استفاده از آن نیازی به نصب هیچ چیزی ندارید، درست مانند باز کردن هر وب‌سایت دیگری. برای شروع با این ویرایشگر، لینک زیر را باز کنید: [https://vscode.dev](https://vscode.dev). اگر وارد [GitHub](https://github.com/) نشده‌اید، دستورالعمل‌ها را دنبال کنید تا وارد شوید یا یک حساب جدید ایجاد کنید و سپس وارد شوید.

پس از بارگذاری، باید چیزی شبیه به این تصویر ببینید:

![پیش‌فرض VSCode.dev](../../../../translated_images/default-vscode-dev.5d06881d65c1b3234ce50cd9ed3b0028e6031ad5f5b441bcbed96bfa6311f6d0.fa.png)

سه بخش اصلی وجود دارد که از سمت چپ به راست حرکت می‌کنند:

1. _نوار فعالیت_ که شامل چند آیکون مانند ذره‌بین 🔎، چرخ‌دنده ⚙️ و چند آیکون دیگر است.
2. نوار فعالیت گسترش‌یافته که به طور پیش‌فرض به _Explorer_ تنظیم شده و به آن _نوار کناری_ گفته می‌شود.
3. و در نهایت، ناحیه کد در سمت راست.

روی هر یک از آیکون‌ها کلیک کنید تا منوی متفاوتی نمایش داده شود. پس از اتمام، روی _Explorer_ کلیک کنید تا به جایی که شروع کرده‌اید بازگردید.

وقتی شروع به ایجاد یا تغییر کد می‌کنید، این کار در بزرگ‌ترین ناحیه سمت راست انجام می‌شود. از این ناحیه برای مشاهده کد موجود نیز استفاده خواهید کرد، که در مرحله بعدی انجام می‌دهید.

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

اولین چیزی که نیاز دارید باز کردن یک مخزن GitHub است. روش‌های مختلفی برای باز کردن یک مخزن وجود دارد. در این بخش، دو روش مختلف برای باز کردن یک مخزن را مشاهده می‌کنید تا بتوانید تغییرات را شروع کنید.

### 1. با استفاده از ویرایشگر

از خود ویرایشگر برای باز کردن یک مخزن از راه دور استفاده کنید. اگر به [VSCode.dev](https://vscode.dev) بروید، دکمه‌ای با عنوان _"Open Remote Repository"_ خواهید دید:

![باز کردن مخزن از راه دور](../../../../translated_images/open-remote-repository.bd9c2598b8949e7fc283cdfc8f4050c6205a7c7c6d3f78c4b135115d037d6fa2.fa.png)

همچنین می‌توانید از _پالت دستورات_ استفاده کنید. پالت دستورات یک جعبه ورودی است که می‌توانید هر کلمه‌ای که بخشی از یک دستور یا عمل است را تایپ کنید تا دستور مناسب را پیدا کنید. از منوی بالا سمت چپ استفاده کنید، سپس _View_ را انتخاب کنید و سپس _Command Palette_ را انتخاب کنید، یا از میانبر صفحه‌کلید زیر استفاده کنید: Ctrl-Shift-P (در MacOS، Command-Shift-P).

![منوی پالت](../../../../translated_images/palette-menu.4946174e07f426226afcdad707d19b8d5150e41591c751c45b5dee213affef91.fa.png)

پس از باز شدن منو، _open remote repository_ را تایپ کنید و سپس اولین گزینه را انتخاب کنید. مخازن متعددی که شما بخشی از آن‌ها هستید یا اخیراً باز کرده‌اید نمایش داده می‌شوند. همچنین می‌توانید از یک URL کامل GitHub برای انتخاب یکی استفاده کنید. از URL زیر استفاده کنید و آن را در جعبه وارد کنید:

```
https://github.com/microsoft/Web-Dev-For-Beginners
```

✅ اگر موفق باشید، تمام فایل‌های این مخزن در ویرایشگر متن بارگذاری می‌شوند.

### 2. با استفاده از URL

همچنین می‌توانید مستقیماً از یک URL برای بارگذاری یک مخزن استفاده کنید. به عنوان مثال، URL کامل مخزن فعلی [https://github.com/microsoft/Web-Dev-For-Beginners](https://github.com/microsoft/Web-Dev-For-Beginners) است، اما می‌توانید دامنه GitHub را با `VSCode.dev/github` جایگزین کنید و مخزن را مستقیماً بارگذاری کنید. URL حاصل این خواهد بود: [https://vscode.dev/github/microsoft/Web-Dev-For-Beginners](https://vscode.dev/github/microsoft/Web-Dev-For-Beginners).

## ویرایش فایل‌ها

پس از باز کردن مخزن در مرورگر/vscode.dev، مرحله بعدی ایجاد به‌روزرسانی‌ها یا تغییرات در پروژه است.

### 1. ایجاد یک فایل جدید

می‌توانید یک فایل را در یک پوشه موجود ایجاد کنید یا آن را در دایرکتوری/پوشه اصلی ایجاد کنید. برای ایجاد یک فایل جدید، مکانی/دایرکتوری را که می‌خواهید فایل در آن ذخیره شود باز کنید و آیکون _'New file ...'_ را در نوار فعالیت _(سمت چپ)_ انتخاب کنید، یک نام به آن بدهید و Enter را بزنید.

![ایجاد یک فایل جدید](../../../../translated_images/create-new-file.2814e609c2af9aeb6c6fd53156c503ac91c3d538f9cac63073b2dd4a7631f183.fa.png)

### 2. ویرایش و ذخیره یک فایل در مخزن

استفاده از vscode.dev زمانی مفید است که بخواهید به سرعت پروژه خود را به‌روزرسانی کنید بدون اینکه نیاز به بارگذاری نرم‌افزار محلی داشته باشید.  
برای به‌روزرسانی کد خود، روی آیکون 'Explorer' که در نوار فعالیت قرار دارد کلیک کنید تا فایل‌ها و پوشه‌های موجود در مخزن را مشاهده کنید.  
یک فایل را انتخاب کنید تا در ناحیه کد باز شود، تغییرات خود را اعمال کنید و ذخیره کنید.

![ویرایش یک فایل](../../../../translated_images/edit-a-file.52c0ee665ef19f08119d62d63f395dfefddc0a4deb9268d73bfe791f52c5807a.fa.png)

پس از اتمام به‌روزرسانی پروژه، آیکون _`source control`_ را انتخاب کنید که شامل تمام تغییرات جدیدی است که در مخزن خود ایجاد کرده‌اید.

برای مشاهده تغییراتی که در پروژه خود ایجاد کرده‌اید، فایل(ها) را در پوشه `Changes` در نوار فعالیت گسترش‌یافته انتخاب کنید. این کار یک 'درخت کاری' برای شما باز می‌کند تا تغییراتی که در فایل ایجاد کرده‌اید را به صورت بصری مشاهده کنید. رنگ قرمز نشان‌دهنده حذف از پروژه است، در حالی که رنگ سبز نشان‌دهنده اضافه شدن است.

![مشاهده تغییرات](../../../../translated_images/working-tree.c58eec08e6335c79cc708c0c220c0b7fea61514bd3c7fb7471905a864aceac7c.fa.png)

اگر از تغییراتی که ایجاد کرده‌اید راضی هستید، روی پوشه `Changes` حرکت کنید و دکمه `+` را برای مرحله‌بندی تغییرات کلیک کنید. مرحله‌بندی به معنای آماده‌سازی تغییرات شما برای ثبت در GitHub است.

اگر با برخی تغییرات راحت نیستید و می‌خواهید آن‌ها را لغو کنید، روی پوشه `Changes` حرکت کنید و آیکون `undo` را انتخاب کنید.

سپس، یک `پیام ثبت` تایپ کنید _(توضیحی از تغییراتی که در پروژه ایجاد کرده‌اید)_، روی آیکون `تیک` کلیک کنید تا تغییرات را ثبت و ارسال کنید.

پس از اتمام کار روی پروژه خود، آیکون `منوی همبرگری` در بالا سمت چپ را انتخاب کنید تا به مخزن در github.com بازگردید.

![مرحله‌بندی و ثبت تغییرات](../../../../8-code-editor/images/edit-vscode.dev.gif)

## استفاده از افزونه‌ها

نصب افزونه‌ها در VSCode به شما امکان می‌دهد ویژگی‌های جدید اضافه کنید و گزینه‌های محیط توسعه سفارشی را در ویرایشگر خود برای بهبود جریان کاری توسعه خود اضافه کنید. این افزونه‌ها همچنین به شما کمک می‌کنند از چندین زبان برنامه‌نویسی پشتیبانی کنید و اغلب یا افزونه‌های عمومی هستند یا افزونه‌های مبتنی بر زبان.

برای مرور لیست تمام افزونه‌های موجود، روی آیکون _`Extensions`_ در نوار فعالیت کلیک کنید و شروع به تایپ نام افزونه در فیلد متنی با عنوان _'Search Extensions in Marketplace'_ کنید.  
لیستی از افزونه‌ها را مشاهده خواهید کرد که هر کدام شامل **نام افزونه، نام ناشر، یک توضیح یک‌جمله‌ای، تعداد دانلودها** و **رتبه‌بندی ستاره‌ای** است.

![جزئیات افزونه](../../../../translated_images/extension-details.9f8f1fd4e9eb2de5069ae413119eb8ee43172776383ebe2f7cf640e11df2e106.fa.png)

همچنین می‌توانید تمام افزونه‌های نصب‌شده قبلی را با گسترش پوشه _`Installed`_، افزونه‌های محبوب مورد استفاده اکثر توسعه‌دهندگان در پوشه _`Popular`_ و افزونه‌های پیشنهادی برای شما را بر اساس کاربران در همان فضای کاری یا فایل‌های اخیراً بازشده در پوشه _`Recommended`_ مشاهده کنید.

![مشاهده افزونه‌ها](../../../../translated_images/extensions.eca0e0c7f59a10b5c88be7fe24b3e32cca6b6058b35a49026c3a9d80b1813b7c.fa.png)

### 1. نصب افزونه‌ها

برای نصب یک افزونه، نام آن را در فیلد جستجو تایپ کنید و پس از ظاهر شدن در نوار فعالیت گسترش‌یافته، روی آن کلیک کنید تا اطلاعات بیشتری درباره افزونه در ناحیه کد مشاهده کنید.

می‌توانید یا روی دکمه _نصب آبی‌رنگ_ در نوار فعالیت گسترش‌یافته کلیک کنید یا از دکمه نصب که در ناحیه کد ظاهر می‌شود استفاده کنید.

![نصب افزونه‌ها](../../../../8-code-editor/images/install-extension.gif)

### 2. سفارشی‌سازی افزونه‌ها

پس از نصب افزونه، ممکن است نیاز داشته باشید رفتار آن را تغییر دهید و بر اساس ترجیحات خود سفارشی‌سازی کنید. برای انجام این کار، آیکون Extensions را انتخاب کنید و این بار افزونه شما در پوشه _Installed_ ظاهر می‌شود، روی آیکون _**چرخ‌دنده**_ کلیک کنید و به _Extensions Setting_ بروید.

![تنظیمات افزونه](../../../../translated_images/extension-settings.21c752ae4f4cdb78a867f140ccd0680e04619d0c44bb4afb26373e54b829d934.fa.png)

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

پس از نصب و استفاده از افزونه، vscode.dev گزینه‌هایی برای مدیریت افزونه شما بر اساس نیازهای مختلف ارائه می‌دهد. به عنوان مثال، ممکن است بخواهید:

- **غیرفعال کردن:** _(وقتی موقتاً نیازی به افزونه ندارید اما نمی‌خواهید آن را به طور کامل حذف کنید)_

    افزونه نصب‌شده را در نوار فعالیت گسترش‌یافته انتخاب کنید > روی آیکون چرخ‌دنده کلیک کنید > 'Disable' یا 'Disable (Workspace)' را انتخاب کنید **یا** افزونه را در ناحیه کد باز کنید و روی دکمه آبی Disable کلیک کنید.

- **حذف نصب:** افزونه نصب‌شده را در نوار فعالیت گسترش‌یافته انتخاب کنید > روی آیکون چرخ‌دنده کلیک کنید > 'Uninstall' را انتخاب کنید **یا** افزونه را در ناحیه کد باز کنید و روی دکمه آبی Uninstall کلیک کنید.

---

## تکلیف

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

## مرور و مطالعه شخصی

بیشتر درباره [VSCode.dev](https://code.visualstudio.com/docs/editor/vscode-web?WT.mc_id=academic-0000-alfredodeza) و برخی از ویژگی‌های دیگر آن بخوانید.

---

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