Коли ви вводите команди в VS Code, намагання бути акуратним іноді може бути останнім, що ви думаєте. Хоча форматування не потрібне для запуску програми, воно дуже допомагає під час налагодження та пошуку помилок.
У цій статті ми покажемо вам, як відформатувати код у VS Code, а також інші корисні поради щодо правильної організації коду.
Як відформатувати код
VS Code має вбудовані команди для впорядкування поточного введеного коду у стандартному форматі. Ці клавіші швидкого доступу не потребують додаткових розширень і їх можна використовувати в будь-який час. Ярлики такі:
Для ПК
Відформатуйте весь документ:
Відкрийте файл із кодом, який потрібно відформатувати.
Натисніть «Shift + Alt + F».
Збережіть зміни, натиснувши «Файл» у верхньому лівому куті, а потім вибравши «Зберегти» або натиснувши «Ctrl + S».
Форматування лише вибраного коду:
У файлі з рядками коду, який потрібно відформатувати, виділіть рядки мишею.
Натисніть «Ctrl + K».
Натисніть «Ctrl + F».
Збережіть зміни, вибравши «Зберегти» у меню «Файл» у верхньому лівому куті або натиснувши «Ctrl + S».
Зауважте, що якщо ви натиснете «Ctrl + F» без попереднього натискання «Ctrl + K», ви відкриєте меню пошуку. Якщо це сталося, просто закрийте, натиснувши кнопку «x» або натиснувши Esc.
Переміщення рядків вгору або вниз:
Перемістіть курсор на початок рядка, який потрібно перемістити.
Утримуйте клавішу Alt.
Щоб перемістити лінію вгору, натисніть стрілку вгору. Щоб перемістити його вниз, натисніть стрілку вниз.
Збережіть файл, вибравши його в меню «Файл» у верхньому лівому куті вікна або натиснувши «Ctrl + S».
Змінити відступ окремого рядка:
Перемістіть курсор на початок рядка, в якому потрібно змінити відступ.
Натисніть «Ctrl + ]», щоб збільшити відступ.
Натисніть «Ctrl + [“ to decrease the indent.
Save changes by selecting Save from the File menu or by pressing “Ctrl + S”.
For Mac
Format the entire document:
Open the file with the code that you wish to format.
Press “⇧ + ⌥ + F.”
Save your changes by clicking “File” on the upper left then choosing “Save” or pressing “⌘ + S”.
Formatting selected code only:
Highlight the part of the document that you wish to format.
Press “⌘ + K”.
Press “⌘ + F”.
Save your file by pressing “⌘ + S” or by choosing “Save” from the File menu on the upper left corner of the window.
Note that using “⌘ + F” without pressing “⌘ + K” beforehand will only open the Find Menu. To close the Find Menu just press “x” on the right side or press Esc.
Move lines up or down:
Place your cursor at the beginning of the line you want to edit.
Hold down the “⌥” Key.
To move a line up, press the up arrow. To move it down, press the down arrow.
Save your changes by choosing “Save” from the File menu or by pressing “⌘ + S”.
Change indentation of a single line:
Move your cursor to the beginning of the line in which you want to change the indention.
Press “⌘ + ]», щоб збільшити відступ.
Натисніть «⌘ +[“длязменшеннявідступу[“todecreasetheindent
Збережіть файл, натиснувши «⌘ + S» або вибравши «Зберегти» у меню «Файл» у верхньому лівому куті вікна.
Код формату VS при збереженні
VS Code не має вбудованої команди, яка форматує ваш документ під час збереження. Натомість це можна зробити, встановивши розширення форматування у програму VS Code. Найпопулярнішим з цих розширень є Prettier, яке надає багато функцій форматування VS Code. Prettier можна встановити, виконавши наступне:
Відкрийте VS Code.
Натисніть кнопку Розширення, розташовану в лівому меню. Це значок, який виглядає як чотири коробки. Крім того, ви можете натиснути «Ctrl + Shit + x» для ПК або «⌘ + ⇧ + x» на Mac.
У рядку пошуку у верхній частині меню введіть Prettier.
Натисніть кнопку Встановити в нижньому правому куті значка Prettier.
Дочекайтеся завершення встановлення розширення.
Перш ніж Prettier зможе почати автоматично форматувати ваш документ під час збереження, вам потрібно буде налаштувати розширення, щоб активувати цю функцію. Це робиться наступним чином:
Відкрийте вікно налаштувань, натиснувши «Ctrl +» на ПК або «⌘ +» на Mac.
У рядку пошуку введіть форматувальник. Це повинно викликати кілька параметрів форматування.
У налаштуваннях «Редактор: форматування за замовчуванням» переконайтеся, що вибране розширення має значення «Приємніше». Якщо форматувальника за замовчуванням немає або VS Code використовує інший форматувальник за замовчуванням, натисніть стрілку спадного меню. Виберіть зі списку «Prettier – Code Formatter». Крім того, Prettier може з’явитися в списку як «esbenp.prettier-vscode».
Переконайтеся, що параметр «Редактор: Форматувати під час збереження» позначено. Якщо ні, поставте галочку.
У рядку пошуку налаштувань введіть «Прикрасніше».
Прокрутіть униз, доки не знайдете рядок «Прикрасніше: потрібна конфігурація». Переконайтеся, що прапорець встановлено. Цей параметр не дозволяє Prettier форматувати документи без файлу конфігурації. Це зручно, коли ви переглядаєте завантажений код, який може мати власні правила форматування. Це запобігає ненавмисному перезапису параметрів форматування. Зауважте, що файли без назви форматуватимуться автоматично, навіть якщо цей параметр позначено.
Ви можете редагувати певні налаштування Prettier залежно від ваших уподобань. Коли ви закінчите, ви можете вийти з цього меню.
Оскільки ви налаштували Prettier на автоматичне форматування лише за наявності файлу конфігурації, ви повинні створити його для кожного проекту. Це робиться, виконавши такі дії:
Виберіть корінь вашого проекту в меню ліворуч.
Натисніть кнопку «Новий файл», щоб створити файл конфігурації.
Назвіть цей файл «.prettierrc».
У файлі просто введіть {}.
Prettier тепер автоматично форматуватиме ваш документ, коли ви його зберігаєте.
Поради щодо впорядкування коду
Хоча для запуску програми відступ не потрібний, він може допомогти налагодженню, розділяючи код на керовані модулі. Наприклад, оператори If-Then або вкладені випадки можуть отримати користь від цього, зробивши кожен альтернативний варіант візуально відмінним один від одного. Це стане в нагоді, коли ви маєте справу з логічними помилками замість синтаксичних.
Якщо ви називаєте модулі або короткі рядки коду, увійдіть у звичку використовувати описові заголовки, а не просто називати їх модуль 1, модуль 2 тощо. Це полегшує визначення того, яка частина коду виконує певну функцію.
Завжди корисно використовувати коментарі на свою користь. Незалежно від того, додаєте ви короткий опис чи просто додаєте примітку для себе, коментарі надзвичайно допомагають під час налагодження.
Організаційний кодекс
Підтримка належного форматування ваших проектів не тільки полегшує читання, але й допомагає виявляти помилки та впорядковує ваш код. Хоча це не обов’язково для запуску програми, знання форматування файлів у VS Code є безсумнівною перевагою.
Чи знаєте ви інші способи форматування файлів у VS Code? Не соромтеся поділіться своїми думками в розділі коментарів нижче.
