Під час введення коду у VS Code, іноді турбота про акуратність відходить на задній план. Хоча форматування не є обов’язковим для виконання програми, воно значно спрощує процес налагодження та виявлення помилок.
У цьому посібнику ми розглянемо, як можна відформатувати код у VS Code, а також надамо інші корисні поради щодо організації кодової бази.
Методи форматування коду
VS Code має вбудовані інструменти для автоматичного упорядкування коду відповідно до стандартних форматів. Ці комбінації клавіш не вимагають встановлення додаткових розширень та можуть бути використані будь-коли. Ось основні з них:
Для користувачів Windows
Форматування всього файлу:
Відкрийте файл з кодом, який необхідно відформатувати.
Натисніть клавіші “Shift + Alt + F”.
Збережіть зміни, вибравши “Файл” у верхній частині вікна, а потім “Зберегти”, або ж натисніть комбінацію “Ctrl + S”.
Форматування виділеної частини коду:
Виділіть необхідні рядки коду за допомогою миші.
Натисніть “Ctrl + K”.
Натисніть “Ctrl + F”.
Збережіть внесені зміни, обравши “Зберегти” у меню “Файл” або натиснувши “Ctrl + S”.
Зауважте, якщо ви натиснете “Ctrl + F” без попереднього натискання “Ctrl + K”, відкриється меню пошуку. У такому випадку просто закрийте його, натиснувши “x” або клавішу Esc.
Переміщення рядків коду вгору або вниз:
Встановіть курсор на початок рядка, який потрібно перемістити.
Утримуйте клавішу “Alt”.
Для переміщення рядка вгору натисніть стрілку “вгору”, для переміщення вниз – стрілку “вниз”.
Збережіть зміни, вибравши “Зберегти” у меню “Файл” або натиснувши “Ctrl + S”.
Зміна відступу окремого рядка:
Перемістіть курсор на початок рядка, де потрібно змінити відступ.
Натисніть “Ctrl + ]”, щоб збільшити відступ.
Натисніть “Ctrl + [” для зменшення відступу.
Збережіть зміни, обравши “Зберегти” у меню “Файл” або натиснувши “Ctrl + S”.
Для користувачів macOS
Форматування всього документа:
Відкрийте файл, код якого потрібно відформатувати.
Натисніть “⇧ + ⌥ + F”.
Збережіть зміни, вибравши “Файл” у верхньому лівому куті, а потім “Зберегти” або натиснувши “⌘ + S”.
Форматування виділеного коду:
Виділіть фрагмент коду, який потрібно відформатувати.
Натисніть “⌘ + K”.
Натисніть “⌘ + F”.
Збережіть файл, натиснувши “⌘ + S” або вибравши “Зберегти” у меню “Файл” у верхньому лівому куті вікна.
Зауважте, що використання “⌘ + F” без попереднього натискання “⌘ + K” відкриє лише меню пошуку. Щоб закрити меню пошуку, натисніть “x” праворуч або натисніть Esc.
Переміщення рядків вгору або вниз:
Поставте курсор на початок рядка, який потрібно змінити.
Утримуйте клавішу “⌥”.
Щоб перемістити рядок вгору, натисніть стрілку вгору. Щоб перемістити його вниз, натисніть стрілку вниз.
Збережіть зміни, обравши “Зберегти” у меню “Файл” або натиснувши “⌘ + S”.
Зміна відступу окремого рядка:
Перемістіть курсор на початок рядка, у якому потрібно змінити відступ.
Натисніть “⌘ + ]”, щоб збільшити відступ.
Натисніть “⌘ + [” для зменшення відступу.
Збережіть файл, натиснувши “⌘ + S” або вибравши “Зберегти” у меню “Файл” у верхньому лівому куті вікна.
Автоматичне форматування коду при збереженні
VS Code не має вбудованої функції для автоматичного форматування документів під час збереження. Однак, цю можливість можна додати за допомогою розширень. Одним з найпопулярніших є Prettier, який пропонує безліч функцій форматування. Встановити Prettier можна так:
Запустіть VS Code.
Натисніть на кнопку “Розширення” на панелі ліворуч (значок чотирьох квадратиків). Або скористайтеся комбінацією “Ctrl + Shift + x” (Windows) чи “⌘ + ⇧ + x” (macOS).
У рядку пошуку введіть “Prettier”.
Натисніть кнопку “Встановити” у нижньому правому куті іконки Prettier.
Дочекайтеся завершення встановлення розширення.
Щоб Prettier міг автоматично форматувати код під час збереження, потрібно налаштувати розширення:
Відкрийте вікно налаштувань, натиснувши “Ctrl + ,” (Windows) або “⌘ + ,” (macOS).
У рядку пошуку введіть “форматувальник”. З’явиться декілька параметрів форматування.
У налаштуванні “Редактор: Форматувальник за замовчуванням” переконайтеся, що вибрано “Prettier”. Якщо за замовчуванням встановлено інший форматувальник або його немає, натисніть на стрілку спадного меню та оберіть “Prettier – Code formatter”. Prettier також може відображатися як “esbenp.prettier-vscode”.
Переконайтеся, що параметр “Редактор: Форматувати при збереженні” активовано (поставте галочку, якщо це необхідно).
У рядку пошуку налаштувань введіть “Prettier”.
Прокрутіть вниз, поки не знайдете “Prettier: Потрібна конфігурація”. Переконайтеся, що прапорець встановлено. Цей параметр не дозволяє Prettier форматувати документи без файлу конфігурації. Це зручно при перегляді завантаженого коду, який може мати власні правила форматування. Це запобігає випадковому перезапису параметрів форматування. Зауважте, що файли без назви форматуватимуться автоматично, навіть якщо цей параметр активовано.
Ви можете налаштувати параметри Prettier за власними вподобаннями. Після завершення можна вийти з меню налаштувань.
Оскільки Prettier налаштовано для автоматичного форматування лише за наявності файлу конфігурації, потрібно створити такий файл для кожного проєкту. Зробити це можна наступним чином:
Виберіть корінь свого проєкту в меню зліва.
Натисніть кнопку “Новий файл”, щоб створити файл конфігурації.
Назвіть цей файл “.prettierrc”.
У файлі просто введіть {}.
Тепер Prettier буде автоматично форматувати код при кожному збереженні файлу.
Поради щодо впорядкування коду
Відступи, хоча й не є обов’язковими для виконання програми, сприяють налагодженню, розділяючи код на логічні блоки. Наприклад, конструкції if-then або вкладені структури будуть більш читабельними завдяки візуальному розмежуванню. Це особливо важливо при пошуку логічних помилок, а не лише синтаксичних.
Присвоюючи назви модулям або невеликим фрагментам коду, намагайтеся використовувати описові заголовки, а не просто “модуль 1”, “модуль 2” тощо. Це полегшує розуміння, яка частина коду виконує конкретну функцію.
Коментарі є вашим надійним помічником. Незалежно від того, чи додаєте ви короткий опис, чи просто примітку для себе, коментарі надзвичайно корисні під час процесу налагодження.
Висновок
Дотримання належного форматування коду не тільки робить його легшим для читання, але й сприяє виявленню помилок і впорядковує вашу роботу. Хоча форматування не є необхідним для запуску програм, знання основних принципів форматування в VS Code є безсумнівною перевагою.
Чи знаєте ви інші способи форматування файлів у VS Code? Поділіться своїми думками в розділі коментарів нижче.