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

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

Приступим к настройке.

1. Настройки браузера Google Chrome

Открываем браузер Google Chrome (в статье рассматриваю только данный браузер, т.к. другими не пользуюсь), переходим в «Меню» (троеточие сверху справа) — «Дополнительные инструменты» — «Расширения»:

Переходим в «каталог расширений» по ссылке «Открыть Интернет-магазин Chrome»:

В поисковой строке вводим запрос на поиск «LiveReload» и переходим на страницу плагина, щелкнув по заголовку:

Щелкаем «Установить»:

В появившемся всплывающем окне «Установить расширение». На этом завершаем настройку браузера и переходим к настройке редактора Sublime Text 4.

2. Настройка редактора Sublime Text 4

Щелкаем кнопки на клавиатуре «Ctrl + Shift + P», вызываем окно списка функций. В этом окне можно найти, скачать и установить функции, плагины для редактора и т.д.

В строке поиска пишем «Package Control», выбираем вариант «Package Control: Install Pakage», а затем ищем плагин «LiveReload», устанавливаем:

Далее переходим в «Preferences» — «Package Settings» — «LiveReload» — «Settings - User» и вставляем следующий код:

{
"enabled_plugins": [
"SimpleReloadPlugin",
"SimpleRefresh"
]
}

Теперь не нужно при каждом запуске Sublime Text включать LiveReload.

Финальным шагом, в браузере Google Chrome нажимаем на значок в правом верхнем углу «LiveReload» для синхронизации с Sublime Text.