Visual Studio Code, широко відомий як VS Code, є одним із найбільш використовуваних редакторів коду. VS Code має вбудовану підтримку Node.js, JavaScript і TypeScript. Однак ви можете використовувати різні розширення, щоб зробити його доступним для більшості інших мов і середовищ виконання.
Microsoft – це компанія, яка розробила цей безкоштовний редактор коду з відкритим кодом.
VS Code популярний завдяки цим функціям;
- Intellisense: VS Code забезпечує автозаповнення коду та підсвічування синтаксису.
- Кросплатформенність: ви можете використовувати цей редактор коду в операційних системах Linux, Windows і macOS.
- Наявність різноманітних розширень: наявність різноманітних розширень також може перетворити VS Code на інтегроване середовище розробки (IDE).
- Підтримка кількох мов: ви можете використовувати цей інструмент майже з усіма мовами програмування через розширення VS Code.
- Інтегрований термінал: вбудований термінал у VS Code дозволяє розробникам виконувати команди Git прямо з редактора коду. Таким чином, ви можете фіксувати, надсилати та витягувати зміни з цього редактора.
Автоформатування в VS Code
передумови
- VS Code: цей редактор коду можна завантажити безкоштовно. Якщо він не встановлений на вашій машині, завантажте його з офіційного сайту, залежно від вашої операційної системи.
- Виберіть мову для використання: Ви повинні вибрати мову для використання, оскільки для різних мов існують різні засоби форматування.
- Форматувальник: VS Code використовує розширення для форматування коду. У цій статті ми будемо використовувати Prettier. Однак ви можете вільно використовувати будь-який засіб форматування, який відповідає вашій мові.
Автоформатування — це функція, яка автоматично форматує блоки/рядки коду або файл у редакторі коду на основі певних правил і вказівок. Ця функція базується на файлі конфігурації, який визначає правила форматування щодо відступів, розривів рядків і інтервалів.
Коли функцію автоматичного форматування ввімкнено, усі ці правила застосовуватимуться до всіх файлів у вашій кодовій базі під час її написання.
Однак ви також можете вимкнути автоформатування для певного блоку коду, якщо хочете, щоб він виділявся серед інших. Щоб досягти цього, ви можете загорнути фрагмент коду в блок коментарів, який визначає правила, які слід застосовувати.
Переваги кодів автоматичного форматування в коді VS
- Економія часу: Написання коду та форматування може зайняти багато часу. Автоматичне форматування економить ваш час, і таким чином ви можете більше зосередитися на процесі написання та синтаксисі.
- Узгодженість: навіть якщо вихідний код не відображається на стороні клієнта, має бути певна узгодженість. Автоматичне форматування стає в нагоді, особливо для великих проектів із кількома співавторами.
- Дотримується найкращих практик: функція автоматичного форматування стає в пригоді для забезпечення узгодженого відступу, інтервалів і угод про найменування.
- Для легкого читання коду: за добре відформатованим кодом легко стежити під час перегляду коду. Нові розробники, які приєднаються до вашої організації, легко зрозуміють добре відформатований код.
Як увімкнути автоматичний формат у коді VS і налаштувати його
Щоб увімкнути автоматичне форматування, виконайте такі дії:
Коли Prettier буде встановлено на вашому VS Code, ви зможете ввімкнути функцію автоматичного форматування.
Ми використовуємо простий 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 для автоматичного форматування коду.
Виконайте наступні дії.
3. Введіть Formatter у рядку пошуку та виберіть Prettier на вкладці Editor:Default Formatter.
4. Знайдіть «Редактор: форматування при збереженні» та встановіть прапорець.
5. Збережіть файл HTML, виберіть вхідні дані у документі HTML, клацніть правою кнопкою миші та виберіть Формат документа.
6. Перевірте, чи відформатовано ваш документ. Це розширення автоматично форматуватиме весь інший код, який ви пишете у своєму VS Code.
6. Налаштуйте параметри конфігурації Prettier: Prettier налаштовано виконувати багато речей за замовчуванням. Однак ви все одно можете налаштувати його відповідно до своїх потреб. Перейдіть до налаштувань свого коду VS, знайдіть Prettier і налаштуйте параметри на свій смак.
7. Створіть кращий файл конфігурації: налаштування, які ви налаштували на своєму комп’ютері, можуть відрізнятися від інших, якщо ви працюєте як команда. Файл конфігурації Prettier забезпечить узгоджений стиль коду для вашого проекту. Створіть файл .prettierrc із розширенням .json, щоб налаштувати параметри проекту. Ми можемо додати цей код до файлу JSON для демонстрації;
{
"trailingComma": "es5",
"tabWidth": 4,
"semi": false,
"singleQuote": true
}
Наведений вище блок коду визначає чотири речі: кінцеві коми, ширину табуляції, використання крапки з комою та використання одинарних чи подвійних лапок. В цьому випадку;
- Кінцева кома буде додана лише тоді, коли код буде транспільовано до es5.
- Ширина вкладки, тобто кількість пробілів для кожної вкладки, встановлено на 4.
- Semi вказує, чи слід додавати крапки з комою до вашого коду в кінці операторів. Ми встановили значення false, що означає, що крапки з комою не додаватимуться.
- У коді можна використовувати одинарні або подвійні лапки. Ми вказали, що для цього проекту ми повинні використовувати одинарні лапки.
Ви можете переглянути документи Prettier, щоб зрозуміти, як створити узгоджені налаштування конфігурації.
Найкращі методи автоматичного форматування в коді VS
Використовуйте правильний формат
Незважаючи на те, що ми використали Prettier у цій статті для демонстрації, це не означає, що він застосовний до всіх мов. Існують сотні розширень форматування для VS Code, і вам вирішувати, що відповідає вашим потребам. Наприклад, засоби форматування, такі як Prettier і Beautify, підходять для HTML і CSS. З іншого боку, ви можете використовувати розширення Black або Python для форматування коду Python.
Використовуйте послідовний стиль коду
Як ви бачите, ви можете налаштувати параметри форматера. Якщо ви працюєте як команда, переконайтеся, що у вас однакові конфігурації, щоб створити узгоджений стиль коду. Найкращим підходом є створення файлу .prettierrc.extension для включення всіх конфігурацій вашого проекту.
Використовуйте лінтери
Ви можете використовувати лінтери для перевірки на наявність порушень стилю, синтаксичних помилок і програмних помилок у вашому коді. Поєднання лінтерів із автоматичним форматуванням заощадить вам багато часу та зусиль, щоб зробити ваш код читабельним і налагоджувати.
Використовуйте комбінації клавіш
VS Code має сотні ярликів, щоб заощадити ваш час на форматуванні. Ви навіть можете налаштувати ці команди на щось, що запам’ятовується.
Перевірте свій код перед тим, як приєднатися
Незважаючи на те, що лінтування та автоформатування можуть вирішити деякі проблеми у вашому коді; вам все одно потрібно переглянути свій код, перш ніж вводити команду commit.
Комбінації клавіш для форматування коду
VS Code — це мультиплатформенний редактор коду, який можна використовувати в системах на базі Windows, Mac і Linux, наприклад Ubuntu. Ви можете використовувати наведені нижче комбінації клавіш для форматування всього документа або окремих виділених областей коду;
вікна
- Комбінація Shift + Alt + F форматує весь документ.
- Комбінація Ctrl + K, Ctrl + F форматує вибраний вами розділ коду. Наприклад, див.
macOS
- Комбінація Shift + Option + F форматує весь документ.
- Комбінація Ctrl + K, Ctrl + F форматує вибраний вами розділ коду. Наприклад, див.
Ubuntu
- Комбінація Ctrl + Shift + I форматує весь документ.
- Комбінація Ctrl + K, Ctrl + F форматує вибраний вами розділ коду. Наприклад, див.
Однак зауважте, що деякі з цих ярликів можуть не працювати, якщо ви налаштували свій код VS за допомогою різних ярликів.
Ви можете перевірити свої ярлики коду VS за допомогою цих кроків;
- Відкрийте код VS і клацніть елемент «Файл» у верхньому лівому куті.
- Перейдіть до Налаштувань
- Клацніть «Комбінації клавіш», щоб переглянути всі комбінації клавіш, які можна використовувати.
Висновок
Якщо ввімкнути автоматичне форматування, ви можете заощадити багато часу. Вибір розширення залежить від мови, яку ви використовуєте. Ви можете встановити кілька засобів форматування коду залежно від мов програмування, які ви використовуєте для своїх проектів.
Завжди перевіряйте документацію форматера, який ви обрали для свого коду. Це гарантує, що ви розумієте мови, які він підтримує, і те, як використовувати його якнайкраще.
Перегляньте нашу статтю про найкращі розширення VS Code, які повинні використовувати розробники.