Livereload sublime text 3 не работает: Как заставить работать LiveReload + Sublime Text 3 в Chrome? — Хабр Q&A – Как подружить Sublime Text 3 и LiveReload? — Хабр Q&A

livereload sublime text 3 не работает

На чтение 5 мин. Просмотров 3 Опубликовано

Сегодня мы рассмотрим настройку популярного редактора кода Sublime Text 3 для веб-разработки.

Внимание! Вышла более новая версия руководства.
С новым материалом вы можете ознакомиться Здесь.

Плагины

emmet — плагин для скоростной верстки.

livereload — автообновление страницы.

Для корректной работы плагина LiveReload в Sublime Text 3 необходимо дописать в пользовательских настройках плагина следующую конструкцию (подробнее в видео):

sass — настроим корректную подсветку SASS в Sublime Text 3.

jade — HTML препроцессор.

gist — плагин для быстрого доступа к вашим сниппетам на GitHub.

brackethighlighter — подсветка скобок, тегов в Sublime Text 3.

autofilename — автокомплит для подключения внешних файлов в верстку.

colorhighlighter — подсветка цвета.

BufferScroll — сохранение позиции курсора в документе.

Goto-CSS-Declaration — плагин для быстрого поиска соответствующего класса в CSS, SASS, LESS.

Фишки

  • Поменяем тему на twilight.
  • Научимся множественному выделению.
  • Назначим клавиши для события reindent (хоткей для автоматического формата документа).
  • Научимся управлять числовыми значениями (Инкремент и Декремент).

Ссылки

LiveReload Browser Extension: http://livereload.com/extensions/

Премиум уроки от WebDesign Master

Создание контентного сайта на Jekyll от А до Я

Создание современного интернет-магазина от А до Я

Я — фрилансер! — Руководство успешного фрилансера

Нужно, чтобы LiveReload отслеживал определенные типы файлов, а не все. Сейчас в настройках пользователя такой код:

3 ответа 3

Одним из решений может быть выкинуть сервер LiveReload, который поддерживает пакет для Sublime Text.

Это не единственная реализация LiveReload-сервера.

Есть также guard-livereload : плагин для системы Guard для выполнения действий при изменении файлов. Он написан на Ruby и потому для работы требует установленного Ruby. Порядок установки минимально отличается от других плагинов для Guard, вроде guard-haml , об установке и запуске которого я уже писал ранее.

В Guardfile можно задать шаблоны путей, изменение файлов по которым даст сигнал клиенту LiveReload для обновления. В README есть пример:

Код выше, разумеется, на Ruby. Каждая строчка watch добавляет на отслеживание пути, подходящие под регулярное выражение, относительно корня проекта (рабочей директории, где запущен guard ). Регулярка записывается /так/ , %r , или другими способами. Само выражение можно проверить на Rubular или просто в Interactive Ruby (IRB).

Guard можно загрузить и другими задачами, связанными с реакцией на изменение файлов.
См. список плагинов Guard.

February 12, 2013

В предыдущей статье, посвященной вопросу автообновления страниц в окне браузера, я упоминал об плагине для редактора Sublime Text 2 под названием LiveReload. Сегодня я вернусь к этому вопросу и выполню установку этого плагина. Она проста — там нет ничего сложного.

Итак, приступаем к установке и настройке LiveReload в Sublime Text 2.

Первое, что необходимо сделать, это установить менеджер пакетов в редакторе. Установка пакетов в Sublime Text может выполняться двумя способами — вручную или же автоматически. Последний способ более простой и удобный, поэтому воспользуюсь им.

Установка менеджера пакетов

Открываем Sublime Text и переходим в меню по пути “View — Show Console” или же нажимаем сочетание клавиш , затем копируем и вставляем нижеприведенный код в окно консоли:

Жмем Enter и затем закрываем и снова открываем Sublime Text, чтобы изменения вступили в силу. Менеджер пакетов установлен.

Установка LiveReload

Переходим к установке плагина LiveReload в Sublime Text 2. Переходим в меню по пути “Preferences — Package Control”:

В менеджере пакетов выбираем из списка пункт “Package Control: Install Package”:

Немного подождем, пока загрузится список пакетов. Затем в окне поиска введем имя пакета — “LiveReload”:

Жмем Enter kbd> — пара секунд и плагин установлен. Снова перезагружаем редактор, чтобы изменения вступили в силу:

Установка расширения LiveReload в Chrome

Плагин LiveReload работает совместно с одноименным расширением, которое устанавливается в браузер. В моем случае это будет Google Chrome. Приступаю к установке.

В настройках Chrome перехожу в раздел с расширениями и ввожу в строку поиска имя плагина — “LiveReload”:

Соглашаюсь со всем и жму кнопочку “Установить”. Перезагрузки браузера не требуется — в панели инструментов сразу появляется значок расширения в виде двух круговых стрелочек.

Установка расширения произведена.

Тестирование плагина LiveReload

Открываю в Sublime Text 2 редактируемый HTML-файл. И открываю его же в браузере Google Chrome. Нажимаю мышью на значок расширения LiveReload в панели инструментов и вижу в строке статуса следующее:

Это говорит о том, что плагин в редакторе Sublime Text 2 успешно подключился к плагину LiveReload в браузере. Можно приступать к работе. Изменяю код в файле, сохраняю изменения и вижу, как они автоматически применились в окне Chrome.

Заключение

Применение плагина LiveReload мне кажется более удобным, нежели расширения, рассмотренные в предыдущей статье. Хотя бы тем, что изменения автоматически вступают в силу, не нужно ждать даже 1 секунды. Главное, не забыть нажать сочетание клавиш Ctrl + S . Вот если бы и этого не нужно было делать, было бы совсем замечательно!.

RxJs — map

Первый «серьезный» метод в моей RxJs-копилке знаний. На самом деле все просто — этот метод получает на вход поток, обрабатывает каждый ev. … Continue reading

sublimetext3 - Как установить LiveReload на Sublime Text 3?

Платформа я использовал: Linux Mint 17+
Я хочу поблагодарить http://anthozano.fr/livereload-pour-sublime-text-3/ . Я был в состоянии управлять живой перезарядкой на возвышенном тексте 3 с инструкциями на сайте. Тем не менее, сайт написан на французском языке (я верю - Google перевод сказал), так что я мог бы написать шаги здесь.

Сначала установите возвышенный текст-здесь http://www.sublimetext.com/3 или следовать своему собственному пути , который вы предпочитаете (я сделал это с Linux Mint менеджер пакетов).

Во- вторых, установить контроль пакет отсюда https://packagecontrol.io/installation#st3 (инструкция ясно дается на веб - сайте , так что я не объяснить это много).

В- третьих, открытый контрольный пакет (Shortcut: Ctrl+Shift+P) и поискPackage Control: Add Repository

Теперь наступает область для ввода URL в нижней части окна возвышенного текст 3. Введите https://raw.github.com/Grafikart/ST3-LiveReload/master/package.json.

Снова откройте контрольный пакет и поиск ,

Package Control: Install Packageа затем искать LiveReloadв появившемся окне.

Настройка LiveReload пакета Установка на Preferences > Package Settings > LiveReload > Setting - Defaultи вставьте:

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

Теперь для вашего браузера, установить LiveReload штепсель , как показано ниже:
Firefox : http://download.livereload.com/2.1.0/LiveReload-2.1.0.xpi
Chrome : https://chrome.google.com/webstore/detail / LiveReload / jnihajbhpnppcggbcgedagnkighmdlei
Safari : http://download.livereload.com/2.1.0/LiveReload-2.1.0.safariextz

Не забудьте включить плагин LiveReload в браузере после установки его, так что вы можете увидеть изменения кода, отраженные в браузере сразу.

Примечание: пользователи Chrome, для LiveReload поддержки file://страниц, перейдите chrome://extensions/, и галочку Allow access to file URLs.

Снимок взят из Safari для Mac OSX: введите описание изображения здесь

Наслаждайтесь, Живите Reload с Sublime Text 3.

Благодаря Энтони Лозано для http://anthozano.fr/livereload-pour-sublime-text-3/ .

Как установить LiveReload на Sublime Text 3?

Платформа, которую я использовал: Linux Mint 17+
Я хочу поблагодарить http://anthozano.fr/livereload-pour-sublime-text-3/ . Я смог запустить live reload на sublime text 3 с инструкциями на веб-сайте. Тем не менее, сайт написан на французском языке (я полагаю, - сказал Google translate), поэтому я подумал, что могу написать шаги здесь.

Сначала установите sublime text 3 отсюда http://www.sublimetext.com/3 или следуйте своим собственным путем, который вы предпочитаете (я сделал это с помощью Linux Mint Package manager).

Во-вторых, установите управление пакетами отсюда https://packagecontrol.io/installation#st3 (инструкция явно дана на сайте, поэтому я не стал много объяснять).

В-третьих, откройте элемент управления пакетом (ярлык: Ctrl+Shift+P

) и найдите Package Control: Add Repository

Теперь появляется область для ввода URL в нижней части окна sublime text 3. Введите https://raw.github.com/Grafikart/ST3-LiveReload/master/package.json .

Снова откройте управление пакетами и найдите Package Control: Install Package , а затем найдите LiveReload в следующем окне.

Настройте параметр пакета LiveReload на Preferences > Package Settings > LiveReload > Setting - Default и вставьте это :

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

Теперь для Вашего браузера установите LiveReload plug in , как показано ниже :
Firefox : http://download.livereload.com/2.1.0/LiveReload-2.1.0.xpi
Хром : https://chrome.google.com/webstore/detail/livereload/jnihajbhpnppcggbcgedagnkighmdlei
Safari : http://download.livereload.com/2.1.0/LiveReload-2.1.0.safariextz

Не забудьте включить плагин LiveReload в браузере, как только вы его установили, так что вы можете сразу увидеть изменения кода, отраженные в браузере.

Примечание: пользователи Chrome, для того чтобы LiveReload поддерживал file:// страницы, перейдите к chrome://extensions/ и отметьте Allow access to file URLs.

Снимок сделан с Safari для Mac OSX: enter image description here

Наслаждайтесь, Живая перезагрузка с возвышенным текстом 3.

Спасибо Энтони Лозано за http://anthozano.fr/livereload-pour-sublime-text-3/ .

Как навсегда включить плагин Sublime Text 3 LiveReload

Недавно я установил плагин LiveReload для Sublime Text 3. Я также установил расширение LiveReload хром. Все работает отлично, однако есть одна оставшаяся головная боль. Мне нужно войти в управление пакетами в Sublime и включить плагин LiveReload Simple Reload каждый раз, когда я открываю Sublime. Есть ли способ постоянно включать Плагины Sublime Text 3 LiveReload?

plugins sublimetext3 livereload

Поделиться

Источник MattDionis     01 сентября 2014 в 00:44

2 Ответа



4

Я установил: https://github.com/Grafikart/ST3-LiveReload

Далее: Настройки - > Настройки Packge - > LiveReload - > настройки-пользователь

Добавь:

{ 
    "enabled_plugins": [
        "SimpleRefresh"
    ]
}

Поделиться Ziv     22 марта 2015 в 15:30



1

{

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

Поделиться Lorena Pita     23 октября 2016 в 19:23



Как установить LiveReload на Sublime Text 3?

Я использую Sublime Text 3 и хочу использовать LiveReload . У меня уже установлен плагин для браузера Chrome. Node.js также установлен. Для Sublime Text 3 Live Reload этот плагин должен быть...


LiveReload для Sublime Text 3 был удален

Я хочу установить LiveReload для Sublime Text 3. Однако, когда я перехожу к управлению пакетом для установки, я понимаю, что LiveReload больше нет. Когда я посещаю этот сайт:...


LiveReload для Sublime Text 3-не работает

Я установил LiveReload для Sublime Text 3, следуя этому руководству . Я установил плагин LiveReload для FireFox (он включен). Я проверил его с помощью этого простого кода HTML: <!DOCTYPE HTML>...


Sublime Text 3 и LiveReload расширение Google Chrome

Я скачал новый Sublime Text 3 и не могу получить рабочее расширение LiveReload Google Chrome Я знаю, что он работает для Sublime Text 2, но могу ли я использовать его с ST3?


Как включить плагин brackethighlighter в sublime text 3?

Я использую sublime text 3 build 3059, плагин brackethighlighter установлен, но не работает как заставить его работать ? я попробовал несколько решений, но безрезультатно. вот скриншот:


Sublime Text 3 / LiveReload, настройки задержки

Мои извинения за этот вопрос, но я не нашел решения, прочитав документы и / или соответствующий git-rep. Как я могу включить задержку для LiveReload, прежде чем он перезагрузит страницу? Текущая...


Как установить SFTP плагин в Sublime Text 3 на Windows 7 64bit

Я не могу установить плагин ST3 SFTP на Windows 7 64bit. Он установлен, но все его меню серые, неактивны. Я прочел поддержку. Там написано:: Чтобы исправить это, выполните следующие действия:...


sublime text 3 плагин для удаления кавычек

Я пытаюсь преобразовать этот плагин из Sublime Text 2 в Sublime Text 3, но я продолжаю работать с этой ошибкой File /Users/macintoshhd/Library/Application Support/Sublime Text...


Sublime text 3 и плагин Web Inspector

Я единственный человек, имеющий проблемы с этим плагином в Sublime Text 3? Я клонировал его из РЕПО github, и когда я пытаюсь запустить удаленную отладку chrome с помощью командной панели Sublime,...


Плагин Sublime Text 3, Anaconda, не работает

Я установил плагин anaconda с помощью управления пакетом в sublime text 3, я установил python 33 и anaconda отдельно, и их путь был добавлен в переменную PATH в MS Windows 7 (Если это имеет...


LiveReload для Sublime Text 3-не работает

Я установил LiveReload для Sublime Text 3, следуя этому руководству here .

Я установил плагин LiveReload для FireFox (он включен).

Я проверил его с помощью этого простого кода HTML:

<!DOCTYPE HTML>
<html>
    <head>

    </head>
    <body>
        <h2>Hello World!</h2>
    </body>
</html>

По какой-то странной причине это не работает. Что может вызвать эту проблему?

sublimetext3 livereload

Поделиться Источник Robiow     25 апреля 2016 в 13:03

2 Ответа



5

Решение:

  • Откройте палитру команд с помощью Ctrl + Shift + P
  • Тип LiveReload
  • Когда подсвечивается 'Enable/disable плагина, нажмите Enter .

Или

  • Перейдите в Настройки > настройки пакета > LiveReload > Плагины > включить / отключить плагины и нажмите Enter .

Поделиться Robiow     25 апреля 2016 в 13:14



0

В случае chrome, нажмите на три точки в правом верхнем углу браузера. Перейдите в раздел Дополнительные инструменты>Расширения>найдите live reload extension.Click в деталях, а затем разрешите доступ к файлу URL, как показано на фотографии после этого перейдите к тексту sublime. Перейдите в Настройки > настройки пакета>LiveReload > плагин и нажмите включить / отключить Плагины. (Если плагин был отключен, он будет включен и наоборот) Затем не забудьте закрыть как браузер, так и sublime text и снова открыть оба. Это должно сделать трюк.

Поделиться abhishek singh     25 февраля 2019 в 08:14



Как навсегда включить плагин Sublime Text 3 LiveReload

Недавно я установил плагин LiveReload для Sublime Text 3. Я также установил расширение LiveReload хром. Все работает отлично, однако есть одна оставшаяся головная боль. Мне нужно войти в управление...


LiveReload для Sublime Text 3 был удален

Я хочу установить LiveReload для Sublime Text 3. Однако, когда я перехожу к управлению пакетом для установки, я понимаю, что LiveReload больше нет. Когда я посещаю этот сайт:...


Как установить LiveReload на Sublime Text 3?

Я использую Sublime Text 3 и хочу использовать LiveReload . У меня уже установлен плагин для браузера Chrome. Node.js также установлен. Для Sublime Text 3 Live Reload этот плагин должен быть...


Sublime Text 3 и LiveReload расширение Google Chrome

Я скачал новый Sublime Text 3 и не могу получить рабочее расширение LiveReload Google Chrome Я знаю, что он работает для Sublime Text 2, но могу ли я использовать его с ST3?


Livereload не работает в Chrome с помощью Gulp, чего мне не хватает

Я пытаюсь использовать Livereload, используя Gulp, Sublime Text 3 и Chrome, но по какой-то причине это не работает. Вот что я сделал. Установил расширение Livereload в Chrome. Установлен...


LiveReload на возвышенное текст 3

LiveReload, похоже, не работает над sublime text 3, Когда я загружаю его из элемента управления пакетом. Я нашел эту ссылку ( https://github.com/dz0ny/LiveReload-sublimetext2/tree/devel ) на github,...


Xdebug отладки не работает на Sublime Text 3

У меня возникли проблемы с Xdebug не работает с Sublime Text 3. Сервер, который я использовал, - это wampserver. Я использую мастер Xdebug, для какой версии я должен установить. Вот такая картинка:...


Как установить вручную пакет для sublime text на osx?

Попытка установить сторонний пакет ST3-LiveReload для Sublime text ( https://github.com/Grafikart/ST3-LiveReload ) на osx вручную (этот пакет отсутствует в диспетчере пакетов). Когда я извлекаю...


Sublime Text 3 / LiveReload, настройки задержки

Мои извинения за этот вопрос, но я не нашел решения, прочитав документы и / или соответствующий git-rep. Как я могу включить задержку для LiveReload, прежде чем он перезагрузит страницу? Текущая...


Почему Sublime Text 3 не работает для меня?

Как мне решить эту проблему? Ошибка при попытке проанализировать файл: нет данных в Packages\User\Default (Windows).sublime-keymap:1:1 Всякий раз, когда я пытаюсь открыть Sublime Text 3, Эта ошибка...


Отправить ответ

avatar
  Подписаться  
Уведомление о