Інтро
Visual Studio Code дає можливість використовувати майже будь-яку фічу за допомогою команди на панелі або через гарячі клавіші.
Імовірно, що ви проводите за роботою по 8 годин на день. Якщо ви розробник, то більшість часу займаєтесь кодом. Тож редактор коду — ваш робочий простір.
Якщо ви матимете в арсеналі корисні гарячі клавіші, це може значно пришвидшити вашу роботу, а отже і вашу продуктивність. Запам'ятовуйте!
Шпаргалка гарячих клавіш
Обирайте для вашої ОС:
Ви можете зберегти й роздрукувати шпаргалки та тримати їх ближче до робочого місця, аби краще запам'ятати.
Розкладка
Користуєтесь Vim? Можливо, гарячі клавіші Emacs вже відбились у вашій пам'яті? Або ви раніше використовували notepad++, тому добре знаєте його гарячі клавіші?
Це не проблема, оскільки у Visual Studio є для вас розширення. Завантажимо ⚛Atom Keymap, однак зробимо все без допомоги нашої улюбленої мишки (майже).
- Відкрийте Visual Studio Code.
- Натисніть
CTRL+SHIFT+X. Зазначене сполучення клавіш відкриє перелік розширень, а курсор буде сфокусовано на полі пошуку. Введіть@category:keymaps. - Тепер ви бачите перелік розкладок. Натисніть
Tabта стрілку вниз⬇. - Продовжуйте натискати на
⬇, доки не зупинитесь наAtom Keymap. Після цього натиснітьEnter. - Тепер все ж доведеться клікнути мишкою на кнопку
Install.
Ви можете знайти розкладку майже для будь-якого потрібного редактора. Встановіть найбільш зручну та звичну для вас — і більше не потрібно буде запам'ятовувати зайві сполучення клавіш.
Налаштування гарячих клавіш (JSON)
Існує багато способів переглянути налаштування гарячих клавіш. Це може бути звичний графічний інтерфейс, або ж JSON-файл.
Графічний інтерфейс
Ми можемо відкрити графічний інтерфейс, натиснувши CTRL+k, а потім, утримуючи CTRL, натиснути CTRL+s.
Згори буде поле пошуку, де можна шукати команди або гарячі клавіші, призначення яких ви хочете перевірити.
На скріншоті можна помітити чотири колонки. Розлянемо кожну з них.
Command — дії, які виконує Visual Studio Code:
- Keybinding: комбінація клавіш, яку необхідно натиснути, аби виконати дію;
- When: фільтр для Visual Studio Code. Вказує, чи матиме сенс сполучення клавіш у певному контексті.
- Source: Існує декілька способів, як Visual Studio Code може дізнатися про сполучення клавіш. Найбільш поширений спосіб —
Default, тобто команди, які доступні для Visual Studio Code з коробки.User— параметр, який позначає команди, створені користувачем. І третій спосіб —Extension. Автори розширень можуть також додавати гарячі клавіші. Якщо ваше улюблене сполучення клавіш чомусь раптом не працює, це може бути однією з причин.
Щоб змінити сполучення клавіш, двічі клікніть на рядок, щоб з'явилось модальне вікно. Натисніть комбінацію, яку ви хочете використовувати для обраної дії, а потім натисніть Enter.
JSON-файл зі сполученнями клавіш
Тепер ви знаєте, як загалом працюють сполучення клавіш. Поглянемо на keybindings.json.
Існує два варіанти keybindings.json: за замовчуванням та користувацький. Натисніть CTRL+SHIFT+P або F1, щоб відкрити панель команд та введіть keyboard shortcuts. Далі ви побачите як мінімум два записи.
- Відкрийте файл з гарячими клавішами за замовчуванням (JSON). Там Visual Studio Code зберігає усі сполучення клавіш за замовчуванням та список вільних сполучень, доступних для використання. Зараз не будемо вносити тут зміни.
- Відкрийте файл з гарячими клавішами (JSON). Там описані сполучення клавіш, додані користувачем. Тому редагувати будемо саме цей файл. Спочатку там буде просто пустий масив.
Щоб додати сполучення клавіш до JSON-файлу, вам просто потрібно додати об'єкт, наприклад:
[
{
"key": "CTRL+ALT+P",
"command": "git.pull",
"when": ""
}
]
Треба визначити key та саму команду. Параметр when вказує Visual Studio Code, за яких умов слід виконувати команду. Якщо залишити його пустим, команда виконуватиметься за будь-яких умов. Але детальніше про це — наприкінці статті.
Корисні гарячі клавіші
Відкриття панелі команд
Хоч ми вже згадували це на початку статті, повторити зайвим не буде.
CTRL+SHIFT+P або F1 відкриє найбільш потужну фічу Visual Studio Code — панель команд. З нею надзвичайно просто знайти те, що вам потрібно.
Відкриття та закриття бічної панелі
Іноді вам хочеться мати більше простору для коду, однак заважає бічна панель. Натисніть CTRL+B, щоб перемикати її.
Увійти в режим Zen
Якщо вам подобаються можливості режиму Zen, просто натисніть CTRL+k, відпустіть обидві клавіші та натисніть z. Так ви можете перемикати режим Zen.
Фокус вбудованого термінала
Одна з найкорисніших фіч Visual Studio Code — вбудований термінал. Щоб швидко відкрити чи закрити його, необхідно натиснути CTRL+j.
Команда відкриває вбудований термінал і одночасно фокусує курсор в ньому. Якщо ви натиснете сполучення клавіш знову, термінал закриється, а курсор повернеться на попереднє місце.
Пошук файлу в проєкті
Visual Studio Code пропонує чудовий вбудований пошук файлів. Щоб відкрити його, натисніть CTRL+p. Так ви відкриєте діалогове вікно з раніше відкритими файлами. Також підтримується нечіткий пошук, тож вам не потрібно вказувати точну назву файлу. Серед доступних фіч варто згадати також про go-to line, налагодження та багато іншого.
Перехід на нещодавно відкриту робочу область
Працюєте з мікросервісною архітектурою, тому необхідно перемикатися між теками весь час? Не використовуєте монорепозиторій? Для вас є рішення! Натисніть CTRL+r.
Відкриється діалогове вікно зі списком раніше відкритих воркспейсів/тек.
Бонусна порада: якщо натиснете CTRL+ENTER в цьому вікні, Visual Studio Code відкриє його в новому вікні.
Розділення екрану
Багато розробників віддають перевагу Vim саме через простоту розділення екрану в редакторі. Visual Studio Code також може похвалитися такою фічею. Просто натисніть
CTRL+\\, щоб створити дві колонки, або
CTRL+k, відпустити k, утримувати CTRL та натиснути \\, щоб створити новий рядок.
Другий варіант звучить трохи складно, однак просто спробуйте його на практиці.
Фокус вікна редактора
Тепер ви знаєте, як розділити вікно редактора, але вам також необхідно навчитися перемикатися між відкритими вкладками швидко. На щастя, це достатньо легко зі сполученнями клавіш, просто необхідно натиснути:
CTRL+[1-9]
Тобто натискаєте CTRL та номер вікна, на якому потрібен фокус (для першого — 1 і т. д.)
Закриття поточного вікна редактора
Ви навідкривали забагато вікон і хочете закрити їх. Натисніть CTRL+w, щоб закрити поточні відкриті вкладки.
Закриття вкладок зі збереженням змін
Іноді у вас дуже багато відкритих вкладок і ви не знаєте, в яких з них ви зберегли зміни. Так, звичайно, ви могли помітити крапку на вкладці з незбереженими змінами, але для цього необхідно фокусуватися та шукати потрібні файли. Visual Studio Code поспішає на допомогу. Просто натисніть: CTRL+k, потім відпустіть ці клавіші та натисніть u.
Так ви зберігаєте всі зміни у відкритих вікнах.
Відкрити новий файл
Потрібен новий файл, щоб накидати якийсь код? Або ж створити новий файл для свого мініпроєкту? Натисніть CTRL+n. Так ви відкриєте нове вікно редактора.
Зміна мови поточного файлу
Потрібно змінити обрану мову поточного файлу, тому що це Javascript (react), а не просто Javascript? Натисніть CTRL+k, потім відпустіть ці клавіші та натисніть m. Відкриється діалогове вікно, де можна пошукати потрібну мову.
Перейти до рядка
Сфокусуємось на полегшенні процесу налагодження. Уявімо, що у вас сталася помилка на рядку 1042 (якщо ваш файл такий довгий, це вже проблема). Не потрібно прокручувати до потрібного рядка. Просто натисніть CTRL+g. У відкритому діалоговому вікні введіть номер рядка, на який ви хочете перейти. В поєднанні з CTRL+p отримаєте надзвичайно потужний інструмент.
Перейти до символу
Ви можете поцікавитись, що тут мається на увазі під «символом»? У мовах програмування символами зазвичай вважаються змінні. У CSS — це селектори. Щоб відкрити потрібне діалогове вікно, натисніть:
CTRL+SHIFT+O
Ви побачите перелік доступних символів у поточному файлі.
CTRL+t
Побачите діалогове вікно з символом #. Вам треба ввести потрібний символ, а Visual Studio Code здійснить пошук у всьому робочому просторі для введеного символу, якщо він підтримується вашою мовою програмування.
Зміщення рядка вище чи нижче
Іноді вам треба перемістити рядок всередині if або просто перемістити рядок, тому що код викликається зарано. Натисніть Alt+Down для зміщення вниз і Alt+Up для зміщення вверх.
Копіювати поточний рядок
Ви хочете наповнити масив деякими змінними, але писати цикл не хочеться. Як же заповнити array[0], array[1] та array[2]? Просто скопіюйте перший рядок двічі та змініть те, що вам потрібно. Для цього натисніть:
ALT+SHIFT+Up
Так ви скопіюєте поточний виділений рядок та вставите його рядком вище.
Якщо натиснете ALT+SHIFT+Down, скопіюєте поточний виділений рядок та вставите його рядком нижче.
Показати підказку
Visual Studio Code має вбудовані підказки. Майже завжди вони з'являються автоматично, проте іноді доводиться викликати самостійно. Для цього натисніть :
CTRL + пробіл
і відкриється вікно з підказками.
Закоментувати виділений фрагмент
Іноді вам треба закоментувати велику частину коду.
Натисніть для цього CTRL+/. Якщо було виділено декілька рядків, усі будуть закоментовані. Якщо нічого не було обрано, закоментується лише поточний рядок.
Обрати декілька рядків коду
Щоб закоментувати фрагмент коду, необхідно спочатку вибрати понад один рядок. Для цього натисніть CTRL+Shift+Up, щоб почати виділяти код з поточного рядка та рухатися вверх.
Або ж натисніть CTRL+Shift+down, щоб почати виділяти з поточного рядка та рухатися вниз.
Згортання та розгортання коду
У вас є велика функція, яка потребує рефакторингу. Проте зараз у вас немає на це часу і ви хочете забрати її з поля зору. Можете згорнути код, який більше за 100 рядків, і зробити з нього 1 рядок. Для цього натисніть CTRL+SHIFT+[. Щоб розгорнути код, натисніть CTRL+SHIFT+].
Вирізати одну лінію
Для цього навіть не потрібно виділяти код. Просто натисніть CTRL+x і виріжіть поточний рядок, якщо нічого не виділено.
Збільшення або зменшення відступу рядка
Ми часто маємо справу зі створенням відступів. Для цього необхідно виділити код та натиснути всім відомий Tab. Натискайте Tab стільки разів, скільки вам необхідно виділити.
Знаєте, як зробити зворотну дію — зменшити відступ? Для цього існує SHIFT+tab.
Ще немає коментарів