Як автоматично форматувати у VS Code, щоб заощадити час і зусилля [2023]

Автор

Visual Studio Code: Потужний інструмент для розробників

Visual Studio Code, або VS Code, є одним з найпопулярніших редакторів коду серед розробників. Він має вбудовану підтримку таких технологій, як Node.js, JavaScript та TypeScript. Завдяки різноманітним розширенням, можливості VS Code значно розширюються, дозволяючи працювати з багатьма іншими мовами програмування та середовищами виконання.

Цей безкоштовний редактор з відкритим кодом розроблений компанією Microsoft, що гарантує його якість та постійну підтримку.

VS Code здобув свою популярність завдяки таким особливостям:

  • Intellisense: Інтелектуальне автодоповнення коду і підсвітка синтаксису, що значно пришвидшує процес написання коду.
  • Кросплатформність: Редактор без проблем працює на операційних системах Linux, Windows та macOS, що робить його універсальним інструментом для різних розробників.
  • Велика кількість розширень: Завдяки широкому вибору розширень, VS Code може бути перетворений на повноцінне інтегроване середовище розробки (IDE).
  • Підтримка багатьох мов: Можливість використання різноманітних мов програмування через розширення робить VS Code незамінним для розробників різного профілю.
  • Вбудований термінал: Інтегрований термінал дозволяє розробникам використовувати команди Git прямо в редакторі, спрощуючи роботу з системою контролю версій.

Автоматичне форматування коду в VS Code

Передумови:

  • VS Code: Завантажте редактор безкоштовно з офіційного сайту, якщо він ще не встановлений на вашому комп’ютері.
  • Вибір мови: Визначтеся з мовою програмування, оскільки для кожної з них існують свої інструменти форматування.
  • Форматувальник: VS Code використовує розширення для форматування. У цьому прикладі ми будемо використовувати Prettier, але ви можете обрати будь-який, який вам підходить.

Автоматичне форматування – це функція, яка автоматично упорядковує ваш код, приводячи його до певних стандартів. Це досягається за допомогою файлу конфігурації, де задаються правила щодо відступів, розривів рядків та пробілів.

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

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

Переваги автоматичного форматування коду

  • Економія часу: Автоформатування заощаджує час, який зазвичай витрачається на ручне форматування, дозволяючи зосередитись на написанні коду.
  • Узгодженість: Забезпечує єдиний стиль коду, що особливо важливо при роботі над великими проектами з декількома розробниками.
  • Дотримання кращих практик: Допомагає підтримувати правильні відступи, інтервали та інші стандарти кодування.
  • Покращена читабельність: Добре відформатований код легше читати та розуміти, що полегшує роботу як для вас, так і для інших розробників.

Як включити та налаштувати автоматичне форматування в VS Code

Для включення автоматичного форматування потрібно:

  1. Встановити форматер у вигляді розширення. Знайдіть значок розширень у меню VS Code.
  2. Встановити розширення Prettier. Знайдіть Prettier, оберіть розширення від розробника Prettier і натисніть “Встановити”.

Після встановлення Prettier ви можете включити автоматичне форматування.

Для демонстрації візьмемо простий HTML-файл сторінки входу.

Використаємо наступний код:

<!DOCTYPE html>
<html>
  <head>
    <title>Login Form</title>
  </head>
  <body style>
    <h2 style="text-align: center; margin-top: 50px;">Login </h2>
    <form action="" method="POST" style="max-width: 250px; margin: 0 auto; background-color: white; padding: 20px; border-radius: 5px; box-shadow: 0px 0px 10px 0px rgba(0,0,0,0.2);">
      <label for="email" style="display: block; margin-bottom: 10px;">Enter Email</label>
      <input type="email" id="email" name="email" required style="width: 100%; padding: 10px; border-radius: 3px; border: 1px solid #ccc;"><br><br>
      <label for="password" style="display: block; margin-bottom: 10px;">Enter Password</label>
      <input type="password" id="password" name="password" required style="width: 100%; padding: 10px; border-radius: 3px; border: 1px solid #ccc;"><br><br>
      <input type="submit" value="Login" style="background-color: #af4c9e; color: white; padding: 10px 20px; border: none; border-radius: 3px; cursor: pointer;">
    </form>
  </body>
</html>

Код працює, але його важко читати через відсутність відступів. Prettier допоможе нам відформатувати його.

Потрібно виконати такі кроки:

  1. Створіть HTML-файл (index.html) та вставте наведений вище код.
  2. Знайдіть “Налаштування” в нижній лівій частині VS Code.

  1. У пошуку введіть “Formatter” і виберіть Prettier на вкладці “Editor: Default Formatter”.

  1. Знайдіть “Редактор: Форматування при збереженні” і поставте галочку.

  1. Збережіть HTML-файл, клацніть правою кнопкою миші в документі та виберіть “Формат документа”.
  2. Перевірте, чи ваш код відформатовано. Prettier автоматично форматуватиме весь код, який ви пишете.
  1. Налаштування Prettier: Prettier налаштований на багато дій за замовчуванням, але ви можете налаштувати його під свої потреби. Знайдіть Prettier в налаштуваннях VS Code і налаштуйте його параметри.

  1. Створення файлу конфігурації: Налаштування можуть відрізнятись для кожного члена команди, тому для єдиного стилю коду створіть файл .prettierrc з розширенням .json. Вставте наступний код для прикладу:
{
  "trailingComma": "es5",
  "tabWidth": 4,
  "semi": false,
  "singleQuote": true
}

Цей блок коду визначає:

  • Додавання коми в кінці лише при компіляції до es5.
  • Ширина табуляції – 4 пробіли.
  • Не використовувати крапки з комою.
  • Використовувати одинарні лапки.

Докладніше про налаштування можна дізнатись у документації Prettier.

Рекомендації для автоматичного форматування коду

Використовуйте правильний форматер

Prettier – це приклад, але не єдиний варіант. Вибирайте форматер залежно від мови програмування. Наприклад, для HTML та CSS підходять Prettier та Beautify, а для Python – Black.

Дотримуйтесь єдиного стилю коду

Налаштовуйте параметри форматера так, щоб всі члени команди використовували однакові конфігурації. Для цього використовуйте файл .prettierrc.extension.

Використовуйте лінтери

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

Використовуйте комбінації клавіш

VS Code має багато гарячих клавіш для форматування. Налаштовуйте їх для зручності.

Перевіряйте свій код

Навіть при використанні лінтерів та автоформатування перевіряйте код перед тим, як його комітити.

Комбінації клавіш для форматування

VS Code працює на Windows, Mac та Linux. Ось комбінації клавіш для форматування:

Windows

  • Shift + Alt + F – форматування всього документу.
  • Ctrl + K, Ctrl + F – форматування виділеного коду.

macOS

  • Shift + Option + F – форматування всього документу.
  • Ctrl + K, Ctrl + F – форматування виділеного коду.

Ubuntu

  • Ctrl + Shift + I – форматування всього документу.
  • Ctrl + K, Ctrl + F – форматування виділеного коду.

Якщо комбінації клавіш не працюють, перевірте налаштування VS Code.

  • Відкрийте VS Code і натисніть “Файл” у верхньому лівому куті.
  • Перейдіть до “Налаштування”.
  • Натисніть “Комбінації клавіш”.

Висновок

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