در این آموزش، با ویژگیهای پیشرفته هوش مصنوعی در Visual Studio Code که توسط GitHub Copilot قدرت گرفتهاند، آشنا میشوید. یاد میگیرید چگونه هنگام کدنویسی در ویرایشگر از هوش مصنوعی استفاده کنید، سؤالاتی درباره کد بپرسید و یک جلسه ویرایش برای اعمال تغییرات در چندین فایل بهصورت همزمان آغاز کنید.
در این آموزش از زبانهای JavaScript و TypeScript استفاده شده، اما توجه داشته باشید که Copilot برای زبانها و فریمورکهای متنوع دیگری نیز آموزش دیده است.
پیشنیازها
VS Code باید روی سیستم شما نصب شده باشد. میتوانید آن را از وبسایت Visual Studio Code دریافت کنید.
دسترسی به GitHub Copilot. برای راهاندازی آن، مراحل مربوط به «راهاندازی GitHub Copilot در VS Code» را دنبال کنید.
💡 نکته:
اگر اشتراک Copilot ندارید یا سازمان شما به شما دسترسی نداده، میتوانید مستقیماً از داخل VS Code ثبتنام کرده و به صورت رایگان از Copilot استفاده کنید. این حالت شامل تعداد محدودی پیشنهاد کد (completions) و چت در ماه است.
برای شروع استفاده از قابلیتهای هوش مصنوعی در VS Code، نیاز به انجام تنظیمات خاصی نیست. به محض شروع تایپ کد در ویرایشگر، Copilot به طور خودکار پیشنهاداتی برای تکمیل کد (code completions) ارائه میدهد تا به شما در کدنویسی سریعتر و کارآمدتر کمک کند.
VS Code را باز کرده و یک فایل جاوااسکریپت جدید با نام
calculator.jsایجاد کنید.در این فایل، شروع به تایپ کد زیر کنید:
- class Calculator
مشاهده خواهید کرد که به محض تایپ، پیشنهادهایی برای پیادهسازی کلاس Calculator بهصورت متن خاکستری کمرنگ (معروف به ghost text) ظاهر میشود.
🔁 توجه داشته باشید که این پیشنهادات ممکن است بسته به شرایط کمی متفاوت باشند، زیرا مدلهای زبانی بزرگ بهصورت غیرقطعی (non-deterministic) کار میکنند.
دریافت اولین پیشنهاد کد
برای پذیرش پیشنهاد، کلید Tab را فشار دهید.
تبریک! شما اولین پیشنهاد کدنویسی مبتنی بر هوش مصنوعی را پذیرفتید. با ادامه تایپ، Copilot پیشنهاد کد را بهصورت پویا بهروزرسانی میکند.
برای هر ورودی خاص، ممکن است چندین پیشنهاد وجود داشته باشد. کد زیر را داخل کلاس تایپ کنید تا یک متد فاکتوریل اضافه شود:
factorial(n) {
میتوانید از دکمههای جهتدار یا میانبرهای صفحهکلید برای مشاهده پیشنهاد بعدی (Alt+]) یا قبلی (Alt+[) استفاده کنید.
تکمیل کد با کمک هوش مصنوعی میتواند در تولید کدهای تکراری یا قالبهای آماده (boilerplate) به شما کمک کند، تا بتوانید در جریان توسعه باقی بمانید و تمرکزتان را روی وظایف پیچیدهتر کدنویسی حفظ کنید.
استفاده از گفتوگوی درونویرایشگر برای ایجاد یک وبسرور ساده
با استفاده از هوش مصنوعی مبتنی بر چت، میتوانید به زبان طبیعی سوالاتی در مورد کدتان بپرسید یا از آن بخواهید برایتان کد تولید کند. چت درونویرایشگر (Editor inline chat) یک رابط گفتوگو مستقیماً در محیط ویرایشگر فراهم میکند تا بتوانید در مورد کد فعال سؤال بپرسید یا کدی تولید کنید.
بیایید از چت درونویرایشگر برای تولید یک وبسرور ساده با Express استفاده کنیم:
ابتدا یک فایل TypeScript جدید به نام
server.tsبه فضای کاری خود اضافه کنید.اکنون کلید Ctrl+I را فشار دهید تا رابط چت درونویرایشگر باز شود.
چت درونویرایشگر به شما امکان میدهد درباره کد موجود در ویرایشگر فعال سؤال بپرسید یا از هوش مصنوعی بخواهید برایتان کد تولید کند.
در فیلد ورودی چت عبارت “add a simple express web server” را تایپ کنید و سپس کلید Enter را فشار دهید تا درخواست ارسال شود.
خواهید دید که تغییرات کد مستقیماً در ویرایشگر شروع به نمایش میکنند. پاسخ، یک پیادهسازی برای یک وبسرور ساده Node.js با استفاده از Express خواهد بود.
گزینه Accept را انتخاب کنید یا کلید Ctrl+Enter را فشار دهید تا تغییرات پیشنهادی در کد اعمال شوند.
تبریک! شما با استفاده از چت درونویرایشگر، کدی را با زبان طبیعی تولید کردید.
بازسازی (Refactor) کد با استفاده از چت هوش مصنوعی
شما همچنین میتوانید از چت درونویرایشگر برای بازسازی یا بهبود کد موجود استفاده کنید.
به این نکته توجه کنید که در حال حاضر وبسرور تولیدشده از پورت ثابت ۳۰۰۰ استفاده میکند. بیایید این مقدار را به یک متغیر محیطی (Environment Variable) تغییر دهیم.
در ویرایشگر، شماره پورت ۳۰۰۰ را در فایل
server.tsانتخاب کنید، سپس کلید Ctrl+I را فشار دهید تا چت درونویرایشگر باز شود.در فیلد ورودی چت، عبارت “use an environment variable for the port number” را تایپ کنید و کلید Enter را بزنید تا درخواست ارسال شود.
حال میبینید که کد موجود بهگونهای بهروزرسانی میشود که بهجای مقدار ثابت، از یک متغیر محیطی برای شماره پورت استفاده میکند.
گزینه Accept را انتخاب کنید یا کلید Ctrl+Enter را فشار دهید تا تغییرات پیشنهادی کد اعمال شوند.
اگر از تغییر پیشنهادی راضی نیستید، میتوانید پرامپت را تغییر دهید و با تکرار آن، راهحل متفاوتی دریافت کنید. برای مثال، بخواهید که از یک نام متغیر محیطی متفاوت برای شماره پورت استفاده شود.
استفاده از چت برای پرسشهای عمومی برنامهنویسی
هنگامی که در یک کدبیس جدید کار میکنید یا در حال یادگیری یک زبان برنامهنویسی تازه هستید، ممکن است سؤالات کلیتری درباره برنامهنویسی برایتان پیش بیاید. با استفاده از قابلیت چت، میتوانید یک گفتوگوی تعاملی در حین کدنویسی داشته باشید که تاریخچه پرسشهای شما را نیز ذخیره میکند.
برای باز کردن نمای چت، از منوی Copilot در نوار عنوان، گزینه Chat را انتخاب کنید یا کلیدهای Ctrl+Alt+I را فشار دهید.
شما میتوانید از قابلیت چت به روشهای مختلف استفاده کنید. از منوی کشویی mode گزینه Ask را انتخاب کنید تا بتوانید سوالات خود را بپرسید.
در مراحل بعدی، از چت برای شروع یک جلسه ویرایش استفاده خواهید کرد و میتوانید تغییراتی در چندین فایل بهصورت همزمان اعمال کنید.
💡 نکته
میتوانید مدل زبانی مورد استفاده در چت را با انتخاب یک مدل متفاوت از منوی کشویی تغییر دهید.
عبارت “what is recursion?” را در کادر ورودی چت تایپ کرده و کلید Enter را فشار دهید تا درخواست چت ارسال شود.
مشاهده خواهید کرد که پاسخ چت شامل نتایج غنی مانند متن Markdown و بلوکهای کد است.
اعمال تغییرات در چندین فایل
برای ایجاد تغییرات بزرگتر که ممکن است شامل ویرایش در چندین فایل باشد، میتوانید یک جلسه ویرایش مبتنی بر هوش مصنوعی را آغاز کنید. در این حالت، بهجای دریافت بلوکهای کد در نمای چت (Chat view)، ویرایشها مستقیماً روی فایلهای پروژه شما در فضای کاری اعمال میشوند.
بیایید یک جلسه ویرایش را شروع کنیم تا محتوای یک فایل HTML را برای سرور وب خود بازگردانیم.
از منوی کشویی حالت (mode dropdown) در نمای چت، گزینه Edit را انتخاب کنید.
توجه کنید که فایل server.ts بهصورت خودکار بهعنوان زمینه (context) برای درخواست چت شما اضافه میشود.
با اضافهکردن این فایل بهعنوان زمینه، مدل هوش مصنوعی میتواند ویرایشهای کد دقیقتر و مرتبطتری ارائه دهد. در صورت نیاز، میتوانید با کلیک روی دکمه Add Context (افزودن زمینه)، فایلها یا اطلاعات بیشتری به درخواست خود اضافه کنید.
عبارت «Return a static html page as the home page and implement it.» را در فیلد ورودی چت وارد کرده و کلید Enter را فشار دهید تا یک جلسه ویرایش جدید آغاز شود.
توجه کنید که چندین ویرایش به پروژه شما اعمال میشود: فایل server.ts اکنون صفحهی HTML جدیدی به نام index.html را بهعنوان صفحه اصلی برمیگرداند.
اگر از نتایج راضی هستید، گزینه Keep را انتخاب کنید تا تمام تغییرات پیشنهاد شده اعمال شوند.
همچنین میتوانید بین فایلهای ویرایش شده جابهجا شوید و با استفاده از کنترلهای لایه ویرایشگر، تغییرات را بپذیرید یا رد کنید.
رفع خطاهای کدنویسی با استفاده از هوش مصنوعی
علاوه بر پیشنهادات درونخطی و مکالمات چت، ویژگیهای هوش مصنوعی در نقاط مختلف جریان توسعهدهنده در VS Code در دسترس هستند. ممکن است آیکون درخشان را در رابط کاربری VS Code مشاهده کنید که نشاندهنده قابلیتهای هوش مصنوعی است.
یکی از این مکانها ویرایشگر است، هر زمان که یک خطای کامپایلر موجب ظاهر شدن یک خط قرمز در کد میشود. بیایید از هوش مصنوعی برای رفع یک خطای کدنویسی استفاده کنیم.
فایل TypeScript سرور.ts را که قبلاً در ویرایشگر ایجاد کردهاید، باز کنید.
مشاهده خواهید کرد که عبارت
import express from 'express';حاوی یک خط قرمز است. اگر نشانگر را روی خط قرمز ببرید، آیکون درخشان ظاهر میشود. آیکون درخشان را انتخاب کنید تا اقدامات هوش مصنوعی کد را مشاهده کنید، سپس گزینه Fix using Copilot را انتخاب کنید.توجه کنید که چت درونخطی ویرایشگر باز میشود، که با پیام خطا پر شده است و یک راهحل برای رفع مشکل ارائه میدهد. بهطور مستقیم از پاسخ چت، میتوانید به طور اختیاری گزینه Insert into Terminal را انتخاب کنید تا دستور پیشنهادی را در ترمینال خود کپی کنید.
گامهای بعدی
تبریک میگوییم، شما اکنون از هوش مصنوعی برای بهبود کدنویسی خود استفاده کردهاید! در این آموزش، شما بهطور موفقیتآمیز از ویژگیهای هوش مصنوعی در VS Code برای دریافت تکمیلهای کد در ویرایشگر استفاده کردید و از چت برای پرسش و ایجاد تغییرات کدی بهره بردید.
