Sublime text топ 10 плагины которые обязательно нужны. Emmet, LiveReload.
HTML-код
- Опубликовано: 6 фев 2025
- Всем привет в этом видео мы обсудим редактор кода Sublime text и его плагины. Я покажу какие плагины Sublime text я использую в своей работе и какие плагины советую установить вам. Покажу детально как работать с плагином emmet все горячие клавиши и настройка плагинов. Так же покажу как настроить плагин LiveReload со всеми нюансами
========================================================
ПОДПИШИСЬ на канал "Web Developer Blog" - goo.gl/Ai4OGa
И не пропускай новые видео!!!
========================================================
ПЛЕЙ-ЛИСТЫ МОЕГО КАНАЛА:
JavaScript практика - goo.gl/rxsyeX
Основы JavaScript - goo.gl/Cw7Vqv
Уроки Bootstrap 4 - goo.gl/65gmmS
Уроки Framework для верстки Foundation 6 - goo.gl/Yi2jfc
Рубрика "Основы за 10 минут" - goo.gl/QIvpDD
Верстка сайта на Foundation 6 - goo.gl/gVS45o
Основы препроцессора SASS - goo.gl/f4BDww
Уроки по Sublime text 3 - goo.gl/SjiKM2
Создаем интернет магазин на PrestaShop - goo.gl/jop7M4
Уроки jQuery - goo.gl/tjAs41
========================================================
ПОДПИШИСЬ на Группу Вконтакте "Web Developer Blog" - goo.gl/6mO5GL
========================================================
0:46 - Package Control
2:06 - Emmet
5:39 - BracketHighliter
6:17 - AutoPrefixer
7:14 - AutoFileName
8:40 - AllAutoComplete
9:08 - SideBarEnhancements
9:47 - LiveReload
12:12 - ColorHighlighter
12:53 - ColorPicker
13:20 - GIT
13:46 - CSS Comb
14:37 - Тема Sublime Text
Спасибо!!!
Спс
живи сто лет
@@cs3913 😉
Спасибо большое!
Package Control можно устанавливать прямо из редактора не копируя код с сайта!
1) Ctrl + Shift + P
2) Install Package Control
3) Нажать Enter
СПАСИБО
Благодарю
Спаси6ки ^_^
Добренько! Просто и со скоростью! Щелк, тык - Вуаля!
А что делать, если не работает "Ctrl + Shift + P"?
Воу, спасибо. Будто глаза открылись, писать код стало в 1000 раз приятнее
Это шикарно
Спасибо тебе за ролик, все отлично работает! Вот это действительно хороший канал по веб программированию!!
Спасибо, что ты есть! Шикарный канал, то, что нужно. Жалко, что раньше не нашёл его
Спасибо! Рассказывай о канале всем друзьям кто еще не знает)
Братишка, всё круто. Но чуть более позитивно. Понимаю, что хочешь срезать время видео и говоришь по делу и быстро, но чуть больше позитива даст больше плодов. Успехов.
Хорошо, спасибо
Из хороших цветовых тем крутыми считаю :
- bamboo;
-solarize;
-sunrise neo;
-agila cobalt;
-dark hero ;
Чтоб установить их жмякаем комбинацию
shift+ctrl+p
Прописываем
Instal жмём entet
И копируем название темы , жмём enter.
Чтоб применить тему нужно клацнуть "color sheme " и выбрать тему .
что нужно нажать на мак ос для копирования классов?? :( или что настроить ?:( видел как в sublime копируют код в html и вставляют сразу в css (копируют нажатием контр+тильда,пишут для этого нужно настроить плагин TAG)
Спасибо тебе ! Очень качественное и полезное видео .)
Всё чётко и по делу. Подписался
часто пользуюсь SFTP - очень удобная штука, если надо оперативно поправить что-то на удаленном сервере
Я пробовал, мне не очень подошло
не очень подошло, но альтернативы ты не знаешь?
Классное видео! Очень помогло. Спасибо!
Установил emmet. В ранее созданном файле всё работало, а во вновь создаваемом, - нет. !+таб и никаких действий. Долго мучился, но потом подсказали: надо сначала сохранить файл с расширением html. Вроде мелочь...
спасибо тебе, добрый человек )
все равно не помогает
@@АлександрКуприянов-х6б тем, у кого этот совет не помог, нужно заново включить префикс html. На верхней панели инструментов ищем View, потом Syntax -> HTML, кликаем и проверяем работу плагина. У меня заработало
@@36gradus81 Спасибо, наконец-то заработало
@@36gradus81 Спасибо, человек
Бомбезно полезное видео!!!
Помогитее! Color Highligher и CSS Cоmb включаются одним сочетанием клавиш (ктрл+шифт+С) менюшка с выбором цветов не появляется a CSS Comb выдает ошибку мол выделите текст для сортировки . Что делать? Удалять один из этих двух плагинов не вариант, т. к. оба очень полезные.. Есть ли возможность изменить сочетание клавиш для открытия одного из них?
За ролик лайк. Вопрос: есть ли плагин, который выделяет несуществующие или отсутствующие файлы? Не присоединенный, отсутствующие картинки и т.п.? В PHPStorm такая функция есть
Я использую AutoFileName, emmet, JavaScript Completions, jQuery, LocalizedMenu, Package Control, SublimeLinter.
Нормас
Есть хороший плагин: trailingSpaces. Удаляет завершающие пробелы из конца строки. Очень удобен.
ребят из 2018. Package control уже установлен. ctrl+shift+p -> Package Controll: Install package -> Пишите имя плагина.
Большинство этих плагинов уже установлено!
Спасибо бро, ты лучший !)
Спасибо!
Спасибо огромное!
Sublime 3.2 под Ubuntu. Если в меню View - Syntax не указан язык, то сочетание ! + Tab в Emmet не работает, зато работает ! и Ctrl+E
Слушай, когда сохраняешь файл в конце ставь .html
Например: index.html
Папка CSS - пуста и в таблице справа значок (stylee. css)вверху не отображается, при нажатии Ctrl+Shift+P , ничего не появляется !!! Какой выход ? В (Package Control: Instal......) вошёл через Preferences, где EMMET ??????? Много непоняток. Поясните.
Отличная подборка. Есть вопрос: пользуюсь плагином sftp - возможно ли при подключении к серверу вывести дерево каталога? чтобы всегда было открыто и выбор файлов из каталога был. Так как этот плагин предоставляет вручную поиск необходимого файла и все каталоги после этого закрываются. Возможно подскажите другой плагин для того чтобы была возможность работы с деревом каталога
Спасибо тебе огромное
Спасибо за видео, очень помог
В Ливрелоад не понял с этим скриптом - его в сэттингсах гдето сохранять не надо? на видео он просто втыкнут в какойто индекс2 html с пробными кодами..
Скажи на какой проге рекомендуеш верстать для наченающего программиста?
Visual studio code
@@SuprunAlexey ты будешь делать видео о вёрстке на Visual studio code?
скачал bracket highliter, а он не добавился в список установленных плагинов, я так понимаю он в 2020 уже по дефолту стоит?
Благодарю!
спасибо. вопрос по color highlighter: можно ли сделать так, чтобы по умолчанию не подчеркивалось значение цвета в стилях? ибо у меня в любом случае есть подчеркивание (заливка, контур - вопрос второй)
Подскажите, пожалуйста, почему в Sublime img и URL не подтягивает папки с img? Плагин AutoFileName установлен
спасибо
6:17 - AutoPrefixer
9:47 - LiveReload
13:46 - CSS Comb
Из SubText перешел на Atom, потом со временем мигрировал (к своему же удивлению, так как не люблю продукты от Microsoft) на VS Code и доволен.
Да VS code неплохой, но мне Sublime как простой редактор нравится, а как IDE я использую PHPStorm
плагин autofilenamme не предлагает никаких вариантов для картинок (или файлов css). Они должны быть сохранены в той же папке где и html?
Спасибо большое.
Ребята, подскажите, как автоматически проставлять комментарий сразу после закрывающиего тега div-а? Чтобы видеть какой класс закрывается. Видел у кого-то в уроках. Поиск молчит.
подскажи пожалуйста, у многих где номера строк в саблайме есть стрелки, с помощью которых можно сворачивать часть кода, у меня таких стрелок нет, как их туда поставить?
А почему у меня не подсвечивается синтаксис css файлов. Меняла синтаксис на CSS3, LESS, CSS и другие разные синтаксиса, нормально не подсвечивает?
что нужно нажать на мак ос для копирования классов?? :( или что настроить ?:( видел как в sublime копируют код в html и вставляют сразу в css (копируют нажатием контр+тильда,пишут для этого нужно настроить плагин TAG)
я не могу понять какие клавиши у меня установлены по дефолту. учусь на мак ос в subline установил ecsstractor по дефолту пишет кнопки "super+shift+x" не понимаю что за кнопка супер?попробовал контрл команд алт не подходит , как изменить сочетание клавишь тоже ума не хватает + на англ вся программа , подскажи пожалуйста как быть
какими клавишами можно запустиь файл в браузер?
Про Emmet чистая правда) без него сейчас как без рук
спасибо, очень полезно
от души, братан.
Подскажите, у кого стоит плагин img-placeholder у вас номально работает? У меня почему то в src=" " не выпадает список с подключением картинок((
Вопрос,а как просмотреть код в браузере?
Привет, у меня почему-то не работает livereolad, делал все как на видео, но после сейва все равно приходится перезагружать страницу самому
Awesome! thanks!
Я пользуюсь Brackets. И там есть классный плагин для код-стайла - Beautify. А вообще по плагинам в Brackets есть хорошая статья на хабре habrahabr.ru/post/242623/ . А т.к. я нашла плагины в Brackets, которые вы перечислили для Sublime - то, думаю, что из этой статьи и вы извлечете пользу:)
Спасибо
Brackets действительно лучший frontend редактор, а для backend разработки лучше чем PhpStorm пока не знаю, но советую попробовать Aptana Studio 3 и к тому же Aptana GNU GPL, то есть бесплатная
У Sublime есть плагин Prettify, делает тоже самое даже больше
Sublime3 much more beteer then Brackets!!!
Спасибо. Очень хорошее видео. Скажи пожалуйста почему плагин Colorhighlighter не отображает цвет в css когда его выделяю?
Выделение перебивает плагин, это не баг, так надо)
@@gumper4634 даже если постовить курсор он не работает((
@@Oksana_Bon ставь color highlight
На много ли лучше 3 версия чем 2 просто я папробывал установить 3 там много плагинов не устанавливается а на второй версии вроде все установилась ? Спасибо)))
Я все сделал как у автора, также установил node.js, т.к. его не было на компьютере. Затем проверил, что он запущен в переменных средах PATH моей Win 10, однако, когда я нажимаю ctrl+shift+p, выбираю Autoprefix CSS и нажимаю ее, то...... ничего не происходит ((( Помогите, пожалуйста, разобраться!!!
в 2020 году это уже все по умолчанию. даже тема monokai )))
Это хорошо
@@SuprunAlexey я поставил sublime и ничего не настраивал. все по умолчанию с коробки. а все работает как вы в видео показываете уже с подключенными пакетами . в конце решил поставить тему как у вас, смотрю она уже стоит :)
@@sh.konstantin Emmet и автообновление не стоит)
У меня Autoprefix установился, команда появилась, но не префиксирует, ребутал саблайм. И CSS Comb тоже...
Здравствуйте. Возможно ли в sublime Text редактирование нескольких одинаковых строк "одновременно" в других файлах!?
Например: я выделяю строку в одном файле нажимаю ctrl+d и меняю таким образом ссылки, домены, и т.д.
Но, такой метод с каждым файлом очень долгий и неудобный! Я за 2дня только 1000 страниц закончил и ещё есть столько же;( если есть способы удобнее подскажите плз.
в саблайме по моему такого нет
*Всем привет. Подскажите - выделяю текст, выбираю CSScomb - выдает ошибку. Node.js на компе стоит. Заранее спасибо за ответ!)*
А как же те времена, когда для подключения аудио колонок нужно было вносить изменения в autoexec.bat и config.sys?
Для тех у кого траблы с emmet`ом попробуйте сочетание клавиш ctrl+e
upd: или просто сохраните файл в формате html/css и т.п., дабы эммит знал че ему делать)
В плагине emmet почему то не работают скобки ( ) Когда делаешь большое выражение и ставишь скобки выдает ошибку unexpected character
autoprefixer ошибку выдает "autoprefixer couldn't find node.js. Make sure it's in your $PATH by running node-v in your command-line"
можно установить node.js
все легко решилось) это ошибка означает что программа не может найти node.js, т.к. у многих его нет на компьютере надо скачать и установить его вот ссылка: nodejs.org/en/ и все будет работать
@@maxwelplay2851 Подскажите, пожалуйста, как Вы исправили эту ошибку. Дело в том, что я скачал и установил node.js, однако, плагин по-прежнему не работает ((((
@@Magnetar_Mind_Booster поделись пожалуйста а то сам в такой ж... нахожусь голову ломаю
@@rus1006 Делюсь )))) Скачайте и установите себе Visual Studio Code от компании Microsoft. Сам по себе это отличный редактор. Не стоит заморачиваться с Саблаймом!!! Поверьте, он Вам понравится.
3:06 {Я ток учусь на програмиста} Увидел, охерел, скачал
так стоп, вроде там в послед версия и без плагинов все также, я пишу
@@belial473 там не так удобно, с Emmet писать намного меньше надо
Подскажите, что делать если не работает Autoprefixer?
Ребят подскажите в чем дело устанавливаю ColorPicker а он вылазит в виде обычного окна словно в Paint... т.е. нет этой лупы и такого приятного на вид меню.. уже мозг закипать начинает... не пойму в чем дело..
да и когда пишу color в css документе цвет тоже не выскакивает только на ctrl+shift+c, и то как писал выше как в paint только самому выбирать цвета..
Хотелось бы увидеть установку и настройку vs code
Это на Яблоке"?
Почему я не могу найти в package control другие плагины кроме emmet?
Не знаю
а как Вы экран так сделали на два стола для индекса и цсс?
разобрался
гугл помог?
Web Developer Blog нет,поизучал меню)
а как так же разделить по полам
Как сделать так, чтобы в brackets control тэги подсвечивались белым, а не оранжевым?
как ты разместил две страницы кода на одной странице в одном окне одновременно?
ALT+SHIFT+ 1-10(в зависимости от нужного кол-ва страниц)
Если кто не разобрался с EMMET. Я не разобрался какой установить, их там 3, установил EMMET и Emmet Css. После установки у вас появится окно с текстом, у меня англ.версия, если у кого тоже, то там просто благодарность за установку.
Закрываем окно, и зажимаем CTRL + Teb, либо CTRL + E. Что дальше?
1. В нижнем правом углу, правее "Tab Size" выбираем тип текста - HTML. Нажимаем CTRL+C, пишем любое имя и сохраняем файл.
2. Пишем " ! ". И нажимаем не Enter, а TAB. А теперь все готово. И HTML вставка, и коды сами закрываются.
3. Уравнение на быстрое написание. h1>p(ul(li*8), нажимаем enter. Знак " > ", это та же стрелка, а скобка означает что внутри контейнера p, будет список ul, внутри которого будут пункты, я умножил на 8, т.е. пунктов будет 8.
Все. Успехов) Главный учитель - это практика, главный навык тут - упорство)
привет! а как ты открыл вторую сторону для CSS?
alt+shift+1,2,3,4 (точно работает для windows)
view - groups - там на англ (добавить, удалить и тд.)
Почему я установил плагин Sidebar Enhancements, а полоски-светофора наверху редактора нет?
Чего чего? какой полоски?
Посмотри,над текстовым полем редактора, под меню находится серо-белая полоска и слева в углу на ней - горизонтально светофор расположен.На этой же полоске написано имя файла HTML2
Какое функциональное назначение у светофора?
Это на маке кнопки закрыть, свернуть и развернуть на полное окно=)
Да, отстал я от жизни:))
улыбнул)
подскажи пожалуйста что делать если таб просто делает отступ , а не как у тебя в видео, заранее благодарю)
Сначала нужно вибрать формат справа внизу " html"
Братан не подскажешь почему у меня не работает rgba
Где?
где плагин для сравнений? хочу понять какой лучше
Плагин AUTOPREFIXER не работает, сначала выдавал ошибку, что не может найти Node.js, я его установил, но плагин все равно не работает. В чем еще может быть проблема?
решение такое: оказалось, что его ещё настраивать нужно, по умолчанию он поддерживает последние 2 версии браузеров. Я прописал такое "browsers": ["last 8 versions", "> 0.01%"] и стал добавлять все префиксы. В настройках плагина/ Sublime-Prefences-PackageControl - Autoprefixer
Плагин AUTOPREFIXER не работает, сначала выдавал ошибку, что не может найти Node.js, я его установил, но плагин все равно не работает. В чем еще может быть проблема? В винде через командную строку при команде node -v показывает версию 8,12,0
решение такое: оказалось, что его ещё настраивать нужно, по умолчанию он поддерживает последние 2 версии браузеров. Я прописал такое "browsers": ["last 8 versions", "> 0.01%"] и стал добавлять все префиксы. В настройках плагина/ Sublime-Prefences-PackageControl - Autoprefixer
подскажите, какой плагин есть для саблайма, чтобы преобразовать код, который написан в одну строчку (все в куче), в привычный нам код с отступами и переносами строки по вложенностям?
в brackets такой плагин называется Beautify
и в Саблайм он так же называется)
codeformatter, tag
МИСТЕР УГОЛЁК, а как точно он называется? просто Beautify нету. нашел HtmlBeautify, но он делает только отступы у кода, который уже на разных строках разбросан. а код кучей (который весь в одну строку слеплен) на разные строки не разделяет
Не знаю, не пользуюсь таковым
packagecontrol.io/packages/Tag , либо codeformatter
в питоне, в sublime text когда начинаю вводить while возникает строка быстрого ввода - > после enter выводит while
pass:
почему это происходит и как настроить просто вывод "while"?
спасибо.
Для пайтона лучше pycharm юзайте, по мне так удобнее раз в 1000
А как сделать авторедактирование кода, ну чтобы он красиво становился ??
теги через таб и css свойства и без emmet прописываются, а вот блоки и структура сложная уже нет
Всем привет! Установил в саблайм несколько плагинов, в том числе и emmet. Но что то пошло не так после перезагрузки и эммет не срабатывает. например после команды ! затем таб не происходит развертывания. Подскажите в чем дело?
документ должен быть сохранен как html тогда буду применяться эмета команды
Спасибо тебе добрый человек)
в .php тоже срабатывает
Autoprefixer не работает, node js поставил для него, LiveReload тоже. Для All autocomlete такой фикс помог: sridhar.blog/enable-autocomplete-css-selectors-sublime-text/. Ещё полезный плагин это Auto-save, сохраняет файл при любом изменении в нём.
а может ли Livereload обновлять страницу без обновления документа?
Нужно сохранить документ, тогда изменения увидите
Я только учусь, но могу посоветовать для работы с less 2 плагина: LESS и Less2Css
Отличные
Установил все как нужно но эммет не работает. Ифайл хтмл создал, но автозаполнения нет в чем трабл кто подскажет?
почему в пекеджконтроле когда вписываешь название плагинов он их не находит ?
Что сдедать чтоб CSS Comb заработал? Кто не был задан? 14:15
В VSC помоемому почти все перечисленное есть сразу же
Посоветуйте плагин для работы с FTP.
эт норм? у моего sublimetext нет менюшуи сверху
шо делать ребята , помогите
когда практика по jQuery??
Мало просмотров по jQuery как то, будет просто практика, со всем, время от времени будем jQuery применять
ждем
поставил на debian ST3 build 3143 уже стоит packagecontrol, можно вызвать ctrl-shift+p
AdvanceNewFile чтоб хоть как то начать работать)
Лицензию-то купи на саблайм ;)
Зачем?
Web Developer Blog Странно слышать от разработчика софта подобный вопрос. Всего хорошего.
Нет лишних денег, сами понимаете)
дорого
А где найти волшебную палочку?
Какую
Почему когда я хочу вставить картинку, она не отображается в браузере
Код в студию
Я разобрался, спасибо
@@SuprunAlexey привет, не могу найти почти все плагины в sublime, нашел Эммит и ещё парочку и все .
@@khramovwww А как ты смотришь код в браузере?У меня не получается
Все сделал по видео.
Но переходя на сайт ничего не изменилось.
Шрифт маленький, черной полосы нет.
Отображается без цветов. Все теги, атрибуты и т.д. серого цвета. В чём проблема может быть ?
Настройки во вкладки вью, синтаксис и выбираете нужный, по умолчанию открывается просто текст.