Visual Studio Code - один із найпопулярніших редакторів коду. Він безкоштовний, має чистий інтерфейс і має незліченну кількість розширень, які роблять програмування простішим та веселішим.
Я веб-розробник інтерфейсу і використовую код VS під час роботи та на своєму каналі YouTube. У мене було багато людей, які запитували мене, як браузер оновлюється автоматично під час кодування, не натискаючи кнопку перезавантаження.
Ну, це можливо, якщо ви налаштуєте корисне розширення у VS Code, яке називається live-server. У цій публікації я розповім подробиці того, як це працює, і як налаштувати та налаштувати сервер, що працює, у вашому редакторі коду VS.
Чому я повинен використовувати розширення live-server?
Зазвичай, коли ви вносите зміни у свій код або пишете щось нове, вам потрібно оновити сторінку вручну, щоб побачити зміни.
Іншими словами, якщо ви щодня вносите 100 змін у свій код, вам потрібно оновлювати браузер 100 разів.
Однак розширення live-server автоматизує це для вас. Після його встановлення у вашому браузері зможе запуститися автоматизований локальний хост, який можна запустити однією кнопкою.
Як тільки ви внесете зміни у свій код або напишете щось нове, після збереження його браузер автоматично оновиться. Тоді ви зможете швидко та автоматично переглянути зміни.
Якщо ви бажаєте, ви також можете переглянути навчальне відео нижче:
Спочатку встановіть код VS
Ви можете пропустити цю частину, якщо на своєму комп’ютері вже встановили код VS. В іншому випадку ви можете завантажити його з офіційного веб-сайту.
Після того, як ви завантажили та встановили код VS, ви побачите екран привітання:
З лівого боку ви побачите пару значків. Одним з них (під піктограмою без помилок) є кнопка розширень:
Після натискання на нього з’явиться рядок пошуку. Просто введіть "живий сервер".
Ви побачите безліч варіантів, тому ви зможете вибрати той, який підходить для вашої системи. Я використовую Live Server від Ritwick Dey, тому продовжимо з цим у цьому прикладі:
Натисніть кнопку встановити, і вона встановить розширення.
Створіть нову HTML-сторінку
Щоб запустити живий сервер, переконайтесь, що ви створили принаймні HTML-сторінку. Для цього натисніть кнопку файлу вгорі, потім виберіть нову кнопку файлу та введіть index.html:
Проблеми з конфігурацією
Тепер після того, як ви створили HTML-сторінку та встановили розширення, ви зможете побачити піктограму «Go Live» прямо внизу в синьому полі:
Якщо ви цього не бачите, просто перезапустіть VS Code. Тоді все повинно бути нормально.
Натисніть кнопку "Опублікувати", і localhost (призначений номеру порту) повинен запуститися у вашому браузері за замовчуванням. Ви можете будь-коли запустити та зупинити ваш живий сервер, натиснувши ту саму кнопку.
Якщо ви дійшли до цього кроку, вітаємо! :) Тепер ви можете працювати з live-сервером. В іншому випадку, якщо у вас все ще виникають проблеми, перегляньте цю публікацію для отримання додаткової інформації.
Висновок
Сподіваюсь, ця публікація допоможе вам встановити та налаштувати розширення сервера в реальному часі у VS Code. Якщо ви хочете дізнатись більше про веб-розробку, сміливо відвідайте мій канал Youtube.
Дякую за читання!