VS Code (Visual Studio Code): налаштування, розширення, комбінації клавіш
Привіт:) У цьому гайді: корисні налаштування, популярні розширення та гарячі клавіші популярного редактора коду VS Code (Visual Studio Code).
- Що таке Visual Studio Code
- Можливості VS Code
- Де завантажити і як встановити VS Code
- Встановлення на Windows
- Встановлення на macOS
- Встановлення на Linux
- Веб-додаток
- Налаштування VS Code
- Автоматичне збереження
- Шрифт
- Форматування
- Комбінації клавіш VS Code (для Windows)
- Основні
- Базові функції редагування
- Форматування коду
- Навігація
- Пошук і заміна
- Мультикурсор і виділення
- Керування редактором
- Керування файлами
- Дисплей
- Відлагодження
- Вбудований термінал
- Корисні розширення VS Code
- Auto Rename Tag
- CSS Peek
- eCSStractor for VSCode
- Google Fonts
- Highlight Matching Tag
- HTML CSS Support
- Image preview
- IntelliCode
- Live Sass Compiler
- Live Server
- PHP Intelephense
- Prettier - Code formatter
- Sandbox
- SFTP
- Tabnine: AI Chat & Autocomplete for JavaScript, Python, Typescript, Java, PHP, Go, and more
- vscode-icons
- WordPress Hooks IntelliSense
Що таке 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
- Завантажте інсталяційний файл.
- Запустіть завантажений інсталятор та оберіть каталог для встановлення.
- На робочому столі знайдіть та запустіть ярлик.
Встановлення на macOS
- Завантажте інсталяційний файл.
- Відкрийте каталог із завантаженнями і знайдіть завантажений архів.
- Розархівуйте його та запустіть додаток.
- Перетягніть Visual Studio Code.app у папку з програмами.
- Запустіть додаток з меню додатків.
Встановлення на Linux
- Завантажте інсталятор.
- Запустіть файл і слідуйте інструкціям.
Веб-додаток
Веб-версію 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] | Прокрутити на початок/в кінець |
Офіційний список усіх комбінацій клавіш Visual Studio Code для macOS.
Корисні розширення 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.
