Привіт:) У цьому гайді: корисні налаштування, популярні розширення та гарячі клавіші популярного редактора коду 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 — універсальність. Редактор не обмежений конкретною мовою програмування. З його допомогою можна створювати веб-сайти, мобільні додатки, працювати з базами даних і тестувати сервіси. Велика бібліотека плагінів розширює функціонал редактора. А якщо потрібний модуль знайти не вдалося, його можна створити самостійно.
back to contents ↑Можливості 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. Дозволяє змінювати локальні файли з комп'ютера, відкривати віддалені репозиторії, встановлювати деякі розширення і зберігати результат роботи на диск комп'ютера. Веб-додаток запускається навіть на мобільних браузерах, але у смартфонів досить маленькі екрани, тому працювати на них незручно.
back to contents ↑Налаштування VS Code
Редактор має багато можливостей, а тому пропонує гнучкі налаштування. Користувач може обрати зовнішній вигляд редактора, задати форматування, налаштувати контроль версій, синхронізувати усі налаштування при встановленні редактора на іншому комп'ютері.
Меню зі всіма налаштуваннями можна знайти у File -> Preferences на Windows та Linux та у Code -> Preferences на macOS.
Розгляну декілька важливих для розробника опцій, які зроблять роботу більш комфортною.
back to contents ↑Автоматичне збереження
Це досить зручна опція, яка автоматично зберігає зміни у коді та звільняє від необхідності щоразу користуватися комбінацією клавіш [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] | Прокрутити на початок/в кінець |
back to contents ↑Офіційний список усіх комбінацій клавіш Visual Studio Code для Windows.
Офіційний список усіх комбінацій клавіш 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.
