Настройка Sublime Text 3 для веб-разработки: LiveReload, плагины, фишки

5160 ratings | 351283 views


Настройка Sublime Text 3 для веб-разработки: LiveReload, плагины, фишки

Полезно? Подпишись - Обновлённый урок по Sublime Text: Страница с материалами урока: Сегодня мы рассмотрим настройку популярного редактора кода Sublime Text 3 для веб-разработки. Создание интернет-магазина от А до Я - Я - фрилансер! - Создание сайта-портфолио на WordPress - Группа Вконтакте: Реклама на канале:

Comments to the video: Настройка Sublime Text 3 для веб-разработки: LiveReload, плагины, фишки

WebDesign Master 4 months ago
Обновлённый задание по Sublime Text:
Rodion Sorokin 7 days ago
класс супер
Алексей Мукучян 8 days ago
А вот если у тебя yandex браузер будто для него поставить?
Саня Сила 8 days ago
Подскажите изволь, где на данный момент можно скачать LiveReload для ST3, я этак сообразил ссылка, данная в уроке уже недействительна, промах 404
JET 13 days ago
Для того что бы появилось отворить в браузере нужно поновой сделать индекс и отворить с помощью Open with Sublime Text.
Сергей Шеин 28 days ago
Всем привет! Установил в саблайм несколько плагинов, в том числе и emmet. Но что то пошло не этак потом перезагрузки и эммет не срабатывает. к примеру потом команды ! +таб не происходит развертывания. Подскажите в чем дело?
Сергей Торгашов 2 months ago
Спасибо, задание потрясающий и весьма познавательный. Но стопроцентно настроить программку удалось лишь часа чрез 4-5, очень завис на Лив Релоаде. На мозилу вообщем не сумел поставить. Для тех, у кого с первого раза не получится, и вы будете устранять программку, потом нее остаются папки в настройках, а также кэш. Их необходимо устранять в ручную, я чрез розыск в виндовс это сделал, ввёл слово sublime, система отыскала все файлы, сносишь их и повторная установка норм пройдет.
SlimShow 2 months ago
Есть еще вариант насчет LiveReload, решил прописаь строчки кода не в User, а в Default, те же что и в User, перезапустил все, и заработало.
Виктор Лукьянченков 3 months ago
Спасибо! Для меня это самое полезное видео по bootstrap.
Konstantin Afanasev 4 months ago
Как вы настроили LiveReload, чтоб при сохранении *.sass не перезагружалась страничка? У вас в уроках по сохранению *.sass одномоментно применяется *.css без перезагрузки странички.
ольга лидовских 4 months ago
будто поменять шифровку в редакторе?
l Axel l 4 months ago
немогу сохранить файл пишет: Error trying to parse file: Unexpected trailing characters in Packeges\Default\Default (Windows).sublime-keymap:1:54
AZ 4 months ago
у меня win10 цельный денек провозился с саблаймом. не заработал ни emmet и автообновление. Слишком немало заморочек, для того, чтобы приступить в нем трудиться.
WebDesign Master 4 months ago
Это видео устарело. В описании и в комментах я указал ссылка на обновлённое. Плюс в самом видео кушать инструкция со ссылкой на новое видео, которую трудно не увидеть.
In Trance 4 months ago
Спасибо за детальный разбор!Не ставил галочку при установке,однако можно это разрешить: попросту избрать отворить с помощью ,там избрать Sublime Text и прибрать галочку использовать избранную программку для всех файлов такового типа в итоге Sblime text попросту появится в перечне отворить с помощью ,и не будет обнаруживать файлы по умолчанию.
Ramiz 4 months ago
Подскажите изволь, отчего у меня не работает изменение опций (preferences.sublime-setings)? Перезагружал и все равно невозможно ничего поменять. И preferences.sublime-setings у меня находятся не в папке default , а в примыкающей users.
Ramiz 4 months ago
Спасибо ) я разобрался, необходимо было этак же в папке default сделать файл preferences.sublime-settings , вобщем сделать похожую функцию будто с файлом default.
WebDesign Master 4 months ago
От версии к версии Sublime Text изменяется. Это достаточно старенькое видео, я рекомендую вам поглядеть более свежее и животрепещущее видео:
антон викторов 5 months ago
У меня не корректно работает emmet. Не принимает знаки >, !, точки
Alex Lisouski 5 months ago
Спасибо создателю! Вопрос в догонку. Sublime просит лицензионный ключ и выходит лишь брать придеться?
German Martirosyan 5 months ago
Хорошее видео, единственное - не необходимо дублировать дефолтные характеристики в новеньком файле, они залочены для того, чтоб вечно был запасный откат. Саблайм употребляет принцип переопределения опций с помощью Settings - User
-ReD- 5 months ago
В браузере Livereload работает, а вот в Sublime приходится хранить чрез CTRL-S, само не сохраняет,хотя всё установлено!((( Ещё при запуске Sublime выскакивает окошко с предупреждением: port(35729) is already using trying (35730) Думаю неувязка в этом. Подскажите будто поправить!
Ivan Zolotukhin 5 months ago
Установил токен с Git нажимаю ctrl+k+o и раскрывается попросту моя папка с файлами, не раскрывается окно будто у вас, в чем неувязка может быть?
Connor MacMannus 5 months ago
Спасибо
Yuriy Petrichenko 6 months ago
thank's
Гріша Відєєв 6 months ago
у меня Open in Browser всёравно не поевляетса, что необходимо мастерить чтоб появился, у меня браузер Google Chrome
Атхам Султон 6 months ago
бинд хоткей (shift+space) для перехода в конце строчки. keys : [ shift+space ], command : move_to , args : to : eol , extend : false ,
Danila Nechaiev 6 months ago
Нет непосредственно emmet'a чрез cntl+shift+p
Евгений Холодов 6 months ago
Почему то при нажатии TAB, для развертывания кода с помощью Emmet он этак же копирует в буффер обмена таковой код (к примеру желаю раскатать типовой исходный код html). Вводу ! , нажимаю TAB, он разворачивает код и копирует смысл >! Может у кого то было такое? Как поправить?
Иван Иванов 6 months ago
Насколько видео животрепещуще в части LiveReload в Sublime Text 3?
Иван Иванов 6 months ago
Какое у Вас позволение монитора?
Александр Поцепаев 7 months ago
В видео говорится что ты сносил Sublime с всеми плагинами. Розкажи будто ты это делаешь. Будет здорово, ведь это не этак то попросту.
Иван Орлов 7 months ago
Ребят, кто нибудь подскажите если в курсе что за тема вот эта:
MrSerozka 7 months ago
Как вы сделали чёрный верхний бар у окон Windows?
babur muzaffarov 7 months ago
отчего у меня не выходят варианты когда пишется install?
ZENI 2 7 months ago
Это божественно! Очень напарился с Open in Browser решение оказалось там где я и не мог поразмыслить ))
Станислав Владимирович 7 months ago
не могу отыскать инф будто поменять браузер какой ST употребляет для Open in browser. На момент установки редактора браузером по умолчанию был Хром, сменил на мозилу однако редактор все равно открывает странички в Хроме. Linux Mint 8.1 Cinnamon
ManManage Live 7 months ago
При попытке сохранения жарких кнопок можно пойти более обычным методом: если появляется промах, попросту создаем папку Default и позже поновой пытаемся сохранить опции - файл сам создается уже
Thomas Berk 7 months ago
Если кто-то на данный момент глядит,и у него трудности с LiveReload , то установите расширение SuperAutoRefresh для хрома,этак будто LivePage на этот момент стоит средств. В SAR вы можете экспонировать промежуток времени в котором будет обновляться страничка.
John Walker 8 months ago
Походу в новых версиях sublimetext 3 уже работает по другому((
John Walker 8 months ago
Что мастерить если уже в самой проге нету KeyBindings -Default а вижу попросту keyBindings???
John Walker 8 months ago
Объясняй толково бро. Говори, что потом данной функции ul>li*5 НАДО НАЖАТЬ TAB. Просто, чайники это не догоняют !!!!
3199583 3 months ago
благодарю за ответ
John Walker 8 months ago
ul>li*5 не могу осознать, будто работает. У меня не раскрывается !!!
John Walker 8 months ago
У кого нибудь работает Reindent?
The Nastya Net 9 months ago
надавила !+таб всё заработало, а когда нажимаю li*5 ничего не происходит
Lovell 9 months ago
Отдельное благодарю за reindent, лишь на данный момент они сделали еще удобнее т.е., не необходимо основывать блокнот и всё такое, попросту необходимо прописать скрипт в правом окне при нажатии Key bindings , положим: [ keys : [ alt+shift+f ], command : reindent ] и всё будет пять трудиться, это этак, на заметку пришедшим поглядеть твой ролик :)
Vlad Koshelev 6 months ago
ТЫ есус, я находил решение этой трудности 3 часа, я уже сам пробовал там шумахерить, попросту я новенький лошпед) благодарю !
Алекс 9 months ago
У меня по ходу установки других плагинов закончил трудиться emmet. WTF?:)
WebDesign Master 9 months ago
Пользуйтесь новым управлением, это устарело.
Жангелди Жаркынбаев 9 months ago
создаю текстовый документ пишу index.html а она у меня чрез Opera а не Mozila. нажимаю Open in Browser страничка не обновляется и пустая ) что мастерить ????
Нина Зоркина 10 months ago
Не вышло выслать точку с запятой,выделяется колесиком будто в обыкновенном редакторе и удаляется текст. Менять колесиком попиксельно padding тоже не выходит, вроде пристально слушала
Anar Qurban 10 months ago
Помогите изволь. Сделал все что вы гласите однако нажимаю Carl+k+o он не реагирует что мастерить ?
Larry A. Franks 10 months ago
21:49 не работает
Виталий Ветошкин 10 months ago
Плагина BufferScroll к огорчению отчего-то больше дудки в репозитории.
deus 10 months ago
Единственный ключ в вебе, где описано что потом установки плагина, необходимо добавить в LiveReload.sublime-settings, последующее: enabled_plugins : [ SimpleReloadPlugin , SimpleRefresh ] Только этак плагин работает подабающим образом. При всех других раскладах livereload необходимо вводить любой один при запуске ST, или любой один вставлять на страничку ненадобный скрипт. Автору благодарю!
Greg Grams 10 months ago
Подскажите, отчего у меня курсор не будто у создателя, а нижним подчеркиванием?
Greg Grams 10 months ago
Спасибо
Sergey Golubev 10 months ago
Клавиша Insert, если еще животрепещуще.
Влад Шуманович 10 months ago
Не работает Live Reload в хроме(
Сергій Войтюк 10 months ago
а чтоб сохранить все эти опции на будущее, можно попросту скопировать папку с пекеджами и сетингами? этого довольно?
WebDesign Master 10 months ago
Да. Кроме плагинов. Их придётся доустановить.
Kontora sb 11 months ago
Добрый денек. Подскажите, Sublime Text 3 при сохранении Ctrl+s, в css добавляет пробелы и переносы потом запятых, будто это отключить???
Руслан Любимов 11 months ago
в yandex-браузере livereload заработал потом того будто я установил разрешить обнаруживать по ссылке
Simply User 11 months ago
Спасибо огромное!
THE:WEB EXPERT 11 months ago
На маке  LiveReload не работает
WebDesign Master 11 months ago
Используйте Gulp.
Артём Суслов 11 months ago
В emmet не работает Tab - Sublime text Так может случиться, что В emmet не работает Tab у редактора Sublime text, и я тоже кучу итого перерыл в вебе, однако не отыскал.сделал сам. На самом деле я сообразил, что у меня emmet не работает вообщем, видимо опции различных плагинов пересеклись либо еще что.помучившись цельный час либо два я вот что сделал: Preferences -> Browse Packages. (описание режима в настройках sublime text3) - раскрывается папка с опциями плагинов, однако мы идем на степень выше Installed Packages (здесь находятся главные пакеты редактора) - и находим в этой папке Emmet.sublime-package либо что-то похоже (ко времени, когда вы читаете эту статью все может поменяться) - сейчас закрываете саму программку и лишь позже удаляете этот файл - этак мы удалили emmet. Далее открываете программку sublime text 3 по новейшей и нажимаете ctrl+shift+P , набираете буковку i - и увидите Control Control: Install Package - нажимаете - вводите emmet и нажимаете enter. Кстати, ранее он именовался попросту emmet, а на данный момент типа emmet css style - что-то такое. Плагин установится, снова перезапускаем программку и радуемся. То кушать в итоге посодействовала переустановка emmet.я рад) надеюсь и вам посодействовало Спасибо, заодно и css emmet установил. У меня неувязка оказалась в другом – я пробовал таб жать, не сохранив файл будто html. Когда все аннотации выполнил то доперло)
Віталій Пайтина 11 months ago
где ставится эта галочка о которой говорится на 5 минутке 33 секунде. у меня создается файл index.html без ярлычка брузера
Андрей Борзило 11 months ago
благодарю)
Peter Kondratenko 11 months ago
У меня все работает не считая TAB SIZE =( Ставлю 2, будто было 4 этак и осталось =( Как излечить?
Denis Malinov 11 months ago
Красава-!-)
The Yodes 11 months ago
любой год трудности с этим лайврелоад, ранее на хроме криво работало, сейчас вот на мозиле вообщем не запускается.
The Yodes 11 months ago
благодарю за рекомендация, этак и сделаю.
WebDesign Master 11 months ago
Используйте Gulp либо Prepros. Они надёжные и долговременные.
under shock 11 months ago
отчего у меня не передается то что я пишу в браузере? плагин виев ин браузер устанавливал, браузер менял
Юрий Юрьевич 11 months ago
Безусловно лайк и подписка, создателю большущее благодарю!
Роман Сурмач 11 months ago
не работает Emmet нормально. Если я желаю попросту div + tab то норм, а если желаю немало то не работает + делал все по видео а лайв релоад в хроме не работает
Raul A. 1 year ago
Спасибо за полезное видео. Можно два вопроса? 1) Посоветуйте изволь аналог для Мака для браузера Хром. Не работает отчего-то. Возможно что-то не этак делаю. Версия Сублайма последняя. 2) Как на маке отворить Gist из Гитхаба?
Raul A. 1 year ago
благодарю огромное
WebDesign Master 1 year ago
1. Gulp 2. Всё также 3. установите вручную -
Raul A. 1 year ago
3) Еще не удалось отыскать Buffer Scroll, видимо не существует сейчас этот плагин?
ADERG 1 year ago
помогите у меня промах с Сохранением дефолтных опций , нажимаю ctrl+s и промах
Yuriy Ivzhenko 1 year ago
У кого не работает LiveReload, мне посодействовало потом копирования в папку Packages ввести в Sublime
Oleg Sokolov 1 year ago
Спасибо! Очень нужный задание.
Яна Близнюк 1 year ago
Спасибо!)) доходчиво)
Шалом Jerusalem 1 year ago
проблема отчего в новых версиях не работает tab
Владимир Борисовский 1 year ago
Огромное благодарю создателю! Очень полезное видео. Подскажите, изволь, будто менять сниппеты в Emmet. положим при нажатии ! + TAB развертывается стандартная конфигурация: <!DOCTYPE html> <html lang= en > . и т.д. будто сделать чтоб <html lang было = ru а не = en > либо чтоб в <head> сходу подключался style.css В общем хотелось бы отредактировать сниппет. Подскажите, будто это можно сделать.
Владимир Борисовский 1 year ago
Спасибо
WebDesign Master 1 year ago
Владимир Борисовский 1 year ago
Ссылочку бы на задание.
WebDesign Master 1 year ago
+Владимир Борисовский воспользуйтесь сниппетами Sublime Text. У нас кушать соответственный задание.
Pavlik Roman 1 year ago
При необходимости прибавления, дописать в написанную строчку дополнительно параметра , происходит не вставка, удлиннение строчки, а автозамена, написанного ранее параметра. Подскажите изволь, будто это поменять, поправить? Sublime Text 3
JoshBenderUA 1 year ago
У меня почемуто эммет сначала работал, а позже потом установки других плагинов закончил, не распаковывает ничего вообщем, хотя установлен и все опции по умолчанию.
Андрей Акимов 1 year ago
Ребята,закончил sublime выдавать подсказки варианта кода при написании,будто вернуть это дело?
Vova Denys 1 year ago
прописал скрипт и Live Reload работает даже в хроме)) <script>document.write('<script src= + (location.host || 'localhost').split(':')[0] + ':35729/livereload.js?snipver=1 ></' + 'script>')</script>
ChessVideo 1 year ago
У меня не устанаило Package Control О.С. Виндоус10 64 , чтото пишет попытайтесь вручную.pf), 'wb' ).write(by) 275309 в общем не усвою в чем проблемма((
Доспехи Блоггера 1 year ago
Хм, у меня bufferscroll нету
WebDesign Master 1 year ago
Установите вручную с GitHub.
Андрей Тимченко 1 year ago
autofilename в этот момент дудки в репозитории , а при ручной установке в папку , не работает
WebDesign Master 1 year ago
Он кушать в репозитории и устанавливается стандартно чрез PackageControl.
Алксандр Марченко 1 year ago
Может кто даст подсказку, потом проведения всех манипуляций, будто на видео, в программке закончили трудиться кнопки backspase и delete. Кто знает в чем может быть вина?
Алксандр Марченко 1 year ago
А еще при открытии программки вылезает error trying to parse file: unexpected trailing characters in packages\default\default (windows).sublime-keymap:723:2
Никита Веремеенко 1 year ago
подскажите, что мастерить в emmet'е не все сниппеты работают
Виктор Денисевич 1 year ago
Подскажите изволь, какой плагин отвечает за автоматическое отбражение значений атрибутов?
Виктор Денисевич 1 year ago
не то, видимо дудки такового плагина
WebDesign Master 1 year ago
Попробуйте SublimeCodeIntel
Виктор Денисевич 1 year ago
WebDesign Master ну-ка во к примеру я желаю к тегу <a> добавить атрибут target , и вот будто включить подсказку значений атрибута? (_blank;_parent;_self;_top), чтоб sublime мне довал подсказку какие значения атрибута target бывают?
WebDesign Master 1 year ago
Поподробней, изволь.
Дмитрий Илло 1 year ago
Спасибо создателю, за нужный ролик! От себя желаю добавить на мой взор весьма полезную настройку. Preferences> Settings-Default> 185 строчка save_on_focus_lost : ставим true и забываем про Ctr+S. Sublime будет сохранятся автоматом.
Rustam Bopriev 6 months ago
совершенно!!!
Dmitry Allen 1 year ago
Кстати самая лучшая тема которую на глаз приятно принимать (лично для меня) это One Dark (такая будто по дефолту в атоме)
Alexander Karashchuk 1 year ago
Огромное благодарю создателю.
Алексей Никулин 1 year ago
на 11 минутке можно было попросту сделать папку Default, потом забежать в Preferences->Key Bindings и надавить Ctrl+S, файл создастся в папке с необходимым именованием и содержимым сам
MSTarget 1 year ago
Преогромное благодарю за задание!)
Den Gr 1 year ago
LiveReload НЕ настроил. Как на Firefox этак и на Chrome В Магазине Расширений обеих браузеров появились, не считая обыденных LiveReload, еще и RemoveLiveReload. Поставил оба расширения на оба браузера. В Sublime настроил всё будто в ролике. Не работает Пробовал попеременно вкл\откл каждое расширение на каждом браузере, авось. Все манипуляции, на всякий, с перезагрузкой программ. Ничего Возможно аннотация 2015-го года нуждается в уточнении. Чуть ниже коммент по плагину. Суть в том, чтоб поставить галочку в его настройках Разрешить обнаруживать файлы по ссылкам. Тоже не посодействовало)
Евгения Бродовинская 1 year ago
Тоже не вышло настроить LiveReload, чтоб заработал :( У меня Chrome
Tobira Shoe 1 year ago
Не работает emmet, установил,протестировал - все нормально, потихоньку начал другие плагины устанавливать,и уже не работает, синтакс на всех файлан стоит подходящий,Может он с какимто плагином конфликтует?
mysilda 1 year ago
Тоже самое и у меня, сделала все будто у мастера, все пять все работает, захожу чрез некое пора, emmet не работает, пробовала выслать его файл из папки Installed Packages, однако когда захожу в sublime text3, emmet устанавливаеться автоматом, однако делему это не решает! Что мастерить, подскажите?
Ученик Ютуба 1 year ago
если меню прибрать в линуксе, чрез виола его не вернешь ни фига, пришлось гуглить и отыскал на Тостере: ctrl+shift+p, вводим в поиске menu и избираем View: Toggle Menu.
Vectura 1 year ago
И удивительно, однако буфер скролл в репозитории отсутствует - его не переименовали случаем?
Максим Аникин 11 months ago
Такой же проблема(((
Vectura 1 year ago
все отлично, благодарю, все работает! Только Гисты не открываются - подскажите где кнопка Key?:) Это не WIN случаем?
Ученик Ютуба 1 year ago
Здравствуйте! Нужен еще плагин для выбора цвета, подскажите какой поставить чтобы было из контекстного меню: выбор и сходу вставлялся. Спасибо.
Anastasiia Kir 1 year ago
Помогите разрешить возникшую делему. Установку LiveReload выполнила, сообразно советам. Но при попытке активации LiveReload в GH, выпадает окошко: Could not connect to LiveReload server. Please make sure that a compatible LiveReload server is running. (We recommand guard-livereload, until LiveReload 2 comes to your platform. И, соответственно, LiveReload не работает. Заранее благодарю за оборотную связь!
Эльдар Джоробеков 1 year ago
что за жаркие кнопка ? ul>li*5 lh1.6(line-height:1.6) c (color)
WebDesign Master 1 year ago
Tab.
Игорь долматов 1 year ago
sublime text 3 выдаёт ошибку при установке package control.что мастерить?
Александр Свистоплясов 1 year ago
Добрыого времени суток ! Огромное благодарю за все видео, которые кушать на канале ! Очень пригодный контент ! Но по данному уроку у меня проблема. На 34:22 минутке какая композиция кнопок , ctrl+key+o ? ctrl+key+o == ctrl+o ? Не могу осознать, что за key+o.)