Skip to main content

Меншени контексту (@file, @folder, @codebase)(Символ @ у редакторах коду: як передавати точний контекст штучному інтелекту)

Механізм точного управління контекстом у сучасних AI-редакторах (Cursor, Windsurf). Дозволяє через символ @ швидко прикріплювати до запиту конкретні файли (@file), цілі папки (@folder), документацію (@docs) чи весь проект (@codebase).

1. Огляд концепції та призначення

Коли ви працюєте у великому проекті на 100 файлів і пишете в чат: «Полагодь кнопку авторизації», модель опиняється в розгубленості. У якому з 10 файлів лежить ця кнопка? Який стиль вона використовує? Де зберігаються паролі?

Меншени контексту (символ @) — це інструмент хірурга у вайбкодингу. Подібно до того, як ви тегаєте друзів у Telegram чи Instagram через знак @, у редакторах Cursor та Windsurf ви можете тегати ресурси вашого проекту.

Натиснувши @, ви відкриваєте список підказок і чітко кажете моделі: «Ось дивись на @Header.tsx і використовуй кольори з @theme.ts».

Практична аналогія: головний навик, який рятує від галюцинацій та скорочує час очікування відповіді втричі.

2. Повний список меншенів та їхнє призначення

┌─────────────────────────────────────────────────────────────┐
│                 МЕНЮ МЕНШЕНІВ У РЕДАКТОРАХ КОДУ             │
├─────────────────────────────────────────────────────────────┤
│ 📄 @Files:                                                  │
│    Прикріплює точний файл: наприклад `@Button.tsx`          │
│    (Найкраща точність, мінімум зайвих токенів)              │
├─────────────────────────────────────────────────────────────┤
│ 📁 @Folders:                                                │
│    Прикріплює всю папку: наприклад `@src/components`        │
│    (Коли потрібно переглянути всі суміжні компоненти разом) │
├─────────────────────────────────────────────────────────────┤
│ 🌐 @Codebase:                                               │
│    Сканує весь проект через векторний пошук                 │
│    (Ідеально для запитань: «Де в проекті обробляється API?»)│
├─────────────────────────────────────────────────────────────┤
│ 📚 @Docs:                                                   │
│    Підключає офіційну свіжу документацію фреймворків        │
├─────────────────────────────────────────────────────────────┤
│ 💻 @Terminal:                                               │
│    Передає в чат текст останньої помилки з консолі          │
└─────────────────────────────────────────────────────────────┘

3. Як правильно використовувати меншени (Приклади)

01. Виправлення конкретного компонента

Не пишіть загальних фраз. Напишіть:

«Подивись на @LoginForm.tsx. Зроби так, щоб при неправильному паролі з'являлося червоне попередження під полем вводу».

02. Створення нового коду за зразком існуючого

Якщо ви хочете створити нову сторінку в тому ж стилі, що й стара:

«Створи нову сторінку @src/app/about/page.tsx за точно такою ж структурою та стилями, як зроблено в @src/app/contact/page.tsx».

03. Розбір помилки з терміналу

Якщо в консолі з'явився червоний текст збою, напишіть у чаті:

«Ось помилка з @Terminal. Поясни, в якому файлі виник збій і як його полагодити».

4. Чому точковий контекст кращий за повний @codebase

Чим менше непотрібних файлів ви передаєте в модель, тим чистіша її увага. Якщо задача стосується однієї кнопки, вказівка конкретного @Button.tsx дасть у 10 разів кращий результат, ніж пошук через усе сховище коду.

/ Часті запитанняSchema.org FAQPage

FAQ: Меншени контексту (@file, @folder, @codebase)

Штучний інтелект спробує «наосліп» здогадатися, про який саме файл чи функцію ви говорите, або почне шукати по всьому репозиторію. Це витрачає зайвий час, спалює токени і часто призводить до того, що модель змінює не той файл.
/ Внутрішня перелінковка
Всі терміни