Visual studio code не работает live server
В этом руководстве я расскажу о настройке VS Code Server с DigitalOcean и попутно поведаю о приёмах, которые использовал для создания простого и чистого рабочего процесса.
Code Server выполняет Visual Studio Code на удалённом сервере, доступном через браузер.
Зачем мне это нужно?
- Согласованная среда: вы можете писать код на хромбуке, планшете или ноутбуке с согласованной средой разработки, пользуясь “домашними” настройками.
- Мультиплатформенность: все преимущества VS Code будут доступны из любого браузера, включая планшеты.
- Производительность сервера: вы можете пользоваться возможностями крупных облачных серверов для ускорения тестов, компиляции, загрузок и прочего. С помощью DigitalOcean сервера могут быть масштабированы до любого размера.
- Экономия заряда батареи: вы сэкономите энергию заряда, т.к. все вычисления будут производиться на сервере.
Настройка
Представленный ниже вариант настройки очень эффективный с точки зрения гибкости, производительности и экономии:
- С мобильного устройства на основе заготовленного образа создайте Droplet (виртуальный сервер).
- Произведите обновление с GitHub.
- Установите VS Code в браузере вместе с Code Server.
- Выполните необходимую работу.
- Отправьте на GitHub.
- Уничтожьте Droplet.
Создание Droplet
Для написания руководства я предпочёл использовать DigitalOcean, т.к. в нём процесс настройки прост и интуитивно понятен. Тем не менее другие платформы также подойдут.
Для начала нужно создать аккаунт на DigitalOcean.
Создание Droplet
Теперь можно приступить к созданию виртуального сервера, на котором будет выполняться VS Code Server, соответственно, и ваш проект тоже.
- Образ: Ubuntu 18.04 (по умолчанию).
- Тариф: $15/месяц при 2 GB/2 CPU (оптимально).
- Регион: по умолчанию.
- Настройки: для ознакомления не понадобятся.
- Авторизация: создайте новый ключ SSH и выгрузите его в контрольную панель.
Теперь можете жать кнопку “create”.
Подключение через SSH
Лично я использую Terminus, но и любой другой SSH-клиент также подойдёт.
Установка Code Server
Для его установки идите на страницу последних версий и скопируйте ссылку на последний выпуск для Linux.
Выполните в консоли следующие команды:
Скопируйте сгенерированный пароль из вывода консоли и залогиньтесь в Code Server. Теперь полная функциональность VS Code будет доступна вам прямо из браузера.
Кастомизация
Авторизация
По умолчанию установлена авторизация через произвольно сгенерированный пароль. Вы же можете изменить переменную среды password , чтобы использовать свой собственный:
Расширения
Так как официальный маркетплейс VS Code не может использоваться, у Coder есть свой собственный, который предоставляет открытые расширения.
Шрифты
Все шрифты будут работать нормально при условии, что они установлены на локальный компьютер, т.к. отображает текст именно ваш браузер. Например, FiraCode:
Создание образа
Запуск при загрузке
Для настройки я добавил задачи планировщика, чтобы при загрузке получать последнюю версию кода с GitHub и изначально использовать её в код-сервере.
Снимок состояния
DigitalOcean предоставляет простой способ создания образов серверов, на основе которых Droplet могут быть созданы позднее. Переименуйте сервер и сделайте снимок состояния. Как только закончите, можете уничтожить текущий Droplet.
Восстановление
В процессе создания Droplet нажмите на “Snapshots” (снимки состояний) и выберите ранее созданный образ.
Обратите внимание, что установки региона и тарифного плана ограничены установками виртуального сервера, с которого был сделан снимок состояния.
После создания Droplet у вас, как и ранее, появится возможность доступа к код-серверу с того же места, где вы закончили.
Идём дальше
Теперь вы можете запускать и получать доступ к любимым настройкам разработки с помощью одного нажатия кнопки, независимо от используемой сети и компьютера, причём при минимальной стоимости.
Лично для меня очень удобно получать доступ к контрольной панели DigitalOcean с моего мобильного телефона. Также есть неофициальные приложения, использующие свой собственный API, но с ограниченной функциональностью (Android и iOS).
Протестировав клиент на Android, я сделал вывод, что он полноценно подходит только для создания виртуальных серверов.
- размер шрифта уменьшить размер шрифтаувеличить размер шрифта
- Печать
- Эл. почта
- Станьте первым комментатором!
В прошлых статьях ( первая часть , вторая часть ) мы рассмотрели установку среды разработки VSCode под Windows 10 и добавили в неё поддержку языка C++.
VSCode является универсальной IDE, благодаря наличию онлайн каталога с множеством расширений, позволяющих настроить среду как вам удобней. При этом её можно использовать для разработки на разных языках программирования.
Данная среда может использоваться и для разработки HTML-страниц.
Сегодня мы рассмотрим установку двух расширений Browser Preview и Live Server, которые позволяют создавать HTML-сайты не устанавливая отдельный web-сервер, и производить отладку и правку дизайна сайта не переключаясь между редактором и браузером!
Установка расширения Browser Preview
чтобы открыть окно Расширения.
Нам потребуется установить расширения Browser Preview от автора Kenneth Auchenberg.
Данное расширение позволяет вам организовывать просмотр страницы непосредственно в IDE, что очень полезно, при внесении в HTML-страницу множества мелких правок.
Также нам понадобится расширение – Live Server от Ritwick Dey.
Установка расширения Live Server
Это по сути небольшой web-сервер не требующий долгой настройки и готовый к запуску по одному щелчку на кнопку!
После установки Live Server обязательно закройте VSCode и запустите его снова.
Установка
Возможно, вам так же придется установить расширение Debugger for Chrome от Microsoft.
Создание проекта
Давайте создадим тестовый проект для нашей страницы.
Допустим, все проекты у нас будут храниться в папке d:\html
Откроем консоль cmd.exe и введем команды:
Откроется новое окно VSCode, в котором уже открыта папка проекта test1:
Добавим в нее новый файл index.html
Для этого нажмите на указанную кнопку и введите имя файла:
Щелкните на файл, чтобы открыть его в редакторе.
Давайте создадим простейшую страницу:
Проверка HTML-страницы
У нас есть проект и web-страница, пришло время её проверить.
Сначала запустим Live Server, для этого просто нажмите кнопку Go Live:
Откроется новое окно браузера и сервер будет запущен на порту
Закройте вкладку браузера, мы будем использовать Browser Preview
Создание конфигурации для запуска Browser Preview
Выберите меню Run -> Add configuration…
Выберите пункт Browser Preview
Будет создан файл launch.json замените его содержимое на:
Сохраните и закройте вкладку.
Запустите Browser Preview, для этого нажмите F5 или на указанную кнопку, она появится после первого запуска конфигурации:
.
Нажмите на «Запустить test1…»
Откроется вкладка с нашей страницей:
Работа с Browser Preview
Данное расширение очень удобно при разработке страниц с нуля, так как позволяет видеть изменения сразу после сохранения страницы.
Давайте добавим текст на страницу:
Нажмите Ctrl+S – страница будет сохранена и тут же обновиться вкладка с нашим сайтом в Browser Preview
Отладка сайта в браузере
Вы можете использовать внешний браузер для отладки сайта, запущенного в Live Server
Я расположил окна рядом, для большей наглядности.
Давайте добавим еще одну строку в html-файл:
Сохраним файл – содержимое обновится и в браузере, и во вкладке Browser Preview.
Заключение
Сегодня мы рассмотрели настройку среды разработки VSCode для разработки HTML-страниц.
Мы установили расширения Browser Preview и Live Server.
Создали тестовую страницу.
Настроили профиль для запуска нашей страницы в Browser Preview.
Открыли нашу страницу во вкладке Browser Preview и протестировали автоматическое обновление содержимого вкладки при обновлении содержимого HTML-страницы.
Протестировали обновление страницы в Google Chrome при обновлении содержимого файла.
В следующей статье мы рассмотрим настройку VSCode для разработки на языке программирования PHP.
Всего за пару кликов Live Server позволяет увидеть вашу страницу в реальном времени в реальном браузере. Более того, он имеет функцию перезагрузки в реальном времени, поэтому, если вы обновите свой код, изменения также будут отражены в браузере.
Все, что вам нужно сделать, это щелкнуть правой кнопкой мыши HTML-файл, который вы хотите просмотреть, затем щелкнуть правой кнопкой мыши и выбрать «Открыть с помощью Live Server»:
Но что, если Live Server не открывает ваш браузер и не отображает вашу страницу так, как вы ожидаете? Если это происходит с вами, вот несколько вещей, которые вы можете попробовать.
Перезапустить VSCode
Во-первых, сохраните всю свою работу. Затем закройте VSCode, который также остановит все установленные вами расширения.
Установите браузер для Live Server
Возможно, расширение работает, но в вашей системе нет браузера по умолчанию.
Даже если вы установили браузер по умолчанию для своей системы, не помешало бы сообщить Live Server, какой браузер вы хотите использовать явно.
Сначала откройте Command Pallete с помощью F1, затем введите Preferences: Open Settings (JSON) и выберите эту опцию.
Это откроет ваш settings.json файл VSCode .
Наконец, сохраните settings.json файл и попробуйте снова запустить Live Server.
Установите браузер по умолчанию для вашей операционной системы
Даже после того, как Live Server сообщил, какой браузер вы хотите использовать, возможно, что он по-прежнему неправильно открывает вашу страницу в этом браузере.
Точный метод для этого может варьироваться в зависимости от вашей операционной системы, поэтому лучше поискать, как это сделать, если вы не уверены.
Вот как выглядит страница настроек в Windows:
Зайдите на живую страницу сами
Если по какой-то причине Live Server по-прежнему не открывает страницу в вашем браузере автоматически, не беспокойтесь. Вы всегда можете открыть любой браузер по вашему выбору и просмотреть страницу напрямую.
Просто откройте предпочтительный браузер и перейдите в //127.0.0.1:5500/ .
Например, если ваш файл называется index.html , просто перейдите по ссылке //127.0.0.1:5500/index.html .
Пока работает Live Server, вы должны видеть свою страницу.
В заключение
Это несколько распространенных исправлений, которые вы можете попробовать, если Live Server не работает так, как вы ожидаете.
Оставайтесь в безопасности и счастливого (живого) программирования.
Visual Studio Code Live Server Not Working
VSCode has a lot of great extensions, and Live Server is one of the best.
With just a couple of clicks, Live Server lets you see your page live in an actual browser. Better yet, it features live reloading, so if you update your code, the changes are also reflected in the browser.
Live Server in action
Restart VSCode
Sometimes the best you can do is start VSCode from scratch.
Set the browser for Live Server
First, open the Command Pallete with F1, then type in Preferences: Open Settings (JSON) and select that option.
This will open your VSCode settings.json file.
Finally, save the settings.json file and try to run Live Server again.
Set the default browser for your operating system
The next thing to try is to set the default browser for your operating system itself.
Credit: Advitya-sharma
Go to the live page yourself
As long as Live Server is running, you should see your page.
In closing
Stay safe, and happy (live) coding.
If this article was helpful, tweet it.
freeCodeCamp is a donor-supported tax-exempt 501(c)(3) nonprofit organization (United States Federal Tax Identification Number: 82-0779546)
Donations to freeCodeCamp go toward our education initiatives and help pay for servers, services, and staff.
Live server installed but not working in VS code
I have installed the live server extension but the browser does not update after I save my HTML or other files. What might be causing a problem?
11 Answers 11
I had this problem and I solved it by changing the port number in the settings.json file to an opened one.
This will randomly pick an opened port each time. This is how my JSON file looks like:
If there are multiple lines in the JSON file, make sure each line is separated by a comma( , ), like this:
Re-install the extension and restart your text editor to fix the issue.
Then this may be due to connection issue on your system.
I had same problem when i was compiling below html page:
Solved it by changing live server settings to my local IP and it fixed issue.
This works for anyone for whom live server is not running by default with port 5500.
It is because you have added insufficient paths in your Environmental variables.
First you can do is close the vs code
Go to the properties of My Pc
Click on Advanced Settings
click on Environmental Variables
from there you can add path clicking the path variables in the table shown there 6 . Add a new line to the path and copy paste the path of your system 32
hope this solution works in your case
Note: some time port number 5500 will be changed to 5501
I had a space in the file name, where the index.html was to be found.
Like: 3. Typography .
Just got rid of the space: 3.Typography because (of course) we can not have empty spaces in a url.
its easy to solve. just open setting by (ctrl + ,)and pick commonly Used first field is a (Auto save) Its value is by default off you must change it to After delay
I have same problem then i solve it by deleting all settings of live server from settings.json file and reinstall live server extension and now running it correctly.
Turn on the autosave feature on. File-> AutoSave
Also, make sure that the autosave feature in vscode is enabled, which you can do by going to vscode settings shortcut : Ctrl + , and then type autosave. Change Files: Auto Save to afterDelay and if you want to view the changes in your code instatenously, edit Files: Auto Save Delay to 1 .
Comments
ghost commented Jun 17, 2018
live server version 5.0.0
The text was updated successfully, but these errors were encountered:
rjoydip commented Jun 17, 2018
@tori-333 No, there is no change in commands/keybindings/menus . Can you check your console? Is there any error?
ghost commented Jun 17, 2018
Sorry, Because I do not understand English, this sentence was translated by Goole.
Устранение неполадок Visual Studio Live Share
В этой статье рассматриваются советы по устранению неполадок, обходные пути и ответы на распространенные проблемы и вопросы. Вам также может потребоваться взглянуть на часто задаваемые вопросы.
Требования к установке и средствам
Ниже приведены советы по устранению неполадок, связанные с установкой Visual Studio Live Share.
Войти
Ниже приведены советы по устранению неполадок при входе в систему.
Общий доступ и объединение
Ниже приведены советы по устранению неполадок при входе в систему.
| Средство | Проблема | Решение и обходной путь |
|---|---|---|
| Все | Общий доступ или соединение: Вы получаете время ожидания или ошибку о том, что не удается подключиться. | См. раздел Устранение неполадок с подключением. |
| VS Code | Соединение: после открытия страницы присоединение в браузере не выводится запрос на запуск VS Code . | Советы. |
Подключение
Приведенные ниже сведения помогут устранить неполадки при возникновении проблем с подключением или превышением времени ожидания при входе, предоставлении общего доступа или присоединении.
как описано в статье требования к подключению для Live Share , разные режимы подключения имеют различные требования к функционированию, поэтому существует несколько различных возможных проблем.
дополнительные сведения о требованиях к подключению см. в статье требования к подключению для Live Share .
В этом руководстве я расскажу о настройке VS Code Server с DigitalOcean и попутно поведаю о приёмах, которые использовал для создания простого и чистого рабочего процесса.
Code Server выполняет Visual Studio Code на удалённом сервере, доступном через браузер.
Зачем мне это нужно?
- Согласованная среда: вы можете писать код на хромбуке, планшете или ноутбуке с согласованной средой разработки, пользуясь “домашними” настройками.
- Мультиплатформенность: все преимущества VS Code будут доступны из любого браузера, включая планшеты.
- Производительность сервера: вы можете пользоваться возможностями крупных облачных серверов для ускорения тестов, компиляции, загрузок и прочего. С помощью DigitalOcean сервера могут быть масштабированы до любого размера.
- Экономия заряда батареи: вы сэкономите энергию заряда, т.к. все вычисления будут производиться на сервере.
Настройка
Представленный ниже вариант настройки очень эффективный с точки зрения гибкости, производительности и экономии:
- С мобильного устройства на основе заготовленного образа создайте Droplet (виртуальный сервер).
- Произведите обновление с GitHub.
- Установите VS Code в браузере вместе с Code Server.
- Выполните необходимую работу.
- Отправьте на GitHub.
- Уничтожьте Droplet.
Создание Droplet
Для написания руководства я предпочёл использовать DigitalOcean, т.к. в нём процесс настройки прост и интуитивно понятен. Тем не менее другие платформы также подойдут.
Для начала нужно создать аккаунт на DigitalOcean.
Создание Droplet
Теперь можно приступить к созданию виртуального сервера, на котором будет выполняться VS Code Server, соответственно, и ваш проект тоже.
- Образ: Ubuntu 18.04 (по умолчанию).
- Тариф: $15/месяц при 2 GB/2 CPU (оптимально).
- Регион: по умолчанию.
- Настройки: для ознакомления не понадобятся.
- Авторизация: создайте новый ключ SSH и выгрузите его в контрольную панель.
Теперь можете жать кнопку “create”.
Подключение через SSH
Лично я использую Terminus, но и любой другой SSH-клиент также подойдёт.
Установка Code Server
Для его установки идите на страницу последних версий и скопируйте ссылку на последний выпуск для Linux.
Выполните в консоли следующие команды:
Скопируйте сгенерированный пароль из вывода консоли и залогиньтесь в Code Server. Теперь полная функциональность VS Code будет доступна вам прямо из браузера.
Кастомизация
Авторизация
По умолчанию установлена авторизация через произвольно сгенерированный пароль. Вы же можете изменить переменную среды password , чтобы использовать свой собственный:
Расширения
Так как официальный маркетплейс VS Code не может использоваться, у Coder есть свой собственный, который предоставляет открытые расширения.
Шрифты
Все шрифты будут работать нормально при условии, что они установлены на локальный компьютер, т.к. отображает текст именно ваш браузер. Например, FiraCode:
Создание образа
Запуск при загрузке
Для настройки я добавил задачи планировщика, чтобы при загрузке получать последнюю версию кода с GitHub и изначально использовать её в код-сервере.
Снимок состояния
DigitalOcean предоставляет простой способ создания образов серверов, на основе которых Droplet могут быть созданы позднее. Переименуйте сервер и сделайте снимок состояния. Как только закончите, можете уничтожить текущий Droplet.
Восстановление
В процессе создания Droplet нажмите на “Snapshots” (снимки состояний) и выберите ранее созданный образ.
Обратите внимание, что установки региона и тарифного плана ограничены установками виртуального сервера, с которого был сделан снимок состояния.
После создания Droplet у вас, как и ранее, появится возможность доступа к код-серверу с того же места, где вы закончили.
Идём дальше
Теперь вы можете запускать и получать доступ к любимым настройкам разработки с помощью одного нажатия кнопки, независимо от используемой сети и компьютера, причём при минимальной стоимости.
Лично для меня очень удобно получать доступ к контрольной панели DigitalOcean с моего мобильного телефона. Также есть неофициальные приложения, использующие свой собственный API, но с ограниченной функциональностью (Android и iOS).
Протестировав клиент на Android, я сделал вывод, что он полноценно подходит только для создания виртуальных серверов.
Читайте также: