Как использовать код Visual Studio для живого сервера

Обновлено: 20.11.2024

Visual Studio Code Live Server: Visual Studio Code — один из популярных редакторов кода. Он бесплатный, имеет понятный интерфейс и множество расширений, которые упрощают программирование и делают его более увлекательным.

Ну, это возможно, если вы настроите полезное расширение в VS Code под названием live-server. В этом руководстве мы разъясним детали того, как это работает, а также как установить и настроить работающий сервер в редакторе VS Code.

По какой причине мне следует использовать расширение live-server?

Обычно, когда вы вносите изменения в свой код или пишете что-то новое, вам нужно обновить страницу вручную, чтобы увидеть изменения.

Другими словами, если вы ежедневно вносите 100 изменений в свой код, вам нужно обновить браузер 100 раз.

Однако расширение live-server автоматизирует это за вас. После его внедрения автоматический локальный хост сможет работать в вашем браузере, который вы можете запустить с помощью одной кнопки.

Когда вы вносите изменения в свой код или пишете что-то новое, после сохранения браузер автоматически обновляется. Затем, в этот момент, вы сможете быстро и автоматически увидеть изменения.

При желании вы также можете посмотреть обучающее видео ниже:

После загрузки и установки VS Code вы увидите экран приветствия:

С левой стороны вы должны увидеть пару значков. Один из них (под значком без ошибок) — это кнопка расширения:

При нажатии на нее появится строка поиска. Просто введите «действующий сервер».

Вы увидите множество вариантов, так что вы сможете выбрать тот, который подходит для вашей системы. Я использую Live Server от Ritwick Dey, так что давайте продолжим с ним в этом примере:

Нажмите кнопку установки, и расширение будет установлено.

Создать новую HTML-страницу

Чтобы начать активный сервер, убедитесь, что у вас есть созданный HTML-код. Для этого нажмите кнопку файла в самом верху, затем выберите кнопку нового файла и введите index.html:

Проблемы с конфигурацией

Теперь после того, как вы создали HTML-страницу и установили расширение, у вас должна быть возможность увидеть значок «Включить» прямо под синим полем:

Если вы его не видите, просто перезапустите VS Code. Тогда, в этот момент, все должно быть в порядке.

Нажмите кнопку «Go Live», и локальный хост (назначенный номеру порта) должен запустить ваш браузер по умолчанию. Вы можете запускать и останавливать свой рабочий сервер в любое время, нажимая одну и ту же кнопку.

Если вы достигли этой прогрессии, поздравляем! 🙂 Теперь можно работать с лайвворкером.

Спасибо за чтение! Мы надеемся, что вы нашли это руководство полезным, и мы хотели бы услышать ваши отзывы в разделе комментариев ниже. И покажите нам, чему вы научились, поделившись с нами своими проектами.

Похожие сообщения

Код Visual Studio

Как запустить программу непосредственно из кода Visual Studio

Как запустить программу непосредственно из кода Visual Studio Как запустить программу напрямую из кода Visual Studio: Visual Studio Code (известный как VS Code) — это бесплатный текстовый редактор с открытым исходным кодом от Microsoft. Подробнее…

Код Visual Studio

Как писать код в редакторе кода Visual Studio.

Как писать код в Visual Studio Code Создание HTML-документа Как писать код в Visual Studio Code. Давайте создадим первый HTML-документ для нашего веб-сайта. Если хотите, вы также можете Читать дальше…

Код Visual Studio

Как загрузить и установить код Visual Studio

Как загрузить и установить код Visual Studio. В этом руководстве мы рассмотрим шаги по загрузке и установке кода Visual Studio. Visual Studio Code — бесплатный редактор исходного кода от Microsoft. Подробнее…

О мире

Этот веб-сайт очень полезен для всех пользователей, интересующихся сферой информационных технологий

Worldofitech обязуется предоставлять всю помощь, связанную с ИТ. Мы здесь, чтобы решить ваши проблемы.Мы решили максимальное количество проблем. Мы написали подробные статьи о компьютерных советах и ​​рекомендациях, устранении неполадок с компьютером, кибербезопасности, этичном взломе, Microsoft Windows Server 2012 и 2019, облаке, AWS, дронах, Amazon FBA, ГИС, как заработать деньги в Интернете, компьютерном программировании, программировании на Python, Программирование на C, программирование на C++, программирование на Java, JavaScrip, структура данных и алгоритмы, SEO, Android, графический дизайн и другие смежные области. Если вы столкнулись с проблемой, которую мы не решили, но все еще нуждаетесь в решении, поделитесь ею с нами через нашу контактную страницу или по электронной почте. Мы будем рады устранить неполадки. Мы сообщим вам по электронной почте, как только решим эту проблему. Так что оставайтесь с нами, а также подписывайтесь на наш канал на YouTube, чтобы увидеть решения в виде видео. Спасибо за поддержку сообщества людей, попавших в беду.

Visual Studio Code — один из самых популярных редакторов кода. Он бесплатный, имеет понятный интерфейс и множество расширений, которые упрощают программирование и делают его более увлекательным.

Я веб-разработчик внешнего интерфейса и использую VS Code во время работы и на своем канале YouTube. Меня многие спрашивали, как браузер автоматически обновляется, пока я пишу код, не нажимая кнопку перезагрузки.

Что ж, это возможно, если вы настроите полезное расширение в VS Code под названием live-server. В этом посте я подробно объясню, как это работает, а также как установить и настроить работающий сервер в редакторе VS Code.

Почему мне следует использовать расширение live-server?

Обычно, когда вы вносите изменения в свой код или пишете что-то новое, вам нужно обновить страницу вручную, чтобы увидеть изменения.

Другими словами, если вы вносите 100 изменений в свой код каждый день, вам нужно обновить браузер 100 раз.

Однако расширение live-server автоматизирует это за вас. После его установки в вашем браузере сможет работать автоматический локальный хост, который вы можете запустить с помощью одной кнопки.

После того как вы внесете изменения в свой код или напишете что-то новое, после сохранения браузер автоматически обновится. Тогда вы сможете увидеть изменения быстро и автоматически.

При желании вы также можете посмотреть обучающее видео ниже:

Сначала установите VS Code

Вы можете пропустить эту часть, если вы уже установили VS Code на свой компьютер. В противном случае вы можете скачать его с официального сайта.

Официальный сайт Visual Studio Code

После загрузки и установки VS Code вы увидите экран приветствия:

С левой стороны вы должны увидеть пару значков. Одна из них (под значком без ошибок) — это кнопка расширения:

После того, как вы нажмете на нее, появится панель поиска. Просто введите «действующий сервер».

Вы увидите множество вариантов, так что вы сможете выбрать тот, который подходит для вашей системы. Я использую Live Server от Ritwick Dey, так что давайте продолжим с ним в этом примере:

Нажмите кнопку установки, и расширение будет установлено.

Создать новую HTML-страницу

Чтобы запустить рабочий сервер, убедитесь, что у вас есть хотя бы HTML-страница. Для этого нажмите кнопку файла в самом верху, затем выберите кнопку нового файла и введите index.html:

Значок нового файла со знаком плюс (второй слева)

Проблемы с конфигурацией

Теперь, после того, как вы создали HTML-страницу и установили расширение, вы должны увидеть значок "Go Live" прямо внизу в синем поле:

Если вы его не видите, просто перезапустите VS Code. Тогда все должно быть в порядке.

Нажмите кнопку "Вступить в действие", и локальный хост (назначенный номеру порта) должен запуститься в вашем браузере по умолчанию. Вы можете запускать и останавливать работающий сервер в любое время, нажав одну и ту же кнопку.

Если вы достигли этого шага, поздравляем! :) Теперь можно работать с live-сервером. В противном случае, если у вас все еще есть проблемы, ознакомьтесь с этим сообщением для получения дополнительной информации.

Заключение

Я надеюсь, что этот пост поможет вам установить и настроить расширение Live Server в VS Code. Если вы хотите узнать больше о веб-разработке, посетите мой канал на YouTube.

Спасибо, что прочитали!

Если вы дочитали до этого места, отправьте твит автору, чтобы показать, что вам не все равно. Твитнуть спасибо

Научитесь программировать бесплатно. Учебная программа freeCodeCamp с открытым исходным кодом помогла более чем 40 000 человек получить работу в качестве разработчиков. Начать

freeCodeCamp – это поддерживаемая донорами некоммерческая организация, освобожденная от налогов в соответствии со статьей 501(c)(3) (идентификационный номер федерального налогоплательщика США: 82-0779546)

Наша миссия: помочь людям научиться программировать бесплатно. Мы достигаем этого, создавая тысячи видеороликов, статей и интерактивных уроков по кодированию — все они находятся в свободном доступе. У нас также есть тысячи учебных групп freeCodeCamp по всему миру.

Пожертвования в пользу freeCodeCamp идут на наши образовательные инициативы и помогают оплачивать серверы, услуги и персонал.

Live Server любит 💘 ваше многокорневое рабочее пространство

Live Server для серверных страниц, таких как PHP. Проверьте здесь

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

Ярлыки для запуска/остановки сервера

[ПРИМЕЧАНИЕ. В случае, если в вашей рабочей области нет файлов .html или .htm, для запуска сервера необходимо использовать методы № 4 и 5.]

Откройте проект и нажмите Go Live в строке состояния, чтобы включить или выключить сервер.

Щелкните правой кнопкой мыши HTML-файл в окне проводника и выберите «Открыть с помощью Live Server». .

Откройте файл HTML, щелкните правой кнопкой мыши редактор и выберите «Открыть с помощью Live Server».

Нажмите (alt+L, alt+O), чтобы открыть сервер, и (alt+L, alt+C), чтобы остановить сервер (вы можете изменить сочетание клавиш). [На MAC-адресе, cmd+L, cmd+O и cmd+L, cmd+C ]

Откройте панель команд, нажав F1 или Ctrl+Shift+P, и введите Live Server: Открыть с Live Server, чтобы запустить сервер, или Live Server: Остановить Live Server, чтобы остановить сервер.

Откройте VSCode и нажмите ctrl+P , введите ext install ritwickdey.liveserver .

Все настройки теперь перечислены здесь Документы настроек.

Все часто задаваемые вопросы теперь перечислены здесь Документы часто задаваемых вопросов

Версия 5.6.1 (17.04.19)

Версия 5.6.0 (17.04.19)

Версия 5.5.1 (12.02.19)

Версия 5.5.0 (12.02.19)

Чтобы просмотреть полный журнал изменений, нажмите здесь.

Особая благодарность специалистам по обслуживанию

Выражаем особую благодарность Максу Шмитту, Джойдип Рою и Айо Адесугба за их бесценное время, потраченное на этот проект.

Это расширение находится под лицензией MIT License

О нас

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

В этом посте мы рассмотрим, как использовать Live Server для запуска страницы в качестве веб-сервера в Visual Studio Code.

Откройте VS Code и выберите «Расширения», затем найдите Live Server. Нажмите Установить:

Далее создайте новую папку, назовите ее как угодно, например html и нажмите «Добавить папку», чтобы добавить ее в VS Code:

Назовите его test.html:

Добавьте немного HTML и сохраните его:

Теперь, чтобы запустить это с помощью Live Server, сделайте следующее.

Введите CTRL-SHIFT-P и выполните поиск Live Server: Открыть с помощью Live Server:

Ваш веб-браузер откроет страницу test.html, используя работающий сервер:

СЕГОДНЯ Я ТРАЧУ БОЛЬШЕ ВРЕМЕНИ, СОЗДАВАЯ ВИДЕО ДЛЯ YOUTUBE, ЧТОБЫ ПОМОЧЬ ЛЮДЯМ ИЗУЧАТЬ ПЛАТФОРМУ MICROSOFT POWER.

ЕСЛИ ВЫ ХОТИТЕ ПОСМОТРЕТЬ, КАК Я СОЗДАЮ ПРИЛОЖЕНИЯ, ИЛИ НАЙДЕТЕ ЧТО-ТО ПОЛЕЗНОЕ, ЧИТАЯ МОЙ БЛОГ, Я БУДУ ОЧЕНЬ БЛАГОДАРЕН, ЧТО ВЫ ПОДПИСАЛИСЬ НА МОЙ КАНАЛ YOUTUBE.

СПАСИБО, ДАВАЙТЕ УЧИТЬСЯ ВМЕСТЕ.

Карл де Соуза — разработчик и архитектор, специализирующийся на Microsoft Dynamics 365, Power BI, Azure и искусственном интеллекте.

Похожие сообщения:

3 ответа на вопрос Использование Live Server в Visual Studio Code

Здравствуйте. Спасибо за этот урок!
Есть ли возможность открыть его внутри VScode (с liveserver), а не в браузере? буду очень благодарен

Здравствуйте!
Меня зовут Ник Лич, я художник визуальных эффектов, который ушел из индустрии, чтобы вернуться в школу компьютерных наук. Просто хочу сказать, что мне нравится этот сайт, и он оказался простым и ценным ресурсом. Просто хотел сказать СПАСИБО!

С моим сайтом возникла проблема. На самом деле я получаю некоторые внешние данные из Интернета на своем веб-сайте. Но когда я открываю свой html-файл без активного сервера, мой веб-сайт не получает эти онлайн-данные, в то время как при запуске активного сервера он начинает получать онлайн-данные.

Пожалуйста, дайте мне решение моей проблемы как можно скорее.
Эта проблема полностью помешала мне сделать мой сайт общедоступным….

Оставить ответ Отменить ответ

О нас

Здравствуйте! Меня зовут Карл де Соуза, я разработчик программного обеспечения и архитектор, специализирующийся на Microsoft Dynamics 365, Power BI, Azure и искусственном интеллекте.

ПОДПИСАТЬСЯ И ПОДПИСАТЬСЯ:

Категории

    (22) (13) (55) (6) (32) (1) (8) (537) (19) (21) (47) (4) (20) (31) (13) (135) (34) ) (142) (7) (11) (11) (7) (7) (5) (3) (43) (4) (47) (12) (2) (3) (10) (1) ( 11) (5) (2) (145) (6) (7)

Последние комментарии

Pragmatic Play, 25 марта 2022 г., 23:35, о том, как вызывать REST API Power BI от Postman Мне нравится, когда люди собираются вместе и делятся мнениями. Отличный сайт, продолжайте в том же духе!

토토 커뮤니티 25 марта 2022 г., 23:06 — Использование записей списка в Power Automate Flow для создания и отправки данных отчета CDS Вот мой веб-сайт :: 토토 커뮤니티

토토 커뮤니티 25 марта 2022 г., 22:25 – Использование всплывающих подсказок для отображения изображения при наведении курсора на запись Power BI Мой пост в блоге; 토토 커뮤니티

Франциско, 24 марта 2022 г., 8:59 – Выявление клиентов и обращений с помощью предварительного разговора в многоканальном режиме Здравствуйте, Карл! Можно ли с помощью этого чата выявить потенциальных клиентов? Заранее спасибо

Читайте также: