Copilot у VS Code
Повне налаштування GitHub Copilot у Visual Studio Code — встановлення, шорткати, inline completions та налаштування
📎ОФІЦІЙНА ДОКУМЕНТАЦІЯ
Встановлення
Крок 1: Розширення VS Code
- Відкрийте VS Code
- Перейдіть у Extensions (
Ctrl+Shift+X) - Знайдіть GitHub Copilot
- Натисніть Install
Розширення GitHub Copilot включає і Copilot Chat. Окремо встановлювати розширення для чату більше не потрібно.
Крок 2: Автентифікація
- Після встановлення з'явиться запит на авторизацію
- Натисніть Sign in to GitHub
- Авторизуйтесь через браузер
- Підтвердіть доступ для VS Code
Крок 3: Перевірка
У нижній панелі VS Code має з'явитися іконка Copilot. Якщо вона активна — все працює.
Keyboard Shortcuts
Inline Completions
| Дія | Windows/Linux | macOS |
|---|---|---|
| Прийняти пропозицію | Tab | Tab |
| Відхилити пропозицію | Esc | Esc |
| Наступна пропозиція | Alt+] | Option+] |
| Попередня пропозиція | Alt+[ | Option+[ |
| Прийняти слово | Ctrl+Right | Cmd+Right |
| Викликати пропозицію | Alt+\ | Option+\ |
Chat
| Дія | Windows/Linux | macOS |
|---|---|---|
| Відкрити Chat Panel | Ctrl+Alt+I | Cmd+Alt+I |
| Inline Chat | Ctrl+I | Cmd+I |
| Quick Chat | Ctrl+Shift+I | Cmd+Shift+I |
Edits та Agent
| Дія | Windows/Linux | macOS |
|---|---|---|
| Copilot Edits | Ctrl+Shift+I | Cmd+Shift+I |
| Прийняти зміни | Ctrl+Enter | Cmd+Enter |
Inline Completions
Як це працює
Copilot аналізує контекст — відкритий файл, сусідні файли, коментарі — і пропонує код "привидом" (ghost text):
// Напишіть коментар — Copilot запропонує реалізацію:
// Сортування масиву об'єктів за полем
function sortByField<T>(array: T[], field: keyof T): T[] {
return [...array].sort((a, b) => {
// ← Copilot продовжить реалізацію
});
}
Прийняття частинами
Замість повного прийняття, можна прийняти лише слово:
Ctrl+Right(Windows) — прийняти наступне слово- Це корисно, коли перша частина пропозиції правильна, а далі потрібна корекція
Кілька варіантів
Натискайте Alt+] / Alt+[ для перегляду альтернативних пропозицій.
Налаштування у settings.json
Основні налаштування
{
// Увімкнути/вимкнути для конкретних мов
"github.copilot.enable": {
"*": true,
"markdown": true,
"plaintext": false,
"yaml": true
},
// Автоматичні inline пропозиції
"github.copilot.inlineSuggest.enabled": true,
// Модель для Chat
"github.copilot.chat.defaultModel": "claude-sonnet-4",
// Кастомні інструкції для генерації коду
"github.copilot.chat.codeGeneration.instructions": [
{ "text": "Use TypeScript strict mode" },
{ "text": "Prefer functional programming style" }
],
// Інструкції для тестів
"github.copilot.chat.testGeneration.instructions": [
{ "text": "Use Vitest, follow AAA pattern" }
]
}
Налаштування по мовам
{
"[typescript]": {
"github.copilot.inlineSuggest.enabled": true
},
"[python]": {
"github.copilot.inlineSuggest.enabled": true
},
"[markdown]": {
"github.copilot.inlineSuggest.enabled": false
}
}
Chat Participants
У VS Code Chat доступні спеціалізовані учасники:
@workspace
Аналізує весь проєкт:
@workspace Яка архітектура цього проєкту? Які основні модулі?
@vscode
Допомагає з налаштуваннями VS Code:
@vscode Як налаштувати автоформатування при збереженні для TypeScript?
@terminal
Контекст з терміналу:
@terminal Поясни останню помилку та як її виправити
@github
Робота з GitHub:
@github Покажи мої відкриті PR у цьому репозиторії
Контекстне меню
Правий клік на коді відкриває додаткові дії Copilot:
- Explain This — пояснити виділений код
- Fix This — виправити проблему
- Generate Tests — створити тести
- Generate Docs — додати документацію
Tips & Tricks
1. Коментарі як промпти
Пишіть коментарі перед кодом — Copilot використовує їх як інструкції:
// Calculate the Fibonacci sequence up to n using memoization
function fibonacci(n: number): number {
// Copilot згенерує оптимальну реалізацію
}
2. Приклади як контекст
Напишіть один приклад — Copilot продовжить у тому ж стилі:
// Перший маппер вручну
const mapUserToDTO = (user: User): UserDTO => ({
id: user.id,
fullName: `${user.firstName} ${user.lastName}`,
email: user.email,
});
// Copilot запропонує аналогічний маппер
const mapProductToDTO = (product: Product): ProductDTO => ({
// Copilot заповнить за аналогією
});
3. Відкриті файли як контекст
Copilot аналізує відкриті вкладки. Відкрийте релевантні файли (типи, інтерфейси), щоб покращити якість пропозицій.
Тримайте відкритими файли з типами та інтерфейсами — це значно покращує якість inline completions, бо Copilot використовує їх як контекст.
4. Next Edit Suggestions (NES)
Copilot може пропонувати наступне місце редагування після внесення змін. Наприклад, якщо ви додали нове поле до інтерфейсу, Copilot запропонує оновити пов'язані функції.
Усунення проблем
| Проблема | Рішення |
|---|---|
| Copilot не пропонує код | Перевірте, чи увімкнено для цієї мови |
| Повільні пропозиції | Перевірте мережеве з'єднання |
| Неякісні пропозиції | Додайте коментарі та відкрийте релевантні файли |
| Іконка неактивна | Переавторизуйтесь: Copilot: Sign Out → Sign In |
Детальніше про можливості чату
Налаштуйте Copilot під стандарти проєкту