VS Code (Visual Studio Code): налаштування, розширення, комбінації клавіш

Привіт:) У цьому гайді: корисні налаштування, популярні розширення та гарячі клавіші популярного редактора коду VS Code (Visual Studio Code).

Що таке Visual Studio Code

Visual Studio Code (VS Code) — це безкоштовний багатоплатформовий редактор коду від компанії Microsoft, створений на основі фреймворку Electron. Дозволяє розробляти багатоплатформові десктопні застосунки, використовуючи веб-технології.

Головна перевага VS Code — універсальність. Редактор не обмежений конкретною мовою програмування. З його допомогою можна створювати веб-сайти, мобільні додатки, працювати з базами даних і тестувати сервіси. Велика бібліотека плагінів розширює функціонал редактора. А якщо потрібний модуль знайти не вдалося, його можна створити самостійно.

до змісту ↑

Можливості VS Code

• Підсвічування синтаксису. Різні елементи коду (функції, класи, змінні) виділяються різними кольорами.
• Автоматичне доповнення. Під час набору коду редактор пропонує варіанти завершення рядка.
• Контроль версій. Доступні інтеграції з GitHub, GitLens та іншими подібними сервісами.
• Відлагодження (debug). Редактор виявляє помилки та пропонує їх виправлення. Також підтримується повноцінний режим відлагодження коду. Наприклад, для Python можна запустити відлагодження клавішею [F5], а для JavaScript відкриється нове вікно браузера.
• Рефакторинг. Редактор пропонує рекомендації для оптимізації коду та підвищення його ефективності, підказуючи, які конструкції можна покращити.
• Швидкість. VS Code не вимагає великих потужностей комп'ютера. Він стабільно працює навіть на пристроях з 1 ГБ оперативної пам'яті та процесором з частотою від 1,6 ГГц.

до змісту ↑

Де завантажити і як встановити VS Code

VS Code — багатоплатформовий редактор, який можна встановити на Windows, macOS та Linux. Також є веб-версія, що дозволяє редагувати файли у браузері без необхідності запуску повноцінного застосунку.

Далі наведу короткі інструкції щодо встановлення на різні операційні системи.

Встановлення на Windows

1. Завантажте інсталяційний файл.
2. Запустіть завантажений інсталятор та оберіть каталог для встановлення.
3. На робочому столі знайдіть та запустіть ярлик.

Встановлення на macOS

1. Завантажте інсталяційний файл.
2. Відкрийте каталог із завантаженнями і знайдіть завантажений архів.
3. Розархівуйте його та запустіть додаток.
4. Перетягніть Visual Studio Code.app у папку з програмами.
5. Запустіть додаток з меню додатків.

Встановлення на Linux

1. Завантажте інсталятор.
2. Запустіть файл і слідуйте інструкціям.

Веб-додаток

Веб-версію VS Code можна знайти за адресою vscode.dev. Дозволяє змінювати локальні файли з комп'ютера, відкривати віддалені репозиторії, встановлювати деякі розширення і зберігати результат роботи на диск комп'ютера. Веб-додаток запускається навіть на мобільних браузерах, але у смартфонів досить маленькі екрани, тому працювати на них незручно.

Налаштування VS Code

Редактор має багато можливостей, а тому пропонує гнучкі налаштування. Користувач може обрати зовнішній вигляд редактора, задати форматування, налаштувати контроль версій, синхронізувати усі налаштування при встановленні редактора на іншому комп'ютері.

Меню зі всіма налаштуваннями можна знайти у File -> Preferences на Windows та Linux та у Code -> Preferences на macOS.

Розгляну декілька важливих для розробника опцій, які зроблять роботу більш комфортною.

до змісту ↑

Автоматичне збереження

Це досить зручна опція, яка автоматично зберігає зміни у коді та звільняє від необхідності щоразу користуватися комбінацією клавіш [Ctrl]+[S] або [⌘]+[S] на macOS.

Для її налаштування перейдіть File -> Preferences -> Settings та знайдіть опцію Auto Save. Вона має декілька значень:

• off — вимкнути автозберігання;
• afterDelay — файл зберігається після затримки в мілісекундах, які можна задати нижче;
• onfocusChange — збереження після переключення на інший файл;
• onWindowChange — збереження змін при переході у вікно іншої програми.

до змісту ↑

Шрифт

У меню File -> Preferences -> Settings знайдіть опції Font Size та Font Family. Перша задає величину шрифту в пікселях, а друга — його сімейство.

до змісту ↑

Форматування

Окремі структури у коді, для зручності сприйняття, розділяються пробілами та відступами. Якщо скопіювати фрагмент коду з іншого джерела та вставити його, то зазвичай всі відступи "з'їжджають". Щоб їх вирівняти, потрібно скористатися комбінацією клавіш [Shift]+[Alt]+[F]. Але цю дію можна автоматизувати.

Для цього в налаштуваннях перейдіть до розділу Formatting та оберіть відповідний режим:

• Format On Paste — автоматичне форматування під час вставки коду;
• Format On Save — під час збереження;
• Format On Type — під час набору коду.

до змісту ↑

Комбінації клавіш VS Code (для Windows)

Список популярних комбінацій клавіш для підвищення продуктивності роботи розробника.

Основні

[Ctrl]+[Shift]+[P], [F1]	Відкрити панель команд
[Ctrl]+[P]	Перейти до файлу
[Ctrl]+[Shift]+[N]	Нове вікно
[Ctrl]+[Shift]+[W]	Закрити вікно
[Ctrl]+[,]	Користувацькі налаштування
[Ctrl]+[K]+[Ctrl]+[S]	Список усіх комбінацій клавіш

Базові функції редагування

[Ctrl]+[X]	Вирізати рядок
[Ctrl]+[C]	Скопіювати рядок
[Alt]+[↑] / [↓]	Перемістити рядок вверх/вниз
[Shift]+[Alt]+[↓] / [↑] Copy line up/down	Скопіювати поточний рядок та вставити копію перед ним / після нього
[Ctrl]+[Shift]+[K]	Видалити рядок
[Ctrl]+[Enter]	Вставити новий рядок нижче
[Ctrl]+[Shift]+[Enter]	Вставити новий рядок вище
[Ctrl]+[Shift]+[\]	Перейти до найближчої дужки
[Ctrl]+] / [	Вставити/прибрати відступ
[Home] / [End]	Перейти на початок/кінець рядка
[Ctrl]+[Home]	Перейти на початок файлу
[Ctrl]+[End]	Перейти в кінець файлу
[Ctrl]+[↑] / [↓]	Прокрутити рядок вгору/вниз
[Alt]+[PgUp] / [PgDn]	Прокрутити сторінку вгору/вниз
[Ctrl]+[Shift]+[	Згорнути область
[Ctrl]+[Shift]+]	Розгорнути область
[Ctrl]+[K]+[Ctrl]+[	Згорнути всі підобласті
[Ctrl]+[K]+[Ctrl]+]	Розгорнути всі підобласті
[Ctrl]+[K]+[Ctrl]+[0]	Згорнути всі області
[Ctrl]+[K]+[Ctrl]+[J]	Розгорнути всі області
[Ctrl]+[K]+[Ctrl]+[C]	Додати коментар до рядка
[Ctrl]+[K]+[Ctrl]+[U]	Видалити коментар рядка
[Ctrl]+[/]	Перемкнути рядковий коментар
[Shift]+[Alt]+[A]	Перемкнути блокування коментаря
[Alt]+[Z]	Увімкнути перенесення слів

до змісту ↑

Форматування коду

[Ctrl]+[K]+[Ctrl]+[F]	Форматувати виділений фрагмент
[Shift]+[Alt]+[F]	Форматувати весь файл
[Alt]+[Shift]+[F]	Демініфікація(unminify) мініфікованого файлу

Навігація

[Ctrl]+[T]	Показати всі символи
[Ctrl]+[G]	Перейти до рядка
[Ctrl]+[P]	Перейти до файлу
[Ctrl]+[Shift]+[O]	Перейти до символу
[Ctrl]+[Shift]+[M]	Показати проблеми у дебаг-консолі
[F8]	Перейти до наступної помилки або попередження
[Shift]+[F8]	Перейти до попередньої помилки або попередження
[Ctrl]+[Shift]+[Tab]	Навігація по відкритих вкладках
[Alt]+[←] / [→]	Перейти назад/вперед
[Ctrl]+[M]	Вкладка перемикання переміщує фокус

до змісту ↑

Пошук і заміна

[Ctrl]+[F]	Пошук
[Ctrl]+[H]	Заміна
[F3] / [Shift]+[F3]	Пошук наступного/попереднього збігу
[Alt]+[Enter]	Виділити всі збіги з пошуковою фразою
[Ctrl]+[K]+[Ctrl]+[D]	Виділити наступний збіг

Мультикурсор і виділення

[Alt]+Click	Вставити курсор
[Ctrl]+[Alt]+[↑] / [↓]	Вставити курсор вище/нижче
[Ctrl]+[U]	Скасувати останню операцію з курсором
[Shift]+[Alt]+[I]	Вставити курсор у кінець кожного виділеного рядка
[Ctrl]+[L]	Виділити поточний рядок
[Ctrl]+[Shift]+[L]	Виділити всі входження поточного виділення
[Ctrl]+[F2]	Вибрати всі входження поточного слова
[Shift]+[Alt]+[→]	Розширити виділення
[Shift]+[Alt]+[←]	Зменшити виділення
[Shift]+[Alt] + [перетягування мишею] [Ctrl]+[Shift]+[Alt]+[↑] / [↓]	Виділення стовпця
[Ctrl]+[Shift]+[Alt]+[PgUp] / [PgDn]	Виділення стовпця (посторінково)

до змісту ↑

Керування редактором

[Ctrl]+[F4] [Ctrl]+[W]	Закрити вкладку редактора
[Ctrl]+[K]+[F]	Закрити каталог (папку)
[Ctrl]+[\]	Розділити редактор на вкладки (групи)
[Ctrl]+[1] / [2] / [3]	Перемкнути на вкладку 1, 2, 3
[Ctrl]+[K]+[Ctrl]+[←] / [→]	Перемкнути на попередню/наступну вкладку
[Ctrl]+[K]+[←] / [→]	Перемістити активну вкладку вліво/вправо

до змісту ↑

Керування файлами

[Ctrl]+[N]	Створити новий файл
[Ctrl]+[O]	Відкрити файл
[Ctrl]+[S]	Зберегти поточний файл
[Ctrl]+[Shift]+[S]	Зберегти файл як...
[Ctrl]+[K]	Зберегти всі відкриті файли
[Ctrl]+[F4]	Закрити поточний файл
[Ctrl]+[K]+[Ctrl]+[W]	Закрити всі відкриті файли
[Ctrl]+[Shift]+[T]	Знову відкрити редактор
[Ctrl]+[Tab]	Відкрити наступну вкладку
[Ctrl]+[Shift]+[Tab]	Відкрити попередню вкладку

до змісту ↑

Дисплей

[F11]	Відкрити/закрити редактор на весь екран
[Shift]+[Alt]+[0]	Перемикання розташування редактора (горизонтальне/вертикальне)
[Ctrl]+ [=] / [-]	Збільшити/зменшити масштаб
[Ctrl]+[B]	Закрити/відкрити бокову панель
[Ctrl]+[Shift]+[F]	Показати пошук у боковій панелі
[Ctrl]+[Shift]+[G]	Показати керування версіями у боковій панелі
[Ctrl]+[Shift]+[D]	Показати дебаг у боковій панелі
[Ctrl]+[Shift]+[X]	Показати розширення у боковій панелі
[Ctrl]+[Shift]+[H]	Показати заміну у файлах у боковій панелі
[Ctrl]+[Shift]+[J]	Перейти до деталей пошуку
[Ctrl]+[Shift]+[U]	Відкрити панель виведення у консолі

до змісту ↑

Відлагодження

[F9]	Перемкнути точку зупинки
[F5]	Почати/продовжити процес відлагодження
[Shift]+[F5]	Зупинити відлагодження
[F11] / [Shift]+[F11]	Крок із заходом/виходом
[F10]	Крок із обходом
[Ctrl]+[K]+[Ctrl]+[I]	Показати при наведенні

Вбудований термінал

[Ctrl]+[`]	Показати вбудований термінал
[Ctrl]+[Shift]+[`]	Створити новий термінал
[Ctrl]+[C]	Скопіювати виділене
[Ctrl]+[V]	Вставити в активний термінал
[Ctrl]+[↑] / [↓]	Прокрутити вверх/внизу
[Shift]+[PgUp] / [PgDn]	Прокрутити на одну сторінку доверху/донизу
[Ctrl]+[Home] / [End]	Прокрутити на початок/в кінець

до змісту ↑

Корисні розширення VS Code

Розширення Visual Studio Code, які допомагають та пришвидшують процес кодування. У списку розширення, які використовую у своїй роботі.

Auto Rename Tag

Auto Rename Tag — автоматичне перейменування парних тегів HTML/XML.

до змісту ↑

CSS Peek

CSS Peek — перегляд відповідних CSS-правил при наведенні курсору миші на CSS-ідентифікаторі або класі в HTML-файлі. Перехід до них у CSS-файл по кліку.

до змісту ↑

eCSStractor for VSCode

eCSStractor for VSCode — отримання назв класів із HTML і створення таблиці стилів у файлі CSS.

до змісту ↑

Google Fonts

Google Fonts — перегляд списку шрифтів Google і вставка їх у свій код HTML або CSS.

до змісту ↑

Highlight Matching Tag

Highlight Matching Tag — виділення відповідних відкриваючого та/або закриваючого тегів.

до змісту ↑

HTML CSS Support

HTML CSS Support — автоматичне завершення (доповнення) HTML-атрибутів id та class.

Image preview

Image preview — попередній перегляд зображення.

до змісту ↑

IntelliCode

IntelliCode — забезпечення функції розробки з підтримкою штучного інтелекту для розробників на Python, TypeScript/JavaScript та Java з інсайтами, що базуються на розумінні контексту вашого коду у поєднанні з машинним навчанням.

до змісту ↑

Live Sass Compiler

Live Sass Compiler — компіляція файлів SASS/SCSS у CSS в режимі реального часу.

до змісту ↑

Live Server

Live Server — локальний сервер для розробки з функцією автоматичного перезавантаження для статичних і динамічних сторінок.

до змісту ↑

PHP Intelephense

PHP Intelephense — інтелектуальні можливості PHP для Visual Studio Code.

Це високопродуктивний сервер PHP, що забезпечує ефективну розробку з ключовими функціями:

• підсвічування ключових слів та посилання на офіційну документацію;
• швидке автодоповнення (IntelliSense) для документів, робочих проєктів та вбудованих символів;
• допомога з підписами методів і функцій;
• пошук визначень і посилань у робочому проєкті;
• форматування документів за стандартом PSR-12;
• інтелектуальна підтримка HTML/JS/CSS коду;
• аналіз PHPDoc і підтримка типів.

до змісту ↑

Prettier - Code formatter

Prettier - Code formatter — форматування коду за допомогою бібліотеки prettier.

Sandbox

Sandbox — "пісочниця" для HTML/CSS/JavaScript.

до змісту ↑

SFTP

SFTP — можливість додавати, редагувати або видаляти файли в локальній директорії та синхронізувати їх з віддаленим сервером, використовуючи різні протоколи передачі, такі як FTP або SSH. Найпростіше налаштування вимагає лише кількох рядків конфігурації, при цьому доступний широкий набір специфічних параметрів для задоволення потреб будь-якого користувача.

до змісту ↑

Tabnine: AI Chat & Autocomplete for JavaScript, Python, Typescript, Java, PHP, Go, and more

Tabnine — використання штучного інтелекту для прискорення та спрощення процесу розробки. Підтримка мов, фреймворків та бібліотек: JavaScript, TypeScript, Python, Java, C, C++, C#, Go, Php, Ruby, Kotlin, Dart, Rust, React/Vue, HTML 5, CSS, Lua, Perl, YAML, Cuda, SQL, Scala, Shell (bash), Swift, R, Julia, VB, Groovy, Matlab, Terraform, ABAP.

до змісту ↑

vscode-icons

vscode-icons — іконки для файлів проєкту.

до змісту ↑

WordPress Hooks IntelliSense

WordPress Hooks IntelliSense — автозаповнення для хуків (екшенів і фільтрів) WordPress.