یک اکستنشن اوتوکامپلیت برای وی‌اس‌کد در پنج دقیقه بنویسیم! 🚀

یک اکستنشن اوتوکامپلیت برای وی‌اس‌کد در پنج دقیقه بنویسیم! 🚀

آیا تا به حال خواسته‌اید که یک اکستنشن برای Visual Studio Code بنویسید اما فکر کرده‌اید که این کار پیچیده است؟ در این مقاله، به شما نشان می‌دهیم که چگونه در کمتر از پنج دقیقه یک اکستنشن اوتوکامپلیت ساده برای وی‌اس‌کد ایجاد کنید. 😍

۱. نصب پیش‌نیازها ✅

برای شروع، ابتدا Node.js و npm را نصب کنید. اگر این ابزارها را از قبل ندارید، از اینجا دانلود و نصب کنید.

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

npm install -g @vscode/vsce

۲. ایجاد یک پروژه جدید برای اکستنشن 🎯

یک پوشه جدید برای پروژه بسازید و وارد آن شوید:

mkdir vscode-autocomplete-extension
cd vscode-autocomplete-extension

سپس با استفاده از ابزار yo، یک پروژه جدید اکستنشن بسازید:

npx yo code

در این مرحله، از شما چند سوال پرسیده می‌شود:

• What type of extension do you want to create? → New Extension (TypeScript)
• What's the name of your extension? → vscode-e2e-test-autocomplete-suggestor
• Which language do you want to use? → TypeScript
• سایر گزینه‌ها را به‌صورت پیش‌فرض بگذارید.

۳. اجرای اکستنشن در حالت توسعه 🛠️

پس از ایجاد پروژه، وارد پوشه‌ی آن شوید:

cd vscode-e2e-test-autocomplete-suggestor

برای اجرای اکستنشن در وی‌اس‌کد، کافی است دستور زیر را اجرا کنید:

code .

حالا در وی‌اس‌کد کلید F5 را فشار دهید تا اکستنشن شما در یک محیط تستی اجرا شود. یک پنجره جدید از وی‌اس‌کد باز می‌شود که در آن می‌توانید اکستنشن خود را تست کنید.

۴. پیاده‌سازی قابلیت اوتوکامپلیت ✨

به مسیر src/extension.ts بروید و این کد را جایگزین کنید تا پیشنهادهای هوشمندانه به کدنویس نمایش داده شود:

import * as vscode from 'vscode';

export function activate(context: vscode.ExtensionContext) {
    let provider = vscode.languages.registerCompletionItemProvider(
        { scheme: 'file', language: 'javascript' },
        {
            provideCompletionItems(document, position, token, context) {
                let completionItem = new vscode.CompletionItem(&quotconsole.log&quot);
                completionItem.insertText = &quotconsole.log('Hello, world!');"
                completionItem.documentation = new vscode.MarkdownString(&quot**افزودن لاگ کنسول سریع!**&quot);
                return [completionItem];
            }
        },
        '.' // فعال شدن پس از تایپ نقطه
    );

    context.subscriptions.push(provider);
}

export function deactivate() {}

این کد چه می‌کند؟
🔹 زمانی که کاربر . را در یک فایل جاوااسکریپت تایپ کند، پیشنهاد console.log('Hello, world!'); نمایش داده می‌شود.

۵. بسته‌بندی و نصب اکستنشن 📦

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

vsce package

یک فایل .vsix تولید می‌شود. اکنون می‌توانیم آن را در وی‌اس‌کد نصب کنیم:

code --install-extension vscode-e2e-test-autocomplete-suggestor-0.0.1.vsix

بعد از این مرحله، اکستنشن شما آماده استفاده است! 🎉

۶. تست نهایی اکستنشن 🏆

۱. وی‌اس‌کد را باز کنید.
۲. یک فایل جاوااسکریپت جدید بسازید (test.js).
۳. در فایل جدید، . تایپ کنید.
۴. مشاهده خواهید کرد که پیشنهاد console.log('Hello, world!'); نمایش داده می‌شود! ✅

تبریک می‌گوییم! 🎊 شما موفق شدید یک اکستنشن اوتوکامپلیت برای وی‌اس‌کد بسازید! 😍

جمع‌بندی 🎯

در این مقاله، شما یاد گرفتید که چگونه:

✔ یک اکستنشن جدید در وی‌اس‌کد ایجاد کنید
✔ قابلیت اوتوکامپلیت را به آن اضافه کنید
✔ آن را تست، بسته‌بندی و نصب کنید

حالا نوبت شماست!
آیا ایده‌ای برای یک اکستنشن دیگر دارید؟ آن را پیاده‌سازی کنید و تجربه خود را با ما به اشتراک بگذارید! 🚀🔥