Добавляем возможность автоматического обновления страницы в браузере с Atom и server-live-reload

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

Передо мной как и перед всеми разработчиками стал вопрос времени, так как порой верстать сайты нужно очень быстро, то я стал искать возможность автоматического обновления страницы во время разработки. Потому как постоянно нажимать на Ctrl+Shift+r как то не совсем вписывается в канву современного разработчика.

И я нашёл замечательный плагин для Atom, а именно atom-live-server

Смело устанавливаем его в Atom, а дальше немного терпения и перед вами появится магия.

Затаскиваем в Atom папку с нашим проектом и запускаем наше обновление, делается это просто - нажимаем ctrl+shift+p и появляется наша старая консолька, в которой мы набираем server, после чего у нас в ниспадающем меню появится Atom Live Server Satrt:3000, смело выбираем, и у вас откроется ваш браузер по умолчанию со страницей или если это не index.htm, то с папочкой в браузере.

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

Также можно просто в Atom нажать Ctrl+Alt+3, результат будет соответствующий.

Также у вас есть возможность наблюдать за происходящим со своего планшета или смартфона, для этого нужно в адресной строке устройства подключённого по WiFi, ввести IP адрес компьютера и порт 3000, в общем наподобие 192.168.0.1:3000

И всё можно тестировать ваш сайт на различных гаджетах.