Сервер VS Code Live - Як автоматично оновити браузер за допомогою цього простого розширення

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.

Дякую за читання!