11 KiB
استفاده از ویرایشگر کد: تسلط بر VSCode.dev
خوش آمدید!
این درس شما را از اصول اولیه تا استفاده پیشرفته از VSCode.dev—ویرایشگر کد قدرتمند مبتنی بر وب، هدایت میکند. شما یاد خواهید گرفت که چگونه با اطمینان کد را ویرایش کنید، پروژهها را مدیریت کنید، تغییرات را دنبال کنید، افزونهها را نصب کنید و مانند یک حرفهای همکاری کنید—همه اینها از طریق مرورگر، بدون نیاز به نصب.
اهداف یادگیری
در پایان این درس، شما قادر خواهید بود:
- به طور مؤثر از یک ویرایشگر کد برای هر پروژه، در هر مکان استفاده کنید
- با کنترل نسخه داخلی، کار خود را به راحتی دنبال کنید
- جریان کاری توسعه خود را با شخصیسازی و افزونههای ویرایشگر بهبود دهید
پیشنیازها
برای شروع، یک حساب کاربری رایگان GitHub ایجاد کنید که به شما امکان مدیریت مخازن کد و همکاری جهانی را میدهد. اگر هنوز حساب کاربری ندارید، اینجا یک حساب ایجاد کنید.
چرا از یک ویرایشگر کد مبتنی بر وب استفاده کنیم؟
یک ویرایشگر کد مانند VSCode.dev مرکز فرماندهی شما برای نوشتن، ویرایش و مدیریت کد است. با رابط کاربری ساده، ویژگیهای فراوان و دسترسی فوری از طریق مرورگر، شما میتوانید:
- پروژهها را روی هر دستگاهی ویرایش کنید
- از دردسر نصبها اجتناب کنید
- فوراً همکاری و مشارکت کنید
وقتی با VSCode.dev راحت شدید، آماده خواهید بود تا وظایف کدنویسی را از هر مکان و در هر زمان انجام دهید.
شروع کار با VSCode.dev
به VSCode.dev بروید—بدون نصب، بدون دانلود. ورود با GitHub دسترسی کامل را باز میکند، از جمله همگامسازی تنظیمات، افزونهها و مخازن شما. اگر درخواست شد، حساب GitHub خود را متصل کنید.
پس از بارگذاری، محیط کاری شما به این شکل خواهد بود:
، ⚙️ (تنظیمات)، فایلها، کنترل منبع و غیره.
- نوار کناری: بسته به آیکون انتخاب شده در نوار فعالیت تغییر میکند (به طور پیشفرض روی Explorer برای نمایش فایلها تنظیم شده است).
- ناحیه ویرایش/کد: بزرگترین بخش در سمت راست—جایی که شما واقعاً کد را ویرایش و مشاهده میکنید.
روی آیکونها کلیک کنید تا ویژگیها را بررسی کنید، اما برای حفظ جایگاه خود به Explorer بازگردید.
باز کردن یک مخزن GitHub
روش ۱: از طریق ویرایشگر
-
به VSCode.dev بروید. روی "Open Remote Repository" کلیک کنید.
 استفاده کنید.
 و 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 را فشار دهید و فایل شما فوراً ظاهر میشود.
 و حذفها (قرمز) هستند.
![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 ایجاد کنید
بررسی بیشتر و مطالعه خودآموز
- با مستندات رسمی وب VSCode عمیقتر شوید.
- ویژگیهای پیشرفته محیط کاری، میانبرهای صفحه کلید و تنظیمات را بررسی کنید.
اکنون آماده هستید تا کدنویسی، ایجاد و همکاری کنید—از هر مکان، روی هر دستگاه، با استفاده از VSCode.dev!
سلب مسئولیت:
این سند با استفاده از سرویس ترجمه هوش مصنوعی Co-op Translator ترجمه شده است. در حالی که ما تلاش میکنیم دقت را حفظ کنیم، لطفاً توجه داشته باشید که ترجمههای خودکار ممکن است شامل خطاها یا نادرستیها باشند. سند اصلی به زبان اصلی آن باید به عنوان منبع معتبر در نظر گرفته شود. برای اطلاعات حساس، ترجمه حرفهای انسانی توصیه میشود. ما مسئولیتی در قبال سوء تفاهمها یا تفسیرهای نادرست ناشی از استفاده از این ترجمه نداریم.