4.5 KiB

Raw Blame History

راهنمای نصب و راه‌اندازی قابلیت Auto-Click-to-IDE

این قابلیت به برنامه‌نویسان اجازه می‌دهد تا در حالت توسعه (Development)، با نگه داشتن کلید Alt و کلیک روی هر بخش از رابط کاربری وب‌سایت، مستقیماً به فایل و خط کد مربوطه در محیط ادیتور (IDE) منتقل شوند. این ابزار بهینه‌سازی شده تا فایل‌ها را در پنجره فعلی ادیتور باز کند و از باز شدن نرم‌افزارهای تکراری جلوگیری نماید.

فایل‌های مورد نیاز

برای انتقال این قابلیت به پروژه‌های جدید Next.js، به ۳ فایل زیر نیاز دارید:

dev-click-to-component.tsx (کامپوننت اصلی رابط کاربری)
add-data-locator.cjs (پلاگین Babel برای یافتن خطوط کد)
open-in-ide.ts (رابط API برای ارتباط با ادیتور)

مراحل نصب در پروژه‌های جدید Next.js

مرحله ۱: انتقال فایل‌ها

ابتدا فایل‌های مورد نیاز را در مسیرهای مناسب در پروژه جدید قرار دهید:

فایل dev-click-to-component.tsx را در پوشه کامپوننت‌ها (مثلاً src/components/utils/) کپی کنید.
فایل add-data-locator.cjs را در ریشه پروژه (یا پوشه src/plugins/) کپی کنید.

مرحله ۲: ایجاد API Route (بسیار مهم)

برای اینکه فایل‌ها در همان پنجره‌ی باز ادیتور لود شوند (نه در پنجره جدید)، باید یک API بسازیم. در پروژه خود (اگر از Pages Router استفاده می‌کنید) فایلی در مسیر src/pages/api/open-in-ide.ts بسازید و کدهای زیر را در آن قرار دهید:

import type { NextApiRequest, NextApiResponse } from 'next';
import { exec } from 'child_process';
import os from 'os';

export default function handler(req: NextApiRequest, res: NextApiResponse) {
  if (req.method !== 'POST') return res.status(405).json({ message: 'Method Not Allowed' });

  const { locator } = req.body;
  if (!locator) return res.status(400).json({ message: 'Locator is required' });

  // اجرای کامند برای باز کردن در ادیتور (-r برای جلوگیری از ساخت پنجره جدید)
  const isWindows = os.platform() === 'win32';
  const bin = isWindows ? 'antigravity-ide.cmd' : 'antigravity-ide';
  const cmd = `${bin} -r -g "${locator}"`;

  exec(cmd, (error) => {
    if (error) {
      console.error(`[open-in-ide] Error: ${error.message}`);
      return res.status(500).json({ message: 'Failed to open file in IDE' });
    }
    res.status(200).json({ success: true });
  });
}

مرحله ۳: تنظیمات Babel

Next.js باید بتواند پلاگین ما را بخواند. یک فایل به نام .babelrc در ریشه (Root) پروژه خود بسازید (اگر ندارید) و کدهای زیر را در آن قرار دهید:

{
  "presets": ["next/babel"],
  "env": {
    "development": {
      "plugins": [
        "./add-data-locator.cjs"
      ]
    }
  }
}

(نکته: آدرس ./add-data-locator.cjs را بر اساس مکانی که فایل را در مرحله ۱ قرار داده‌اید تنظیم کنید).

مرحله ۴: اضافه کردن کامپوننت به Layout

در نهایت، فایل اصلی پروژه خود (مثلاً src/pages/_app.tsx یا src/app/layout.tsx) را باز کنید و کامپوننت را در محیط توسعه (Development) فراخوانی کنید:

import { DevClickToComponent } from '@/components/Componentes/dev-click-to-component';

export default function App({ Component, pageProps }) {
  return (
    <>
      <Component {...pageProps} />
      
      {/* این خط فقط در حالت لوکال اجرا میشود */}
      {process.env.NODE_ENV === 'development' && <DevClickToComponent />}
    </>
  );
}

نحوه استفاده

پس از اتمام مراحل بالا، دستور npm run dev را مجدداً اجرا کنید. وارد مرورگر شوید، کلید Alt را روی کیبورد نگه دارید و روی هر بخشی از سایت کلیک کنید. می‌بینید که فایل مربوطه مستقیماً در ادیتور شما (روی همان خط کد) باز خواهد شد!

4.5 KiB Raw Blame History