16 KiB
استفاده از ویرایشگر کد
این درس اصول اولیه استفاده از VSCode.dev، یک ویرایشگر کد مبتنی بر وب را پوشش می‌دهد تا بتوانید بدون نصب هیچ نرم‌افزاری روی کامپیوتر خود، کدهای خود را تغییر دهید و در یک پروژه مشارکت کنید.
اهداف یادگیری
در این درس، شما یاد می‌گیرید که:
- از یک ویرایشگر کد در یک پروژه کدنویسی استفاده کنید
- تغییرات را با کنترل نسخه پیگیری کنید
- ویرایشگر را برای توسعه سفارشی‌سازی کنید
پیش‌نیازها
قبل از شروع، باید یک حساب کاربری در GitHub ایجاد کنید. به GitHub بروید و اگر هنوز حسابی ندارید، یک حساب کاربری ایجاد کنید.
مقدمه
ویرایشگر کد یک ابزار ضروری برای نوشتن برنامه‌ها و همکاری در پروژه‌های کدنویسی موجود است. وقتی اصول اولیه یک ویرایشگر و نحوه استفاده از ویژگی‌های آن را درک کنید، می‌توانید آن‌ها را هنگام نوشتن کد به کار ببرید.
شروع به کار با VSCode.dev
VSCode.dev یک ویرایشگر کد مبتنی بر وب است. برای استفاده از آن نیازی به نصب هیچ چیزی ندارید، درست مانند باز کردن هر وب‌سایت دیگری. برای شروع با این ویرایشگر، لینک زیر را باز کنید: https://vscode.dev. اگر وارد GitHub نشده‌اید، دستورالعمل‌ها را دنبال کنید تا وارد شوید یا یک حساب جدید ایجاد کنید و سپس وارد شوید.
پس از بارگذاری، باید چیزی شبیه به این تصویر ببینید:
سه بخش اصلی وجود دارد که از سمت چپ به راست حرکت می‌کنند:
- نوار فعالیت که شامل چند آیکون مانند ذره‌بین 🔎، چرخ‌دنده ⚙️ و چند آیکون دیگر است.
- نوار فعالیت گسترش‌یافته که به طور پیش‌فرض به Explorer تنظیم شده و به آن نوار کناری گفته می‌شود.
- و در نهایت، ناحیه کد در سمت راست.
روی هر یک از آیکون‌ها کلیک کنید تا منوی متفاوتی نمایش داده شود. پس از اتمام، روی Explorer کلیک کنید تا به جایی که شروع کرده‌اید بازگردید.
وقتی شروع به ایجاد یا تغییر کد می‌کنید، این کار در بزرگ‌ترین ناحیه سمت راست انجام می‌شود. از این ناحیه برای مشاهده کد موجود نیز استفاده خواهید کرد، که در مرحله بعدی انجام می‌دهید.
باز کردن یک مخزن GitHub
اولین چیزی که نیاز دارید باز کردن یک مخزن GitHub است. روش‌های مختلفی برای باز کردن یک مخزن وجود دارد. در این بخش، دو روش مختلف برای باز کردن یک مخزن را مشاهده می‌کنید تا بتوانید تغییرات را شروع کنید.
1. با استفاده از ویرایشگر
از خود ویرایشگر برای باز کردن یک مخزن از راه دور استفاده کنید. اگر به VSCode.dev بروید، دکمه‌ای با عنوان "Open Remote Repository" خواهید دید:
همچنین می‌توانید از پالت دستورات استفاده کنید. پالت دستورات یک جعبه ورودی است که می‌توانید هر کلمه‌ای که بخشی از یک دستور یا عمل است را تایپ کنید تا دستور مناسب را پیدا کنید. از منوی بالا سمت چپ استفاده کنید، سپس View را انتخاب کنید و سپس Command Palette را انتخاب کنید، یا از میانبر صفحه‌کلید زیر استفاده کنید: Ctrl-Shift-P (در MacOS، Command-Shift-P).
پس از باز شدن منو، 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 است، اما می‌توانید دامنه GitHub را با VSCode.dev/github جایگزین کنید و مخزن را مستقیماً بارگذاری کنید. URL حاصل این خواهد بود: https://vscode.dev/github/microsoft/Web-Dev-For-Beginners.
ویرایش فایل‌ها
پس از باز کردن مخزن در مرورگر/vscode.dev، مرحله بعدی ایجاد به‌روزرسانی‌ها یا تغییرات در پروژه است.
1. ایجاد یک فایل جدید
می‌توانید یک فایل را در یک پوشه موجود ایجاد کنید یا آن را در دایرکتوری/پوشه اصلی ایجاد کنید. برای ایجاد یک فایل جدید، مکانی/دایرکتوری را که می‌خواهید فایل در آن ذخیره شود باز کنید و آیکون 'New file ...' را در نوار فعالیت (سمت چپ) انتخاب کنید، یک نام به آن بدهید و Enter را بزنید.
2. ویرایش و ذخیره یک فایل در مخزن
استفاده از vscode.dev زمانی مفید است که بخواهید به سرعت پروژه خود را به‌روزرسانی کنید بدون اینکه نیاز به بارگذاری نرم‌افزار محلی داشته باشید.
برای به‌روزرسانی کد خود، روی آیکون 'Explorer' که در نوار فعالیت قرار دارد کلیک کنید تا فایل‌ها و پوشه‌های موجود در مخزن را مشاهده کنید.
یک فایل را انتخاب کنید تا در ناحیه کد باز شود، تغییرات خود را اعمال کنید و ذخیره کنید.
پس از اتمام به‌روزرسانی پروژه، آیکون source control را انتخاب کنید که شامل تمام تغییرات جدیدی است که در مخزن خود ایجاد کرده‌اید.
برای مشاهده تغییراتی که در پروژه خود ایجاد کرده‌اید، فایل(ها) را در پوشه Changes در نوار فعالیت گسترش‌یافته انتخاب کنید. این کار یک 'درخت کاری' برای شما باز می‌کند تا تغییراتی که در فایل ایجاد کرده‌اید را به صورت بصری مشاهده کنید. رنگ قرمز نشان‌دهنده حذف از پروژه است، در حالی که رنگ سبز نشان‌دهنده اضافه شدن است.
اگر از تغییراتی که ایجاد کرده‌اید راضی هستید، روی پوشه Changes حرکت کنید و دکمه + را برای مرحله‌بندی تغییرات کلیک کنید. مرحله‌بندی به معنای آماده‌سازی تغییرات شما برای ثبت در GitHub است.
اگر با برخی تغییرات راحت نیستید و می‌خواهید آن‌ها را لغو کنید، روی پوشه Changes حرکت کنید و آیکون undo را انتخاب کنید.
سپس، یک پیام ثبت تایپ کنید (توضیحی از تغییراتی که در پروژه ایجاد کرده‌اید)، روی آیکون تیک کلیک کنید تا تغییرات را ثبت و ارسال کنید.
پس از اتمام کار روی پروژه خود، آیکون منوی همبرگری در بالا سمت چپ را انتخاب کنید تا به مخزن در github.com بازگردید.
استفاده از افزونه‌ها
نصب افزونه‌ها در VSCode به شما امکان می‌دهد ویژگی‌های جدید اضافه کنید و گزینه‌های محیط توسعه سفارشی را در ویرایشگر خود برای بهبود جریان کاری توسعه خود اضافه کنید. این افزونه‌ها همچنین به شما کمک می‌کنند از چندین زبان برنامه‌نویسی پشتیبانی کنید و اغلب یا افزونه‌های عمومی هستند یا افزونه‌های مبتنی بر زبان.
برای مرور لیست تمام افزونه‌های موجود، روی آیکون Extensions در نوار فعالیت کلیک کنید و شروع به تایپ نام افزونه در فیلد متنی با عنوان 'Search Extensions in Marketplace' کنید.
لیستی از افزونه‌ها را مشاهده خواهید کرد که هر کدام شامل نام افزونه، نام ناشر، یک توضیح یک‌جمله‌ای، تعداد دانلودها و رتبه‌بندی ستاره‌ای است.
همچنین می‌توانید تمام افزونه‌های نصب‌شده قبلی را با گسترش پوشه Installed، افزونه‌های محبوب مورد استفاده اکثر توسعه‌دهندگان در پوشه Popular و افزونه‌های پیشنهادی برای شما را بر اساس کاربران در همان فضای کاری یا فایل‌های اخیراً بازشده در پوشه Recommended مشاهده کنید.
1. نصب افزونه‌ها
برای نصب یک افزونه، نام آن را در فیلد جستجو تایپ کنید و پس از ظاهر شدن در نوار فعالیت گسترش‌یافته، روی آن کلیک کنید تا اطلاعات بیشتری درباره افزونه در ناحیه کد مشاهده کنید.
می‌توانید یا روی دکمه نصب آبی‌رنگ در نوار فعالیت گسترش‌یافته کلیک کنید یا از دکمه نصب که در ناحیه کد ظاهر می‌شود استفاده کنید.
2. سفارشی‌سازی افزونه‌ها
پس از نصب افزونه، ممکن است نیاز داشته باشید رفتار آن را تغییر دهید و بر اساس ترجیحات خود سفارشی‌سازی کنید. برای انجام این کار، آیکون Extensions را انتخاب کنید و این بار افزونه شما در پوشه Installed ظاهر می‌شود، روی آیکون چرخ‌دنده کلیک کنید و به Extensions Setting بروید.
3. مدیریت افزونه‌ها
پس از نصب و استفاده از افزونه، vscode.dev گزینه‌هایی برای مدیریت افزونه شما بر اساس نیازهای مختلف ارائه می‌دهد. به عنوان مثال، ممکن است بخواهید:
-
غیرفعال کردن: (وقتی موقتاً نیازی به افزونه ندارید اما نمی‌خواهید آن را به طور کامل حذف کنید)
افزونه نصب‌شده را در نوار فعالیت گسترش‌یافته انتخاب کنید > روی آیکون چرخ‌دنده کلیک کنید > 'Disable' یا 'Disable (Workspace)' را انتخاب کنید یا افزونه را در ناحیه کد باز کنید و روی دکمه آبی Disable کلیک کنید.
-
حذف نصب: افزونه نصب‌شده را در نوار فعالیت گسترش‌یافته انتخاب کنید > روی آیکون چرخ‌دنده کلیک کنید > 'Uninstall' را انتخاب کنید یا افزونه را در ناحیه کد باز کنید و روی دکمه آبی Uninstall کلیک کنید.
تکلیف
ایجاد یک وب‌سایت رزومه با استفاده از vscode.dev
مرور و مطالعه شخصی
بیشتر درباره VSCode.dev و برخی از ویژگی‌های دیگر آن بخوانید.
سلب مسئولیت:
این سند با استفاده از سرویس ترجمه هوش مصنوعی Co-op Translator ترجمه شده است. در حالی که ما برای دقت تلاش می‌کنیم، لطفاً توجه داشته باشید که ترجمه‌های خودکار ممکن است شامل خطاها یا نادرستی‌هایی باشند. سند اصلی به زبان اصلی آن باید به عنوان منبع معتبر در نظر گرفته شود. برای اطلاعات حساس، ترجمه حرفه‌ای انسانی توصیه می‌شود. ما هیچ مسئولیتی در قبال سوءتفاهم‌ها یا تفسیرهای نادرست ناشی از استفاده از این ترجمه نداریم.